关闭

Using ASP.NET AJAX UpdateProgress Control

标签: asp.netajaxasynchronousbuttonserverasp
1307人阅读 评论(0) 收藏 举报
分类:

转自: 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.

 


0
0
查看评论

UpdateProgress控件

9.4 UpdateProgress控件 在现实的网络中,当我们打开某一个网站或链接时,由于种种原因经常要等待页面显示出来,这样的用户体验真的很差。如果能在页面执行较长时间操作的同时,给用户提供一个类似于浏览器状态栏那样的进度条,将会很大地改善用户体验。所以微软在ASP.NET Ajax中为我们提...
  • GoodShot
  • GoodShot
  • 2012-12-16 17:03
  • 5684

Ajax控件UpdateProgress的使用心得

             最近做网站用到了UpProgress控件,所以把遇到的问题和自己的看法写下来,供以后参考,也希望给大家代码帮助。UpProgress是和UpdatePan...
  • shengyongwang
  • shengyongwang
  • 2009-11-30 20:09
  • 4421

updateprogress 实现层遮罩效果

转自:http://www.cnblogs.com/losingrose/articles/952490.html 遮罩层与基础ajax控件已经封装在一个用户控件,使用方便。使用的页面的代码如下:  Untitled Page
  • wang4978
  • wang4978
  • 2009-09-28 11:15
  • 2069

UpdateProgress无效,无法显示,没有效果,js给你答案

当按钮botton位于updatepannel的外面的时候,会导致UpdateProgress起不到作用! ...
  • xb12369
  • xb12369
  • 2012-11-01 15:18
  • 2578

ASP.NET AJAX常用控件

前言 ASP.NET AJAX技术架构主要分为客户端脚本库和服务端组件两大部分,它是AJAX技术的一种,以AJAX的技术框架为依托,在Web浏览器和服务器之间建立通信的桥梁。ASP.NET AJAX技术常用控件有ScriptManager控件。UpdatePanel控件、UpdateProgres...
  • iFuMI
  • iFuMI
  • 2016-07-07 19:08
  • 487

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

本文来自我即将出版的《ASP.NET AJAX程序设计 第I卷 服务器端ASP.NET AJAX Extensions与ASP.NET AJAX Control Toolkit(暂定名)》第10章第1节。请各位朋友不吝给出建议和意见。   10.1 NoBot:拒绝机器人程序 NoBot ...
  • wenzhoufeng
  • wenzhoufeng
  • 2007-07-26 22:13
  • 1095

updatePanel的triggle导致无法加载updateProgress解决方案

首先我在updatePanel里面放了一个Button和Label,然后点击Button给Label赋值。这个是个很简单的过程了。代码我就不贴了。然后我再加了一个UpdateProgress控件,把它的AssociatedUpdatePanelID指向刚加的UpdatePanel
  • zhouyuqwert
  • zhouyuqwert
  • 2011-07-13 16:11
  • 1297

ASP.NET AJAX Control Tookit 使用文档

-----------------------------------------------------------资源-----------------------------------------------------------版本:1.0 Beta 2官方网站:http://ajax....
  • JOHNCOOLS
  • JOHNCOOLS
  • 2006-12-25 11:40
  • 1588

C# UpdateProgress 控件介绍 UpdatePanel

From:   http://technet.microsoft.com/zh-cn/library/bb386421(zh-tw).aspx "C#" %> "-//W3C//DTD XHTML 1.0 Transitiona...
  • dongge825
  • dongge825
  • 2012-07-02 13:47
  • 1084

UpdatePanel and UpdateProgress Position Control

.content { position: relative; width:100% } .updateprogresswrapper { text-align:center; position:absolute; opacit...
  • riverlau
  • riverlau
  • 2012-10-16 11:33
  • 334
    个人资料
    • 访问:502721次
    • 积分:3645
    • 等级:
    • 排名:第10606名
    • 原创:44篇
    • 转载:5篇
    • 译文:0篇
    • 评论:109条
    最新评论
    关注的博客
    我的好友