KATEGORİLER

Visual Studio 2005 de Ajax.NET - Update Panel Kullanımı

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”">

Kontroller ve Içerik

</ContentTemplate>

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.

<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">

<asp:Button ID="btn1" runat="server" Text="Button1" OnClick="btn1_Click1" />

<asp:Label ID="Label2" runat="server" Text="Label1"></asp:Label>

</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.

<h2 align="center">

<a title="Visual Studio 2005 de Ajax.NET - Update Panel Kullanımı" href="/K57-aspnet.html" style="text-decoration: none">
Visual Studio 2005 de Ajax.NET - Update Panel Kullanımı</a></h2>
 

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.

 


<img alt="" src="/guncel-bilgisayar-dersleri/aspnet/35.jpg" width="233" height="189">
 

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. 

 
 


<img alt="" src="/guncel-bilgisayar-dersleri/aspnet/36.jpg" width="201" height="242">
 

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.

 


<img alt="" src="/guncel-bilgisayar-dersleri/aspnet/37.jpg" width="258" height="67">

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


<img alt="" src="/guncel-bilgisayar-dersleri/aspnet/38.jpg" width="280" height="72">
 

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.

Ders Sahibi;
Bilgisayar Dershanesi

Yorumlar

Yorum Yapabilmek İçin Üye Girişi Yapmanız Gerekmektedir.

ETİKETLER

visual studio 2005 de ajax net - update panel kullanımı