Asp.Net PopupMessageBox

Yazar: Canan Gümrükçüoğlu
Kategori: ASP.NET
Eklenme Tarihi: 14.2.2011 07:54:52



Web projeleri yaparken hepimizin aklından şu masaüstü uygulamalarındaki MessageBox keşke web’de de olsa diye geçmiştir. Özellikle benim gibi web projelerinden ve javascript gibi bir can simidinden uzak olanlar. İşte yine böyle düşündüğüm bir gün Burak Hoca’nın paylaştığı A Customize MessageBox, ConfirmBox and FrameBox Control for ASP.NET adlı makaleyi görünce işte aradığım işey dedim. Ancak makaledeki kodları uygularken Ajax Control Toolkit versiyonu yüzünden hata aldım (Makalede kullanılan versiyon 3.0, ben projede 3.5 kullanıyorum.) ve iş başa düştü diyerek bir User Control yazmaya başladım.

Web projeleri yaparken hepimizin aklından şu masaüstü uygulamalarındaki MessageBox keşke web’de de olsa diye geçmiştir. Özellikle benim gibi web projelerinden ve javascript gibi bir can simidinden uzak olanlar. İşte yine böyle düşündüğüm bir gün Burak Hoca’nın paylaştığı A Customize MessageBox, ConfirmBox and FrameBox Control for ASP.NET adlı makaleyi görünce işte aradığım işey dedim. Ancak makaledeki kodları uygularken Ajax Control Toolkit versiyonu yüzünden hata aldım (Makalede kullanılan versiyon 3.0, ben projede 3.5 kullanıyorum.) ve iş başa düştü diyerek bir User Control yazmaya başladım.


Kodlamaya başlamadan önce eğer Ajax Control Toolkit bilgisayarınızda yüklü değilse buradan yükleyebilirsiniz. Ajax Control Toolkit’in yüklenmesi makalemizin konusu olmadığı için burada bu konuya değinmiyorum. Şimdi bir web projesi açıyoruz ve projeye PopupMessageBox adında bir Web User Control ekliyoruz. Kontrolün Design tarafına geçerek öncelikle Ajax Control Toolkit’i kullanabilmek için Register anahtar kelimesi ile kontrole tanıtıyoruz.



Daha sonra sayfaya Toolbox’tan bir ToolScriptManager sürükleyip bırakıyoruz. Bu sayede sayfamızda Ajax kontrollerinin kullanılmasını sağlıyoruz. Eğer bu kontrolü sayfamıza eklemezsek “ExterderBase.dll not found” tarzında bir hata alıyoruz.



Şimdi sıra tasarımı oluşturmaya geldi. Öncelikle tasarım kodlarına bakalım sonra da sırayla açıklamalarına.


Öncelikle sayfaya bir adet Panel kontrolü ve bu panelin içine PopupMessageBox’ ımızda kullanacağım resmi tutacak bir Image, uyarıyı barındıracak bir Label ve tıklandığında popup’ ın kapanmasını sağlayacak bir Button yerleştiriyoruz. Sonra user control’ ümüzün popup özelliği kazanmasını sağlayan ModalPopupExtender kontrolünü ToolBox’ tan sürükleyip sayfamıza bırakıyoruz. Design kısmına ait resimin ilk satırındaki btnPopup adındaki Button kontrolünden henüz bahsetmediğimiz dikkatinizi çekmiştir. Bu butona geçmeden önce kısaca ModalPopupExtender’ ın özelliklerini inceleyelim.

PopupControlID: Popup olarak açılacak olan kontrolün Id’ si.
DropShadow: Popup pencerede gölgelendirme yapılıp yapılmayacağı.
BackgroundCssClass: Popup pencerenin arkaplan rengi. Burada dikkat edilecek nokta şu ki bu özelliğin bize lightbox tarzı bir kullanım sağlaması.
TargetControlID: Popup pencerenin açılmasını tetikleyecek olan kontrol. Burada popup pencerenin herhangi bir web sayfasında adı bilinen bir butona tıklanmasını amaçlamayıp daha kullanışlı olması açısından bir user control yazıyoruz. Bu nedenle bu user control’ü herhangi bir sayfada kullandığımızda tetikleyecek olan kontrolün adını bilemeyiz. Burada TargetControlID’ yi boş bırakıp user control’ ü sayfaya yerleştirdiğimizde değerini verelim diyemiyoruz çünkü bu durum hata fırlatıyor. Bu nedenle göstermelik olarak bir buton kontrolü koyarak TargetControlID’ ye bu butonun adını veriyor. Bu butonun ekranda görünmesini engellemek için de butona css uyguluyoruz. 

Yeri gelmişken PopupMessageBox’ımıza biraz css uygulayalım :) (Benden ancak bu kadar oluyor :))


Evet kontrol tarafında son aşamaya geldik. Kontrolümüzün kod tarafına geçiyoruz.

Öncelikle kontrolümüzün Başlık, Uyarı mesajı ve Resim Yolu’ nu tutacak özelliklerimizi yazıyoruz.

[Bindable(true), Category("Custom Property"), DefaultValue("")]
public string Text { get; set; }
[Bindable(true), Category("Custom Property"), DefaultValue("")]
public string ImageUrl { get; set; }
[Bindable(true), Category("Custom Property"), DefaultValue("")]
public string Header { get; set; }

PopupMessageBox’ ımızın açılması için kullanacağımız Show() metodunu yazarak içinde ModalPopupExtender’ ın Show() metodunu çağırıyoruz.

public void Show()
{
infoPopup.Show();
}

Sayfadaki Tamam butonu bastığımızda popup’ ın kapanması için butonun Click Event’ inde aşağıdaki kodu yazıyoruz.

protected void btnOk_Click(object sender, EventArgs e)
{
infoPopup.Hide();
}

Son olarak PopupMessageBox’ ımız Render edilmeden önce Başlık bilgisi, Uyarı mesajı ve Resim yolunu ilgili kontrollere Page_PreRender Event’ inde set ediyoruz.

protected void Page_PreRender(object sender, EventArgs e)
{
imgInfo.ImageUrl = ImageUrl;
lblHeader.Text = Header;
lblInfo.Text = Text;
}

Şimdi sırageldi sonucu görmeye. Bunun için web sayfasında öncelikle PopupMessageBox’ ımızı Register ediyoruz.

Sonrasında da aşağıdaki gibi bir buton ve PopupMessageBox’ ımızı tanımlıyoruz.

Son olarak butonun arkasına popup’ ımızı açan kodu yazıyoruz.

protected void btnPopupAc_Click(object sender, EventArgs e)
{
pmBox.Show();
}

Ve sonunda projemizi çalıştırıp sonucu görebiliriz artık.


Canan Gümrükçüoğlu

Yazılım dünyasını üniversite yıllarında keşfeden Canan Gümrükçüoğlu, Karadeniz Teknik Üniversitesi İstatistik ve Bilgisayar Bilimleri'nden mezun olduktan sonra NETRON Bilişim Akademisi'nde MCPD eğitimi aldı. Mesleğine aşık olduğunu her fırsatta dile getiren Gümrükçüoğlu özel bir şirkette çalışmakta ve vakit buldukça freelance projelerle kendini geliştirmeye devam etmektedir. 

Kişisel bloğu; cgumrukcuoglu.wordpress.com'da günlük hayattaki tecrübelerini yazılım bloğu; canangumrukcuoglu.wordpress.com'da da yazılımla ilgili makalelerini paylaşmaktadır.
Bu makaleye ilk yorum yapan siz olun.

Yorumunuz