Blog

  • 26 Şub 2009

ModalPopup Kontrolü ile Kullanıcı Dostu Mesaj Pencereleri Çıkarmak

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...

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:ModalPopupExtenderID="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]

publicvoid 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;
    ModalPopupExtender.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.

[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]

protectedvoid Button1_Click(object sender, EventArgs e)
{
    WebMessageBox1.Show("İşlem Başarılı", "success");
}


Sayfayı Çalıştıralım ve butona tıkalaylım,

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

[Default.aspx.cs]

protectedvoid Button1_Click(object sender, EventArgs e)
{
    WebMessageBox1.Show("Hata var…", "error");
}

Sayfadaki butona tekrar tıklayalı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

Yorum (8)

  • Zeki AKDOĞAN / 27.2.2009 12:38:38

    Çok güzel olmuş, eline sağlık.

  • murat can / 17.7.2009 02:20:57

    tebrikler. cok güzel anlatışlmış. çok faydalı bir makele olmuş. devamının gelmesi dilegiyle...

  • Sezgin Albayrak / 30.6.2010 20:46:17

    ModalPopupExtender kontrolüne OkControlID="btnClose" bu kod yazılırsa sayfa boş postbackten de kurtulur.

  • Adem Özdemir / 23.3.2011 20:41:51

    Öncelikle tebrikler. Çok güzel bir çalışma olmuş. Elinize sağlık. Sezgin Albayrak'ın da OkControlID="btnClose" önerisi ayrı bir güzellik olmuş.

  • Yasin Çınar / 5.1.2012 01:51:45

    Çok temiz,derli toplu bir makale olmuş. Teşekkür ederim

  • Murat / 12.2.2012 06:24:46

    ben yapıncada aynı hatayı aldım kaynak kodlarını indirdim çalıştırdım aynı hatayı aldım yardım edebilimisiniz hata kodunu yazıyorum The application domain or application pool is currently running version 4.0 or later of the .NET Framework. This can occur if IIS settings have been set to 4.0 or later for this Web application, or if you are using version 4.0 or later of the ASP.NET Web Development Server. The element in the Web.config file for this Web application does not contain the required 'targetFrameworkMoniker' attribute for this version of the .NET Framework (for example, ''). Update the Web.config file with this attribute, or configure the Web application to use a different version of the .NET Framework.

  • Mustafa / 9.3.2013 12:08:40

    Arkadasım ellerine vaktine emeğine sağlık. bu konuyu detaylıca araştırdım. ve en güzel çalışma olarak bunu gördüm. çok güzel de çalışıyor. Emeğine sağlık.

  • Ali / 15.4.2014 01:23:55

    benim yapmak istediğim siteye birisi login olunca modal pop up açmak okudum bir daha gösterme butonu olacak tekrar sayfaya girdiginde pop up açılmayacak nasıl yapabilirim acaba

Yorum Yaz