Son zamanlarda internette sıkça "yükleniyor..." şeklinde mesajlar veya sayfanın yüklendiğini gösteren hareket eden görsel resimler görmeye başladık. Web sitesini görsel açıdan zenginleştiren, aynı zamanda da kullanıcı beklerken sıkılmasını önleyen bu tip uygulamaları siz de UpdateProgress kullanarak yapabilirsiniz.
UpdateProgress kontrolü UpdatePanel ile birlikte kullanılan bir kontroldür. Öncelikte sayfanıza bir ScriptManager eklemelisiniz. (Mümkünse sayfanın en üstüne ekleyiniz. Aksi taktirde hata mesajı verebiliyor.) Bir UpdatePanel, UpdateProgress ve bir buton ekliyoruz.
UpdateProgressKontrolKullan.aspx
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Button ID="ButtonUpdateProgress" runat="server" OnClick="ButtonUpdateProgress_Click"
Text="Yükle" />
<br />
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="UpdatePanel1">
<ProgressTemplate>
<asp:Image ID="Image1" runat="server" ImageUrl="~/Resimler/ajax-loader.gif" />
</ProgressTemplate>
</asp:UpdateProgress>
<br />
<asp:Label ID="Label1" runat="server" Text="Yükleniyor..."></asp:Label>
<br />
<asp:UpdatePanel ID="UpdatePanel2" runat="server">
<ContentTemplate>
<asp:Button ID="ButtonGonder" runat="server" OnClick="ButtonGonder_Click" Text="Gönder" />
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdateProgress ID="UpdateProgress2" runat="server" AssociatedUpdatePanelID="UpdatePanel2"
DisplayAfter="2000" DynamicLayout="False">
</asp:UpdateProgress>
UpdateProgressKontrolKullan.aspx.cs
protected void Page_Load(object sender, EventArgs e)
{
UpdateProgress2.Controls.Add(Label1);
}
protected void ButtonGonder_Click(object sender, EventArgs e)
{
System.Threading.Thread.Sleep(5000);
protected void Page_Load(object sender, EventArgs e)
{
UpdateProgress2.Controls.Add(Label1);
/* Programatik olarak UpdateProgress kontrolüne değer atıyorum.
UpdateProgress2 kontrolünün içerisine yerleştirerek de yapabilirsiniz.
Bu işlemin aynısını tasarım aş
amasındayken de yapabilirsiniz. */
}
protected void ButtonGonder_Click(object sender, EventArgs e)
{
System.Threading.Thread.Sleep(5000);
/* Butona tıkladığımda UpdateProgress kontrolünün içeriğinin gözükmesi i
çin bir ifade yazıyorum. 5000 ms = 1 s süresince UpdateProgress kontrolüm
gözükecek */
}
Şimdi gelelim UpdateProgress kontrolünün özelliklerine:
}
Yukarıdaki kodlarımıza şöyle bir göz atalım. Butonumuza tıkladığımızda 5000 ms yani 5 saniye boyunca ajax-loader.gif simgemiz gözükecek, ardından da kaybolacak. Normalde System.Threading.Thread.Sleep(5000); gibi bir ifade yazmamıza gerek yok. UpdatePanel güncelleme yaptığında zaten UpdateProgress kontrolü çalışacak ve ilgili resim gösterilecektir. Biz burada uygulamamızın sonuçlarını hemen görebilmek için böyle bir yola başvurduk. Bu arada resim yerine "Yükleniyor..." şeklinde bir yazı da koyabilmeniz mümkün.
- AssociatedUpdatePanelID - Eğer sayfanızda birden fazla UpdateProgress veya UpdatePanel kullanıyorsanız bu özellik işinize yarayabilir. Buradan hangi UpdatePanel güncelleme yaptığında UpdateProgress'in gösterilmesi istiyorsanız ilgili UpdatePanel'in ID değerini yazıyorsunuz. Eğer herhangi bir değer yazmazsanız sayfanızdaki herhangi bir UpdatePanel güncelleme yaptığında gözükecektir.
- DiplayAfter - Bu özellik milisaniye cinsinden sayısal değer alıyor. Varsayılan değeri 500(yani 0,5 saniye) Belirlenen süre sonra UpdateProgress gösterilmeye başlıyor. Kısa sürecek işlemlerde UpdateProgress'in gösterilmesini istemiyorsanız kullanabilirsiniz.