ASP.NET Ajax UpdateProgress

UpdateProgress ASP.NET Ajax ile hazırladığımız projelerimizde kullanıcı yaptığı işlem sırasında bizim istediğimiz bir mesajın sayfa üzerinde görünmesini sağlamaktadır. UpdateProgress bir nevi progressbar işlemi görmektedir.

Şimdi bu işlemi nasıl yapacağımız görelim.

İlk önce Visual Studio ile bir ASP.NET AJAX-Enabled Web Site oluşturuyoruz ve default.aspx sayfamızı aşağıdaki gibi dizayn ediyoruz.

Butonumuzun Click olayına aşağıdaki kodu yazıyoruz.

protected void Button1_Click1(object sender, EventArgs e)
{
     System.Threading.Thread.Sleep(1000);
     Label1.Text = “Deneme”;
}
Sayfamızın source kısmında UpdatePanel’in aşağıdaki gibi düzenleyelim.

<asp:UpdatePanel ID=”UpdatePanel1″ runat=”server”>
<ContentTemplate>
<asp:Label ID=”Label1″ runat=”server”></asp:Label>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID=”Button1″ EventName=”Click” />
</Triggers>
</asp:UpdatePanel>

Şimdide UpdateProgress’in içini aşağıdaki gibi düzenleyelim.

<asp:UpdateProgress ID=”UpdateProgress1″ runat=”server”>
<ProgressTemplate>

Bu bölüm kullanıcının PostBack işlemi sırasında sayfa üzerinde gösterilecek kısımdır.

</ProgressTemplate>
</asp:UpdateProgress>

Yukarıda görüldüğü gibi <ProgressTemplate></ProgressTemplate> tagları arasına istediğimiz metni veya ASP.NET kontrolünü ekleyip bu kontrollere eventlar atayabiliriz.

<ProgressTemplate>
<img src=”yukleniyor.gif” />Yükleniyor. <br />
<input id=”btniptal” runat=”server” type=”button” value=”Iptal” />
</ProgressTemplate>

Sayfamızı çalıştırdığımız ve butona tıkladığımız zaman ProgressTemplate kısmında yazdığımız kodların işlem sırasında kullanıcıya gösterildiğini göreceğiz. İsterseniz Thread kullanarak mesajın daha uzun süre kullanıcıya gösterilmesini sağlayabilirsiniz.

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.