Makale Özeti

Bu makalede, ASP.NET AJAX uygulamalarında kullanılan UpdatePanel kontrolünü derinlemesine inceleyip, farklı senaryolarda bu kontrolü etkili şekilde nasıl kullanabileceğimizi ele alacağız.

Makale

UpdatePanel kontrolü, ASP.NET AJAX uygulamalarında, bir web sayfası içerisinde kısımlar oluşturulmasını ve bu kısımların asenkron şekilde güncellenmesini sağlayan kontroldür. ASP.NET AJAX uygulamalarında, bir sayfa PostBack işlemine tabi tutulmadan, sadece UpdatePanel içerisi güncellenebilir. Bu şekilde web sayfaları daha hızlı çalışır hale geldiği gibi, sunucu ile istemci arasındaki veri trafiği de önemli derecede azalır.

UpdatePanel kontrolü, sayfa içerisinde bir alan oluşturarak, (HTML kısmında <div> veya <span> etiketi ile oluşan bir alan) içerisine eklenen kontrollerin görüntülenmesini ve asenkron bir şekilde bu kontrollerin içeriklerinin güncellenmesini sağlar. <ContentTemplate></ContentTemplate> ve <Triggers></Triggers> kısımları olmak üzere iki kısımdan oluşmaktadır. <ContentTemplate> kısmında, UpdatePanel içerisinde yer alacak içerikler bulunur.(ASP.NET kontrolleri, HTML kontrolleri, resim dosyaları, metinler vb.) Sadece bu kısımda yer alan bileşenler, kısmi güncelleme işleminden etkilenir. <Triggers> kısmında ise UpdatePanel'in çalışmasını; yani güncelleme işleminin gerçekleşmesini sağlayacak olayların bağlanması işlemi gerçekleştirilir. (Bir Button kontrolünün Click olayı veya DropDownList kontrolünün SelectedIndexChanged olayı gibi durumların panele bağlanması) ContentTemplate ve Triggers kısımları UpdatePanel içerisinde şu şekilde kullanılmaktadır.

<asp:UpdatePanel ID="updatePanel1" runat="server">
   <ContentTemplate>
         <!-- Buraya gerekli içerikler eklenecek -->
   </ContentTemplate>

   <Triggers>
         <!-- Bu kısımda UpdatePanel'e olaylar bağlanır -->
   </Triggers>

</asp:UpdatePanel>

UpdatePanel’in ContentTemplate’i içerisine bileşenleri eklemek, kısmi güncelleme işleminin yapılması için yeterli olmayacaktır. UpdatePanel içerisindeki kısmın güncellenmesi için, sayfada bulunan herhangi bir kontrol üzerinde gerçekleşecek bir olayın paneli tetiklemesi gerekecektir. Örneğin, bir butonun tıklanması; yani Button kontrolünün Click olayının gerçekleşmesi UpdatePanel’in güncellenmesini sağlayabilir. UpdatePanel, kendisini güncelleyecek olaya bağlanır ve böylece olay gerçekleştiğinde UpdatePanel içerisi asenkron bir şekilde güncellenebilir. Burada UpdatePanel’in içerisini güncelleyecek kontrolün bulunacağı konuma göre iki farklı durum sözkonusu olacaktır; kontrolün UpdatePanel içerisinde veya dışarısında olması. Gelin bu iki durumda UpdatePanel'in nasıl çalıştığını ele alalım. Öncelikle File > New > Web Site menüsünden ASP.NET AJAX Enabled Web Site seçeneğini seçerek açtığımız yeni projenin Default.aspx sayfasına bir UpdatePanel kontrolü ekleyelim.

Durum-1: Kontrol UpdatePanel içerisinde ise:
UpdatePanel’i güncelleyecek kontrol UpdatePanel’in içerisinde yer alıyorsa, bu kontrolün varsayılan olayının gerçekleşmesi UpdatePanel’i otomatik olarak tetikleyecektir. Yani biz herhangi bir ayarlama veya atama yapmasak dahi, UpdatePanel içerisinde yer alan Button gibi bir kontrole tıklandığında panelin içerisindeki veriler güncellenecektir. Default.aspx ve Default.aspx.cs dosyalarında aşağı değişiklikleri yapıp, uygulamayı çalıştıralım.

Default.aspx
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
   <ContentTemplate>
      <asp:Label ID="Label1" runat="server" Text=""></asp:Label> <br />
      <asp:Button ID="Button1" runat="server" Text="Button" />
   </ContentTemplate>

</asp:UpdatePanel>
Default.aspx.cs
protected void Page_Load(object sender, EventArgs e)
{
   Label1.Text = DateTime.Now.ToLongTimeString();
}


UpdatePanel içerisindeki kontrolün paneli tetiklemesi

Açılan sayfada butona tıklandığında Label1 üzerindeki tarih bilgisinin asenkron bir şekilde güncellendiğini görebiliriz. Burada dikkat edeceğiniz gibi panele herhangi bir trigger bağlama işlemi yapmamamıza rağmen güncelleme işlemi otomatik olarak yapıldı. UpdatePanel’in içerisine eklenen kontrolün otomatik olarak paneli güncellemesini sağlayan UpdatePanel kontrolünün ChildrensAsTrigger isimli özelliğidir. ChildrensAsTrigger özelliği varsayılan olarak True değeri taşıdığı için UpdatePanel içerisine eklenen bir kontrolün olayı, biz belirtmesek bile panele trigger olarak eklenecektir. Eğer ChildrensAsTrigger özelliği False olarak değiştirilirse, panel içerisine eklenen bir kontrol otomatik olarak paneli güncellemez.

Durum-2: Kontrol UpdatePanel’in dışında ise:
Güncelleme işlemini yapacak kontrol bazı durumlarda tasarım gereği UpdatePanel’in dışarısında da bulunabilir. Böyle bir durumda bu kontrolün paneli otomatik olarak güncelleyebilmesi mümkün olmayacaktır. Kontrol ancak trigger olarak panele bağlanırsa, kontrol üzerinde gerçekleşecek olay panelin içerisini güncelleyecektir. Bu durumda kontrolü UpdatePanel içerisinde bulunan <Triggers> kısmına AsyncPostBackTrigger trigger olarak eklemek gerekecektir. Örneğin UpdatePanel dışında kalan btnDisari isimli bir butonu panele trigger olarak bağlamak için aşağıdaki ifadeleri UpdatePanel’e eklemek gerekecektir.

Default.aspx
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
   <ContentTemplate>
      <table style="background-color:#DDDDDD; width:200px">
         <tr>
            <td>
                  <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label> <br />
                  <asp:Button ID="Button1" runat="server" Text="Button" />
            </td>
         </tr>
      </table>
   </ContentTemplate>
   <Triggers>
         <asp:AsyncPostBackTrigger ControlID="btnDisari" EventName="Click" />
   </Triggers>

</asp:UpdatePanel>
<br /><br />
<asp:Button ID="btnDisari" runat="server" Text="Panel dışından güncelle" />


UpdatePanel dışındaki bir kontrolün paneli tetiklemesi

Bu işlem HTML kodları içerisinden gerçekleştirilebileceği gibi, sayfanın Design kısmında iken UpdatePanel seçilip Properties penceresinden Triggers özelliğine tıklanırsa, açılan pencereden de istenilen kontrol ve kontrolün olayını seçmek trigger eklemek için yeterli olacaktır.


UpdatePanel'e AsyncPostBackTrigger eklenmesi 

AsyncPostBackTrigger, panele asenkron postback işlemi yapması istenilen kontrolün eklenmesi için kullanılacak seçenektir. ControlID, paneli tetikleyecek kontrolün adı, EventName ise bu kontrol üzerinde gerçekleşecek olaydır. Bu şekilde UpdatePanel dışındaki bir kontrolün paneli asenkron bir şekilde güncellemesi sağlanabilir. Eğer tasarım gereği UpdatePanel içerisinde bulunan bir kontrolün panelin içerisinde değilde, sayfanın tamamında postback işlemi gerçekleştirmesi istenirse, bu kontrolün panele PostBackTrigger olarak eklenmesi gerekecektir.

Bir Sayfada Birden Fazla UpdatePanel Kullanımı

Bir sayfa içerisinde bir tane UpdatePanel kullanılabileceği gibi birden fazla UpdatePanel de kullanılabilir. Böyle bir durumda da karşımıza bazı karışıklıklar çıkabilecektir. Gelin şimdi de bir sayfa içerisinde birden fazla UpdatePanel bulunduğunda panellerin ne şekilde çalışacağını, birbirlerinin güncellemelerinden nasıl etkileneceklerini ele alalım. Bu işlem için öncelikli olarak sayfamıza UpdatePanel2 adında ikinci bir panel ekleyelim. Bu panelin ContentTemplate’i içerisine de aşağıda görüldüğü şekilde Label2 adında bir Label kontrolü ve Button2 adında bir Button kontrolü ekleyelim.

Default.aspx
<asp:UpdatePanel ID="UpdatePanel2" runat="server">
   <ContentTemplate>
      <table style="background-color:#B5DDDD; width:200px">
         <tr><td>
            <asp:Label ID="Label2" runat="server"></asp:Label> <br />
            <asp:Button ID="Button2" runat="server" Text="Button-2" />
         </td></tr>
      </table>
   </ContentTemplate>
</asp:UpdatePanel>

Label2 kontrolünün de asenkron şekilde güncellenmesi için Default.aspx.cs dosyasındaki Page_Load kısmını şu şekilde değiştirelim:

Default.aspx.cs
protected void Page_Load(object sender, EventArgs e)
{
   Label1.Text = DateTime.Now.ToLongTimeString();
   Label2.Text = DateTime.Now.ToLongTimeString();
}

Artık UpdatePanel2 kontrolü içerisindeki Button2’ye tıklandığında Label2 üzerine güncel zaman bilgisinin asenkron bir şekilde güncellenerek gelmesini bekliyoruz. Uygulamayı çalışıtırıp değişiklikleri gözlemleyelim. Burada istenilenin dışında bir durum gözünüze çarpacaktır. Herhangi bir paneldeki butona tıklanılması durumunda her iki panelin de güncelleneceğini göreceksiniz.


Bir sayfada birden fazla UpdatePanel kullanımı

Bu işleyiş aslında normal şartlarda pekte istenilen bir durum olmayacaktır. Zira birbirinden ayrılmış iki farklı panelin sadece kendi triggerları tarafından tetiklenmesi istenilebilir. Fakat burada ise UpdatePanel1 içerisindeki bir kontrol tetiklendiğinde UpdatePanel2 içerisi de güncellenmektedir. UpdatePanel'lerin bu şekilde çalışmalarını sağlayan UpdateMode özellikleridir. Sayfamıza eklediğimiz bir UpdatePanel'in UpdateMode özelliği varsayılan olarak Always değerini taşımaktadır. UpdateMode özelliğinin Always olması durumunda sayfa içerisindeki herhangi bir UpdatePanel'in tetiklenmesi panelinde tetiklenmesini sağlayacaktır. Eğer UpdateMode özelliği Conditional değerini alırsa, panel sadece kendi triggerları aracılığıyla tetiklenecektir. Bu noktada UpdatePanel1'in UpdateMode özelliğini Conditional yapacak olursanız, sayfayı çalıştırdığınızda UpdatePanel1'in sadece kendi triggerları tarafından tetiklenebileceğini göreceksiniz. Fakat UpdatePanel2'nin UpdateMode özelliği hala Always olduğu için UpdatePanel1'deki bir güncelleme, UpdatePanel2'yi de tetikleyecektir.

Aşağıdaki tabloda iki UpdatePanel'in UpdateMode özelliklerine göre ne şekilde tetiklenecekleri listelenmiştir.

UpdatePanel1'in UpdateMode özelliği UpdatePanel2'in UpdateMode özelliği UpdatePanel1 triggerı tetiklenirse UpdatePanel2 triggerı tetiklenirse
Always Always Her iki panelde güncellenir. Her iki panelde güncellenir.
Conditional Always Her iki panelde güncellenir. UpdatePanel2 güncellenir, UpdatePanel1 güncellenmez.
Always Conditional UpdatePanel1 güncellenir, UpdatePanel2 güncellenmez. Her iki panelde güncellenir.
Conditional Conditional UpdatePanel1 güncellenir, UpdatePanel2 güncellenmez. UpdatePanel2 güncellenir, UpdatePanel1 güncellenmez.

İç İçe UpdatePanel Kullanımı

ASP.NET AJAX ile hazırlanan bir sayfa içerisinde iç içe UpdatePanel'ler de kullanılabilmektedir. Hazırlanan web sayfası içerisinde UpdatePanel sayfanın büyük bir kısmını kaplıyor ve içerisinde çok sayıda kontrol bulunduruyorsa, içerisindeki tüm kontrollerin beraber güncellenmesinin dışında bazı kontrol gruplarının da ayrı olarak güncellenmesi istenilebilir. Böyle bir durumda, ana UpdatePanel'in ContentTemplate kısmında yerleştirilecek ikinci bir UpdatePanel, dıştaki UpdatePanel ile uyumlu bir şekilde çalışabilecektir. Aşağıdaki örnekte sayfaya eklenen bir UpdatePanel içerisine ikinci bir UpdatePanel eklenmiştir. Burada iç kısımdaki UpdatePanel'in dıştaki panelden ayrı olarak çalışabilmesi için dıştaki UpdatePanel'in (UpdatePanel3) UpdateMode özelliği Conditional, içteki UpdatePanel'in (UpdatePanel4) UpdateMode özelliği ise Always olarak tanımlanmalıdır.

Default.aspx
<asp:UpdatePanel ID="UpdatePanel3" runat="server" UpdateMode="Conditional">
   <ContentTemplate>
      <table style="width: 300px; background-color: #9999ff">
         <tr><td>
            <asp:Label ID="lblDisKisim" runat="server"></asp:Label><br />
            <asp:Button ID="Button3" runat="server" Text="Ana Panel" /><br />
            <br />

            <asp:UpdatePanel ID="UpdatePanel4" runat="server">
            <ContentTemplate>
               <table style="width: 200px; background-color: #99ccff">
                  <tr><td>
                     <br />
                     <asp:Label ID="lblIcKisim" runat="server"></asp:Label><br />
                     <asp:Button ID="Button4" runat="server" Text="İç Panel" />
                  </td></tr>
               </table>
            </ContentTemplate>
         </asp:UpdatePanel>

      </td></tr> </table>
   </ContentTemplate>
</asp:UpdatePanel>

Default.aspx.cs
protected void Page_Load(object sender, EventArgs e)
{
   Label1.Text = DateTime.Now.ToLongTimeString();
   Label2.Text = DateTime.Now.ToLongTimeString();

   lblDisKisim.Text = DateTime.Now.ToLongTimeString();
   lblIcKisim.Text = DateTime.Now.ToLongTimeString();

}


Bir UpdatePanel içerisinde başka bir UpdatePanel kullanılabilir.

Ana panelde bulunan butona tıklanması durumunda panelin tamamı (iç panel de dahil) güncellenecektir. İç panelde bulunan butona tıklandığında ise sadece iç panel güncellenecektir. Bazı durumlarda, özellikle sayfanın tasarımı gereği bir UpdatePanel içerisinde başka bir UpdatePanel kullanılması durumu ile karşılaşabiliriz.

Bu makalede UpdatePanel kontrolünün önemli özelliklerini, kullanımını ve çeşitli senaryolarda nasıl etkili bir biçimde kullanabileceğimizi ele aldık. Bir başka makalede görüşmek üzere...

Uğur UMUTLUOĞLU
www.nedirtv.com