Visual Studio 2005 de Ajax.NET – Update Panel Kullanimi

Merhabalar.

2. makalemiz ile yazi dizimize devam ediyoruz. Bu makalemizin konusu ajax extensions kontrollerinden birisi olan “UpdatePanel”.

UpdatePanel, sayfamizda olusturdugumuz bazi bölümlerin asenkron olarak güncellenmesini saglar. Sayfanin tamami postback olmaz, sadece gerekli veriler server’a gider ve gelir. Bu sayede istemci-sunucu arasindaki veri trafigi azalmis olur.

.

UpdatePanel asagidaki yapidadir.

<asp:UpdatePanel ID=””UpdatePanel1″” runat=””server””>

    <ContentTemplate>

        Kontroller ve Içerik

    </ContentTemplate>

    <Triggers>

        Tetikleyici Bilgileri

    </Triggers>

</asp:UpdatePanel>

Görüldügü gibi iki kisimdan olusmaktadir. ContentTemplate ve Triggers.

ContentTemplate:  Updatepanel içerisine koyacagimiz kontrolleri barindiran kisimdir.

Triggers: UpdatePanel’i tetikleyecek kontroller updatePanel disinda ise, bu kontroller updatepanel’e baglamamiz ve bu kontrol üzerinde su olay gerçeklestiginde updataPanel’i güncelle dememiz gerekli. Triggers iste bu amaç ile kullanilir. Eger tetikleyecek kontrol updatepanel içerisinde ise Triggers’da belirtmeye gerek yoktur.

UpdatePanel’in property’leri ise sunlardir:

ChildrenAsTriggers :  Tetikleyici olmasini istedigimiz kontroller updatepanel içerisinde ise Trigger kisminda belirtmemize gerek yok demistik. Bunu saglayan özellik ChildrenAsTriggers özelligidir. True oldugu zaman tekrar bir tanimlama yapmamiza gerek kalmaz. Fakat false yaparsak kontrolleri triggers kisminda belirtmeliyiz.

UpdateMode :  UpdatePanel’in güncelleme islemini hangi durumlarda yapmasi gerektigini belirten özelligidir.Iki degeri vardir “Always” ve “Conditional”. BU deger Conditional ise sadece kendi tetikleyicileri ile update olur. Always olmasi durumunda herhangi baska çalisan bir metot ile de güncellenebilir. Örnek projemizde bu özellik üzerinde özellikle duracagiz.

Örnek bir proje ile UpdatePanel’in nasil kullanildigini inceleyelim.

Yeni bir “Ajax-Enabled Web Site” açalim ve default.aspx’e bir adet UpdatePanel Koyalim.

UpdatePanel içerisine 1 adet Label, sayfamiza ise bir tane button koyalim.

 

Button1’in click event’ina asagidaki kodu yazalim ve projemizi çalistiralim.

protected void btn1_Click1(object sender, EventArgs e)

{

    Label1.Text = “Update Panel Güncellendi.”;

}

Button1’e tikladigimiz zaman Label1’in degeri degisti fakat sayfamizda postback oldu. UpdatePanel’in postback olmadan güncellenmesi için, butonumuz eger updatepanel içerisinde degil ise Triggers’da bunu belirtmemiz gerekli demistik. Simdi butonumuzu updatepanel ile iliskilendirelim. Bunun için updatePanel’in triggers bölümündeki asagidaki kodu yazalim.

<Triggers>

   <asp:AsyncPostBackTrigger ControlID=”btn1″ EventName=”Click” />

</Triggers>

ControlID ile hangi kontrolün paneli tetikleyecegini, EventName ile de buton üzerinde hangi olay gerçeklestiginde tetikleyecegini belirttik.

Projemizi tekrar çalistirip test ediyoruz. Görüldügü gibi sayfa postback olmadan updatepanel güncellendi.

Simdi butonumuzu UpdatePanel içerisine alalim ve Triggers’i silelim.

<asp:UpdatePanel ID=”UpdatePanel1″ runat=”server” UpdateMode=”Always”>

    <ContentTemplate>

        <asp:Button ID=”btn1″ runat=”server” Text=”Button1″ OnClick=”btn1_Click1″ /><br />

        <asp:Label ID=”Label2″ runat=”server” Text=”Label1″></asp:Label>&nbsp;

    </ContentTemplate>

</asp:UpdatePanel>

.

Projemizi tekrar çalistirip test ediyoruz. Görüldügü gibi sayfa postback olmadan updatePanel güncellendi. UpdatePanel’in “ChildrenAsTriggers” özelligini false yaparsak butonumuz contentTemplate içerisinde olsa bile sayfamiz postback olur. Eger bu özelligi false yapmak istiyorsak butonumuzu yine Triggers bölümünde updatePanel ile iliskilendirmemiz gerekli. Fakat bu çok gerekli bir durum degil. ChildrenAsTriggers özelligi default olarak true geliyor zaten. Isterseniz birazda updatePanel’in updateMode özelligi üzerinde duralim;

Sayfamiz üzerinde birden fazla updatePanel kullanilabilir. Örnegimizde biz de yeni bir updatePanel daha koyalim ve çalisma sekillerini, birbirlerini nasil etkilediklerini örnek üzerinde görelim. 

 

UpdatePanellerimizden birincisinin updateMode’unu “Always” digerininkini ise “Conditional” yapiyoruz.

Birinci updatepanel içerisindeki butonun click’ine asagidaki kodu yaziyoruz.

protected void btn1_Click1(object sender, EventArgs e)

{

    Label1.Text = DateTime.Now.ToString();

    lbl2.Text = DateTime.Now.ToString();

}

Ikincidekine de asagidaki kodu.

protected void btn1_Click(object sender, EventArgs e)

{

    lbl2.Text = DateTime.Now.ToString();

    Label1.Text = DateTime.Now.ToString();

}

Projemizi çalistiriyoruz. UpdatePanel1 butonuna basiyoruz. Görüldügü gibi sadece updatepanel1 güncellendi. UpdatePanel2 butonuna bastigimiz zaman ise her iki panelin de güncellendigini görebiliriz.

Asagidaki resimde görüldügü gibi sadece birinci updatepanel güncellendi.

 

UpdatePanel2 butonuna basildigi zaman ise her iki butonun da güncellendigini görebiliriz.

.

Bu örnekten de anlasilabilecegi gibi updateMode özelligimiz eger “Conditional” olursa panelimizi sadece kendi tetikleyicileri güncelleyebilir. Always olmasi durumunda ise herhangi bir metod içerisinden panel güncellenmis olur.

UpdatePanel’ler bazi durumlarda iç içe de kullanilabilir. Örnegin UpdatePanel olarak ayirdiginiz bir bölgede çok fazla kontrol var ise, bu bölgede updatepaneller ile ayrilabilir. Fakat updateMode özellikleri iyi ayarlanmalidir.

Böylelikle bir makalemizin daha sonuna gelmis bulunuyoruz. Bir sonraki makalede görüsmek dilegi ile herkese iyi çalismalar, güzel çalisma ortamlari diliyorum.