GridView ve Modal Popup Extender ile birlikte çalışma

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.

  • esra

    Mehaba elinize sağlık ama ben bunu nasıl sayfama akliyeceğim anlamadım çünkü hiç bilgim yok
    bu kolar nasıl ve hangi sayfaya eklenecek açıklama yazasanız sevinirim teşkkürler

  • http://dss Gizli

    Gerçekten faydalı olmak istiyosanız kodların hepisini yazarsanız daha güzel olurdu.

  • http://a apoStyLEE

    Merhabalar, uzun zaman geçtiği için ilgili konunun kodları hali hazırda bulunmuyor. Anlamadığınız noktaları söylerseniz yardımcı olmaya çalışırım. İlginize teşekkürler.

  • yns.emre

    gizli nickli arkadaş amacın ne anlayamadım,faydalı olmak için uğraşmış yazmış arkadaş,bu mesajı yazana kadar işin içinden çıkamadığın durumu yazsaydın da yardımcı olsaydı yazan arkadaş bu konu hakkında

  • http://marketsatisprogrami.com/ HasanG

    Sayfa kodlarında bir sıkıntı var. Düzgün görüntüleyemiyorum bu yazıyı.