ASP.NET AJAX UpdatePanel Kullanımı

ASP.NET Ajax UpdatePanel hazırladığımız web sayfalarında bölümler oluşturup bu bölümlerin asenkron bir şekilde güncellenebilmesini sağlamaktadır. UpdatePanel içerisindeki olaylar PostBack işlemi olmadan çalışıp, güncellenebilirler. Böylece sayfaların daha hızlı çalışması ve sunucu – istemci arasındaki veri trafiğinin azaltılması sağlanır.

  UpdatePanel’i web sayfamızda kullanabilmemiz için Microsoft ASP.NET AJAX’ın kurulu olması gerekmektedir.

  UpdatePanel kontrolü iki kısımdan oluşmaktadır.

<ContentTemplate></ContentTemplate>
<Triggers></Triggers>

ContentTemplate : UpdatePanel içinde bulunan kontrollerin tanımlandığı kısımdır.
Triggers : UpdatePanel’in hangi kontroller tarafından nasıl tetikleneceğinin tanımlandığı kısımdır. Tetikleyici kısmında iki durum kontrol edilir. Tetikleyici kontrolün UpdatePanel içinde olması yada olmaması.

UpdatePanel tanımlaması kısımları ile aşağıdaki gibidir :

<asp:UpdatePanel ID=”UpdatePanel1″ runat=”server”> 
      <ContentTemplate>
         <!– Ýçerik –>
     </ContentTemplate>
     <Triggers>
         <!– Tetikleyici Bilgileri –>
     </Triggers>
</asp:UpdatePanel>

Şimdi UpdatePanel’i nasıl kullanacağımızı görelim :

İlk önce File -> New -> Web Site menüsünden ASP.NET AJAX Enabled Web Site seçeneğiniz seçerek yeni bir web projesi yaratalım.

ASP.NET Ajax uygulamalarının çalışabilmesi için ScriptManager kontrolünün sayfamıza eklenmiş olması gerekmektedir. Bunun Default.aspx sayfamıza ScriptManager kontrolünü ekleriz.

Şimdi UpdatePanel kontrolünü sayfamıza ekleyebiliriz.
 

Source kısmından UpdatePanel içeriğimizi aşağıdaki gibi değiştirelim.

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

Sayfamızı Page_Load kısmana ise aşağıdaki kodu ekleyelim.
Label1.Text = DateTime.Now.ToLongTimeString();

Sayfamızı çalıştırdıktan ve butona tıkladıktan sonra göreceğiz ki label1 kontrolünde saat PostBack işlemi olmadan asenkron bir şekilde güncellenmektedir.

Eğer tetikleyici olarak kullanacağımız kontrol UpdatePanel içerisinde ise güncelleme işlemi hiçbir tetikleyici bilgisi girmeden çalışmaktadır bunu neden UpdatePanel’de bulunan ChildrensAsTrigger özelliğinin True olmasıdır. Biz bu değeri False yaparsak UpdatePanel içinde bulunan kontroller paneli güncellemeyecektir.

Peki eğer tetikleyici kontrol panelin dışında ise ?

Bu seferde UpdatePanel’de bulunan <Triggers></Triggers> kısmına aşağıdaki kodu eklememiz yeterli olacaktır.

<Triggers> 
    <asp:AsyncPostBackTrigger ControlID=”btnDisari” EventName=”Click” />
</Triggers>

Bu işlemi görsel olarak yapabilmek için UpdatePanel’in özelliklerinden Triggers seçeneği seçilir.

Açılan pencerede AsyncPostBackTrigger Panelin PostBack işlemine girmeden güncelleneceğini gösterir. Eğer bu panelin PostBack işlemine girerek güncellenmesini istersek PostBackTrigger seçeneği seçilir. ControlID Tetikleyici kontrol Event Name ise tetikleyici kontrolün hangi durumda UpdatePanel’i güncelleyeceğidir.