Makale Özeti

Merhaba arkadaşlar bu makalemizde ASP.NET AJAX Control Toolkit içerisinde yer alan Modal Popup kontrolünü kullanarak kullanıcı dostu mesaj pencerelerinin nasıl oluşturulacağına bakacağız.

Makale

ASP.NET ile uğraşırken kullanıcıyı nasıl bilgilendireceğimiz geliştirici için her zaman sorun olmuştur. Bazen label’lar kullanırken bazı durumlarda da javascript’ten faydalanarak alert metodu kullanılır ve kullanıcıya bir mesaj penceresi çıkarılır. Label kullanıldığında kullanıcı hatanın nerede yazdırıldığını algılayamıyor, alert kullanıldığında ise görsel olmayan bir pencere ile karşılaşıyoruz ve kişiselleştiremiyoruz. Kullanıcıya mesaj verirken başka bir işleminde yaptırılmasını istersek ne label nede alert bizim ihtiyaçlarımızı karşılayamayacaktır.

Örneğin üye girişi gerektiren bir sistemimiz var, kullanıcı bu alana girmek istediğin de hem kullanıcıyı bilgilendiren bir mesaj çıkartmamız hem de üye girişi formunun görüntülenmesini istersek ne yapacağız? İşte bu durumda bizim işimizi çözecek şey ASP.NET AJAX Modal Popup kontrolüdür. Modal popup kontrolü sayfamızın üzerine yeni bir layer(div) açarak kullanıcının layerin altında kalan kısmı ile işlem yapmasını engelleyerek sadece bizim açtığımız layer ile işlem yapmasını sağlar. Bizde bu oluşturduğumuz layer üzerine hata mesajlarını gösterebileceğimiz labeller ekleyebilir, üzerinde formlar oluşturup mesaj penceremizi istediğimiz gibi kişiselleştirebiliriz.

Not: Bu işlemi yapabilmemiz için AJAX Control Toolkit’i indirip kurmamız gerekmektedir. ASP.NET AJAX Control Toolkit’i indirmek için http://www.asp.net/Ajax/ajaxcontroltoolkit adresini kullanabilirsiniz.

Yeni bir ASP.NET projesi başlattıktan sonra. Sayfamıza bir adet UserControl ekleyelim. Adı WebMessageBox olsun. UserControl için HTML kodumuz aşağıdaki gibi olacaktır.

[WebMessageBox.ascx]

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>

// Modal Popup kontrolünü dinamik olarak çağıracağımız için TargetControlID’ye bir değer atayamıyoruz. Bu özelliğe bir değer atamazsak hata verecek bunu engellemek için de formda görünmeyen bir buton ekledik.

<asp:Button ID="btnShow" runat="server" Style="display: none;" />

<asp:Panel ID="pnlPopup" runat="server" Style="background-color: White; width: 420px; border-width: 2px; border-color: gray; font-size: 10pt; font-family: Tahoma; line-height: 15px; border: 1px solid #A6A6A6;">

<div style="background-color: red; background-repeat: repeat-x; width: 415px; height: 22px; padding-top: 3px; text-align: left; padding-left: 5px; font-weight: bold;">

<span style="color: #FFFFFF; direction: ltr;">Mesaj Kutusu</span></div>

<div style="padding: 5px;">

<div style="padding: 10px;">

<div style="float: left; padding-right: 10px;">

//Hata olduğunda kullanıcıyı bilgilendirecek olan resim dosyası…

<asp:Image ID="imgIcon" runat="server" />

</div>

<div>

//Hata Mesajının gösterileceği textbox…

<asp:Label ID="lblMessage" runat="server"></asp:Label>

<div style="width:100%; text-align:right; padding-top:20px">

// Açılan ModalPopup kontrolünü kapatacak olan buton…

<asp:Button ID="btnClose" Text="Kapat" runat="server" CausesValidation="False" />

</div>

</div>

</div>

</div>

</asp:Panel>

<cc1:ModalPopupExtender ID="ModalPopupExtender1" runat="server" TargetControlID="btnShow" PopupControlID="pnlPopup" BackgroundCssClass="modalBackground" DropShadow="true" />


ModalPopup kontrolünün arka BackgroundCssClass özelliği içinde bir CSS class’ı oluşturalım.

 

[WebMessageBox.css]

.modalBackground

{

background-color: black;filter: alpha(opacity=70);opacity: 0.7;   

}


Yaptıklarımızı inceleyecek olursak, lblMessage kontrolünü MessageBox açıldığında içerisinde göstereceğimiz hata mesajı için, imgIcon kontrolünü kullanıcıyı bilgilendiren bir resim için, btnClose’u da açılan popup penceresini kapatmak için ekledik. Peki btnShow butonunu neden ekledik? Bununda nedeni aslında basit, Modal PopupControl’ünün TargetControlID parametresine mutlaka bir değer atamak zorundayız. Bunun için bizde forma bir buton ekledik display özelliğini kapattık ve ModaPopupControl’ün TargetControlID özelliğine bu kontrolü atayıp bu sorunu çözdük.

Buton’un display özelliği kapalı olduğu için bu kontrolü kullanamıyoruz. Zaten bizim amacımız da bu değil. Bizim yapmamız gereken istediğimiz yerden bu UserControl içerisindeki ModalPopupExtender’i çağırmak. ModalPopup kontrolünün server-side çalışan Show isimli bir metodu var. Bu metot ModalPopup kontrolünün kullanıcıya gösterilmesini sağlıyor.

ModalPopupExtender.Show()


Bizde bu metodu kullanarak kod tarafından modalpopup kontrolünü görünebilir hale getirelim. Bunun için UserControl’ün kod dosyasına gidip bir metot yazalım. Bu metot ilgili yerlere değerlerini atasın ve değerleri atadıktan sonra da ModalPopup’ın gösterilmesini sağlasın.

[WebMessageBox.ascx.cs]

public void Show(string Mesaj, string Action)

{

if (Action == "success") // Burayı enumda yapabilirsiniz…

{

imgIcon.ImageUrl = "success.gif";       

}

else if (Action == "error")

{

imgIcon.ImageUrl = "error.gif";

}

lblMessage.Text = Mesaj;

ModalPopupExtender1.Show();

}


WebMesageBox kontrolümüz hazır, şimdi bu usercontrol’ü bir sayfaya ekleyelim. Aynı zamanda bir buton ekleyelim. Bu buton WebMessageBox’ın görüntülenmesini sağlayacak.pan>

[Default.aspx]

<%@ Register src="WebMessageBox.ascx" tagname="WebMessageBox" tagprefix="uc1" %>


<
asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>

<uc1:WebMessageBox ID="WebMessageBox1" runat="server" />

<br /> <br />

<asp:Button ID="Button1" runat="server" onclick="Button1_Click" Text="Button" />


Şimdi de buton’un click eventine gidelim ve UserControl içerisinde yer alan metodu kullanarak MessageBox’ı çıkartalım.

[Default.aspx.cs]

protected void Button1_Click(object sender, EventArgs e)

{

WebMessageBox1.Show("İşlem Başarılı", "success");

}


Çalıştıralım,

Birde kodu aşağıdaki gibi değiştirelim.

[Default.aspx.cs]

protected void Button1_Click(object sender, EventArgs e)

{

WebMessageBox1.Show("Hata var…", "error");

}

 

Tekrar çalıştıralım,

Hoş geldin WebMessageBox… Kaynak kodları indirmek için tıklayınız

Başka bir makale de görüşmek üzere. ASP.NET ile kalın J

Sem GÖKSU
www.semgoksu.com | www.yazilimgunlugu.com
sem.goksu@yazilimgunlugu.com

Kaynaklar
asp.net/ajax