24 Ağustos 2017 Perşembe

UpdatePanel Kullanımı

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. Bu kontrol sayesinde  bir sayfa PostBack işlemine tabi tutulmadan güncellenebilir.


<asp:UpdatePanel ID="updatePanel1" runat="server">
   <ContentTemplate>
         <!-- PostBack olması istenen itemler -->
   </ContentTemplate>
   <Triggers>
         <!-- Olaylar/ buton -->
   </Triggers>
</asp:UpdatePanel>

Tetikleyici buton contenttample içerisinde ise triggers tagının kullanılmasına gerek yoktur. Ayrıca dropdown gibi aoutopostback özellliği olan itemlerde tetikleyici için bir butona ihtiyaç yoktur.

PostBackTrigger ve AsyncPostBackTrigger

Postbacktrigger; sayfanın tamamında postback işlemi gerçekleştirmesi istenirse kullanılır.

AsyncPostBackTrigger; sayfanın tamamının değil sadece o update panelin içinin postback işleminin gerçekleşmesini sağlar.


Bir sayfada birden çok update panel kullanılmak istenirse; İç 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(default olduğundan tanımlanmasına gerek yok.) olarak tanımlanmalıdır. 


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

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

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


Paylaş:

0 yorum:

Yorum Gönder