Etiket: modal popup extender

Ajax uygulamaları artık web sayfalarının olmazsa olmazlarından, Asp.Net ile birlikte  Ajax Control Toolkit ile birlikte ajaxın nimetlerinden en iyi ve rahat şekilde faydalanmamız hedeflenmiş. Bu yazımda Modal Popup Extender ile GridView satırında bulunan kaydın id si ile birlikte nasıl işlerimizi yürüteceğimizi anlatmaya çalışacağım. Bu konuda beni bilgilendiren Yunus Emre ye sonsuz teşekkürlerimi sunuyorum.

Burada Modal Popup kontrolüne ait bilgiler bulunuyor. Klasik kullanımı oldukça basit olan bu kontrolü GridView gibi kayıtların listelendiği nesnelerde kullanmak için farklı yöntemler kullanmak gerekiyor. Bu yöntemde aptal buton adı verilen bir buton kullanıp, modal popupu bir nevi kandırıp hata vermemesini sağlıyacağız. Modal Popupumuzun güzel görünmesi için gerekli olan sitil kodlarımız.

.popupArka{
    background-color:#333;
    filter:alpha(opacity:90);
}

.popupKapat{
    text-align:right;
    background-color:#706c6c;
    padding:2px;
    border-bottom:1px solid #c0c0c0;
}

.popupKapat input{
    font-weight:bold;
    width:25px;
    height:25px;
}

.popupKapat span{
    float:left;
    font-size:18px;
    color:White;
    font-weight:bold;
}

Üstten aşşağıya doğru açıklamaya çalışayım. ScriptManager ajax kontrollerinin çalışması için gerekli olan mekanızmamız. UpdatePanel, içerisinde olayların ajax kullanılarak gerçekleşeceği alan. Yani burada sayfamız yenilenmeden işlemlerimiz gerçekteşecek. GridView bildiğimiz Grid :) burda dikkat etmemiz gereken noktalar onrowcommand=”GridView1_RowCommand” burdaki ifadeyi aşşağıdaki kodlarda görebilirsiniz. TemplateField içinde bir adet LinkButon’ umuz bulunuyor. Bunu normal buton imagebuton şeklinde de değiştirebilirsiniz. Buna tıklandığında modalboxumuz açılacak. Burdaki önemli nokta  CommandName=”Detay” ve ommandArgument=’gidecekDeğer’ Aşşağıya indiğimizde modal boxun kendisini görüyoruz. İçinde sitil ve diğer tanımlamalarımız bulunuyor. Bu tanımlamalardan biride yukarda bahsettiğim aptalbuton. Hemen altta ise panel‘ imizi panelimizi görüyoruz. ModalPopup bu paneli bize gösterecek. Belki biraz karışık bir anlatım oldu ama örneği uygulayınca hiçde öyle olmadığını göreceksiniz ve sürekli bu kontrolü kullanmak isteyeceksiniz.

<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<div class="popupKapat"><span>Modal Box Başlık</span></div>

RowCommand’ dan gelen Detay adındaki butonumuzu bulup, iFrameOlustur methodumuzu çalıştırıyoruz. iFrameOlustur methodumuzda popupPanel içine myiframe kontrolünü ekliyoruz. Kodlara bakıldığında herşeyin anlaşıldığını düşünüyorum.

protected void GridView1_RowCommand(object sender, GridViewCommandEventArgs e)
{
if (e.CommandName == "Detay")
{
iFrameOlustur("GosterilecekSayfa.aspx?Id=" + e.CommandArgument, "800", "500");
ModalPopupExtender1.Show();
}
}

protected void iFrameOlustur(string src, string width, string height)
{
HtmlGenericControl myiframe = new HtmlGenericControl("iframe");
myiframe.Attributes.Add("frameborder","0");
myiframe.Attributes.Add("src", src);
myiframe.Attributes.Add("width", width);
myiframe.Attributes.Add("height", height);
popupPanel.Controls.Add(myiframe);
}

Evet arkadaşlar bir yazının daha sonuna geldik. İnşallah işinize yarayan bir yazı olur. Hepinize güzel günler diliyorum.