Using ASP.NET AJAX UpdateProgress Control

转载 2011年01月12日 00:16:00

转自: http://www.ezzylearning.com/tutorial.aspx?tid=8964873

 

When you perform AJAX bases asynchronous postback using ASP.NET UpdatePanel control it performs its job in the background and the user keep working with the other page elements and controls. This is generally what you want to for better user experience but sometimes you have an asynchronous request that takes little longer and you want to show user some visual indication that the request is being processed and the update is under way. In this tutorial I will show you how you can use UpdateProgress control available in ASP.NET AJAX server side controls gallery to simulate the progress indicators.
 
The UpdateProgress control works in conjunction with the UpdatePanel control and allows you to show a text message or an animated GIF while a time-consuming update is in progress. This control can be added any where on the page and is not need to be added inside UpdatePanel control. When you add the UpdateProgress control to a page, you provide its contents in ProgressTemplate either at design time or in HTML source view. These contents will appear as soon as an asynchronous request is started and disappear as soon as request is finished.

 

The markup below shows you the use of UpdateProgress control in conjunction with UpdatePanel control:

 

<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
      
<br />
      
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
   <ContentTemplate>
      <asp:Button ID="Button1" runat="server" Text="Next Featured Book"
         OnClick="Button1_Click" />
      <br />
      <br />
      <asp:Label ID="Label1" runat="server" Font-Size="14pt">AJAX in Action</asp:Label>
      <br />
      <br />
      <asp:Image ID="Image1" runat="server" ImageUrl="~/images/ajax_in_action.jpg" />              
   </ContentTemplate>
</asp:UpdatePanel>
      
<br />
      
<asp:UpdateProgress ID="UpdateProgress1" runat="server">
   <ProgressTemplate>
      <img alt="" src="images/progress.gif" /> Loading ...
   </ProgressTemplate>
</asp:UpdateProgress>

 

The button click event handler code below is choosing one random book title along with its image from the NameValueCollection and for making sure this request take little longer I have added Thread.Sleep() method with 2 seconds sleep time.

 

protected void Button1_Click(object sender, EventArgs e)
{
   System.Threading.Thread.Sleep(2000);

   NameValueCollection list = new NameValueCollection();
  
   list.Add("AJAX in Action", "images/ajax_in_action.jpg");
   list.Add("AJAX Bible", "images/ajax_bible.jpg");
   list.Add("Understanding AJAX", "images/understanding_ajax.jpg");

   Random r = new Random();
   int index = r.Next(0, 3);

   Label1.Text = list.Keys[index].ToString();
   Image1.ImageUrl = list[index].ToString();
}

 

The UpdateProgress control has DisplayAfter property that takes number of milliseconds and decide how quickly you want ProgressTemplate to appear inside UpdateProgress control. It also has AssociatedUpdatePanelID property to associate the UpdateProgress control with a particular UpdatePanel control on the page. Once it is associated it will only work asynchronous postback of associated UpdatePanel control.

The following markup demonstrates how you use multiple UpdateProgress control with AssociatedUpdatePanelID property set to different UpdatePanel control.

 

<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>

<br />
<table class="style1">
   <tr>
      <td>
         <asp:UpdatePanel ID="UpdatePanel1 " runat="server">
            <ContentTemplate>
               <asp:Button ID="Button1" runat="server" Text="Show Server Time"
                  OnClick="Button1_Click" />
               <asp:Label ID="Label1" runat="server"></asp:Label>
            </ContentTemplate>
         </asp:UpdatePanel>
      </td>
      <td>
         <asp:UpdatePanel ID="UpdatePanel2 " runat="server">
            <ContentTemplate>
               <asp:Button ID="Button2" runat="server" Text="Show Server Time"
                  OnClick="Button2_Click" />              
               <asp:Label ID="Label2" runat="server"></asp:Label>
            </ContentTemplate>
         </asp:UpdatePanel>
      </td>
   </tr>
   <tr>
      <td>
         <asp:UpdateProgress ID="UpdateProgress1" runat="server"
            AssociatedUpdatePanelID="UpdatePanel1"
>
            <ProgressTemplate>
               <img alt="" src="images/progress.gif" /> Updating ...
            </ProgressTemplate>
         </asp:UpdateProgress>
      </td>
      <td>
         <asp:UpdateProgress ID="UpdateProgress2" runat="server"
            AssociatedUpdatePanelID="UpdatePanel2"
>
            <ProgressTemplate>
               <img alt="" src="images/progress.gif" /> Updating ...
            </ProgressTemplate>
         </asp:UpdateProgress>
      </td>
   </tr>
</table>


The code behind file with Button Click events is as follows:

 

protected void Button1_Click(object sender, EventArgs e)
{
   System.Threading.Thread.Sleep(2000);
   Label1.Text = DateTime.Now.ToString("hh:mm:ss tt");
}

protected void Button2_Click(object sender, EventArgs e)
{
   System.Threading.Thread.Sleep(2000);
   Label2.Text = DateTime.Now.ToString("hh:mm:ss tt");
}

 

Following figure shows the output of the above markup.

 


相关文章推荐

ASP.NET AJAX就5个控件,分别是ScriptManager、ScriptManagerProxy、UpdatePanel、UpdateProgress和Timer

1、ScriptManager 和ScriptManagerProxy     ·一个页只能有一个ScriptManager(包含了所有脚本资源),要放到任何用到AJAX的控件的前面。     ·...

系统学习asp.net Ajax中GridView、UpdatePanel、UpdateProgress、Timer使用

一、简单地过一下每个控件 1.最简单的示例 2.UpdatePanel 3.UpdateProcess 3.Timer 二、客户端脚本编程 命名空间、类、成员、接口、继承、枚举 三、实践开发...

ASP.NET AJAX入门系列(7):使用客户端脚本对UpdateProgress编程

在本篇文章中,我们将通过编写JavaScript来使用客户端行为扩展UpdateProgress控件,客户端代码将使用ASP.NET AJAX Library中的PageRequestManager,...

ASP.NET AJAX入门系列(6):UpdateProgress控件简单介绍

在ASP.NET AJAX Beta2中,UpdateProgress控件已经从“增值”CTP中移到了ASP.NET AJAX核心中。以下两篇关于UpdateProgress的文章基本翻译自ASP.N...

AJAX——ASP.NET AJAX(三)ScriptManagerProxy,Timer和UpdateProgress

上两篇博客简单学习了ScriptManager和UpdatePanel两个异步刷新的核心控件,这篇博客继续学习ASP.NET AJAX框架中的其它三个控件。           一,首先看Scr...

ASP.NET AJAX Control Toolkit 控件速查

====================================================== 注:本文源代码点此下载 =============================...

使用ASP.NET AJAX Control Toolkit中的NoBot控件拒绝垃圾发布程序

10.1 NoBot:拒绝机器人程序 NoBot 控件可以为页面中的表单提供类似CAPTCHA[注释1]而却无需任何用户操作的验证,以阻止机器人程序自动提交垃圾信息。   10.1.1 ...

Asp.net 用UpdateProgress加载数据显示进度条

背景:在做asp.net项目时,遇到页面打开加载数据的时候,如果数据加载过慢,就会导致页面出现空白,在网上也查找了一些资料,都是用的js模拟的,查找了一阵子,未果。 所以自己思考了下,自己写了个。 ...

Asp.net Ajax Control Toolkit设计编程备忘录(色眼窥观版)——第3回(UE专辑)

====================================================== 注:本文源代码点此下载 =============================...

Asp.net生成缩略图和UpdateProgress

前台Code: 原始图: ...
  • xb12369
  • xb12369
  • 2012年07月16日 17:43
  • 706
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Using ASP.NET AJAX UpdateProgress Control
举报原因:
原因补充:

(最多只允许输入30个字)