MessageBox

Makale

Web uygulamalarında çoğu zaman windows uygulamalarındaki gibi bir MessageBox'a ihtiyac duyarız. Windows uygulamalarında MessageBox bir modal-dialog olarak gösterilir. Yani gösterildiği anda arkasında kalan formu disable eder. Bu sayede mesajda belirtilen soruyu / mesaji okumadan ve onaylamadan devam etmenize izin vermez. Bu da çoğu zaman ihtiyac duyduğumuz durumlardan biridir. Pek çoğumuz web uygulamalarında da bu durumla karşılaşmışızdır.

Web uygulamalarında hem işlemin devamı için bir duraksamaya, hem de arka taraftaki kontrollerin messageBox gösterilirken disable bir hale gelmesi gerekir. Bunu biraz html biraz java script ile gerçekleştirmek mümkün. Öncelikle ne yapmamız gerektiğini tam olarak belirleyecek bir senaryo yaratalım.

    1) Kullanıcı datagrid üzerinde gördüğü verilerden birtanesini seçti.
    2) Seçtiği bu satırı silmek için "sil" butonuna bastı.
    3) Karşısına "silmek istediğinize emin misiniz?" sorusunu soran ve "evet" , "hayır" butonları olan bir messagebox açıldı.
        Bu mesajbox açıkken kullanıcının görünen tüm öğelerden yalnızca ve yalnızca evet ve hayır butonlarına basması gerekmektedir.
    4) evet butonuna basıldı ise ilgili kayıdı siler.
    5) hayir butonuna basildi ise bir işlem yapmaz.
    6) messagebox kapanır ve sayfa içeriği yeniden aktive edilerek kullanılabilir bir duruma geçer.

3. adımdan itibaren neler gerektiğini belirler isek, mesajımızı göstereceğimiz bi bölüm, cevap alacağımız butonlar, arkadaki içeriğin bloke edilmesi en önemli işlevlerimizdir. Bunu nasıl yapabileceğimizi belirleyelim.

Bir çoğumuz javascript ile actirabileceğimiz ( window.showModalDialog(...) ) bir pencere ile arkadaki sayfayi blocklayabileceğimizi biliyoruz. Fakat yeni bir pencere açmak = popup blocker'lara yakalanmaktır. Bu da bir çok web developer için istenmeyen durumlardan biridir. Öyleyse göstereceğimiz pencere, aynı explorer penceresinde olmalıdır. Bunun için de en uygun html componentimiz panellerdir.

Panellerin yerleşimi ise şöyle, bir tane, tüm sayfayı kaplayacak, transparan, z-index'i tüm componentlerin üzerinde olacak bir panel. Bunun sayesinde arkadaki içeriği gizlemiş, tıklanamaz hale getirmiş olduk. Fakat, hepimizin bildiği gibi, dropdown listler her zaman en üstte kalırlar, onları da bir javascript ile (hideSelectBoxes() ) invisible yapabiliriz.

Sonrasında yapmamız gereken şey; mesajımızı, messageBox buttonlarımızı göstereceğimiz yeni bir alan -panel- bu panel ise, hem az önceki transparan panelin hem de diğer içeriğin üzerine gelecek bir z-index e sahip olmalıdır.

projede, görselliği düzenlemek için iki adet daha panel kullanılmıştır. Bu title ve mesajı tam olarak istenilen yerlere oturtmak için kullanılan panellerdir.

MessageBox server tarafında 3 adet event içerir : Btn1Clicked, Btn2Clicked,Btn3Clicked İki adet style içerir :msg.MessageBoxStyle.Violet, msg.MessageBoxStyle.Blue ve üç adet icondan oluşur. msg.MessageBoxIcons.Exclamation, msg.MessageBoxIcons.Asteriks, msg.MessageBoxIcons.Question, msg.MessageBoxIcons.None

Kontrolün kullanımı için Resources directorysi ile Mbox.ascx kontrolünü projeye eklemeniz ve sonrasında da kontrolu sürükleyip formun üzerine bırakmanız yeterlidir.

Kontrolun kullanımı ile örnek bir kod ise şu şekilde:

protected void Page_Load(object sender, EventArgs e)

{

Mbox1.Btn1Clicked += new EventHandler(Mbox1_Btn1Clicked);

Mbox1.Btn2Clicked += new EventHandler(Mbox1_Btn2Clicked);

}

void Mbox1_Btn2Clicked(object sender, EventArgs e)

{

Response.Write("2nd button clicked");

}

void Mbox1_Btn1Clicked(object sender, EventArgs e)

{

Response.Write("1st button clicked");

}

protected void Button1_Click(object sender, EventArgs e)

{

Mbox1.Show("hede", "hod");

}

protected void Button2_Click(object sender, EventArgs e)

{

Mbox1.Show("Buraya istenilen mesaj yazilabilir.", "Warning", "OK", "Cancel", null);

}

protected void Button3_Click(object sender, EventArgs e)

{

Mbox1.Show("Silmek istediğinize emin misiniz?", "Uyarı", "Yes", "No", null,msg.MessageBoxIcons.Exclamation,msg.MessageBoxStyle.Violet );

}

protected void Button4_Click(object sender, EventArgs e)

{

Mbox1.Show("Diger bir görünüm...", "Warning", "OK", "Cancel", "Retry", msg.MessageBoxIcons.Exclamation,msg.MessageBoxStyle.Violet );

}

Kontrolde yoğun olarak java script kullanılığı için daha detaylı bir anlatım yapmayacağım. İncelendiğinde oldukça anlaşılır olduğunu göreceksiniz.

Herkese iyi çalışmalar dilerim.

Kivanc OZUOLMEZ

Makaleyi nasıl buldunuz?
Makaleye puan vermek için üye girişi yapmanız gerekmektedir.

MessageBoxPrint Versiyonu

MessageBox

Print Versiyonu