9.4  UpdateProgress控件

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

9.4.1  UpdateProgress控件概述

UpdateProgress控件用于当页面异步更新数据时,显示给用户友好的提示信息。该信息可以是文本信息,也可以是图片信息,用户可以根据自己的项目需要或自己的意愿进行选择。该控件的简单定义形式如下所示:

<asp:UpdateProgress ID="UpdateProgress1" runat="server">

<ProgressTemplate>

<!--表示进度的信息-->

</ProgressTemplate>

</asp:UpdateProgress>

使用UpdateProgress控件很简单,在默认情况下,UpdageProgress控件将显示页面上所有的UpdatePanel控件更新的进度信息,在以前版本的UpdateProgress中,我们无法设置让UpdateProgress只显示某一个UpdatePanel的更新,而在最新版本的UpdateProgress控件中提供了AssociatedUpdatePanelID属性,可以指定UpdateProgress控件显示哪一个UpdatePanel控件。

9.4.2  UpdateProgress控件属性与方法

UpdateProgress控件的属性不是很多,它的主要属性如表9-4所示:

表9-4  UpdateProgress控件的属性

属性

说明

AssociatedUpdatePannelID

该属性和该UpdateProgress相关联的UpdatePanel的ID,通常用于有多个UpdatePanel的情况下

DisplayAfter

进度信息被展示后的ms数

DynamicLayout

UpdateProgress控件是否动态绘制,而不占用网页空间

9.4.3  UpdateProgress控件使用实例

在对UpdateProgress控件进行了介绍之后,下面通过两个实例来演示一下该控件是如何使用的。一个实例只使用单个UpdateProgress控件,而另一个则同时使用多个UpdateProgress控件,注意一下它们之间有什么不同。

1.使用单个UpdateProgress控件

在这个实例中,我们只使用单个UpdateProgress控件来演示它是如何使用的。首先我们需要创建一个显示文件upgDemo.aspx,它用于呈现一些文本内容及一个按钮。它的部分代码如下所示:

<form id="form1" runat="server">

<div>

<asp:Label ID="lheader" runat="server" Font-Bold="True" Font-Size="Large" Text="使用UpdateProgress控件"></asp:Label><br />

<hr />

&nbsp;</div>

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

</asp:ScriptManager>

<asp:UpdatePanel ID="UpdatePanel1" runat="server">

<ContentTemplate>

<asp:Label ID="linfo" runat="server" Text="单击下面按钮进行测试"></asp:Label><br />

<asp:Button ID="btTest" runat="server" OnClick="btTest_Click" Text="测试" /><br />

<asp:Label ID="lResult" runat="server"></asp:Label>

</ContentTemplate>

</asp:UpdatePanel>

<asp:UpdateProgress ID="UpdateProgress1" runat="server">

<ProgressTemplate >

<div id="iLoading" style="font-weight: bold; font-size: large; left: 20px; text-transform: capitalize; color: red; font-family: Monospace; position: absolute; top: 50px; background-color: #99ccff;">

Loading......

</div>

</ProgressTemplate>

</asp:UpdateProgress>

</form>

在上述代码中,我们分别添加一个ScriptManager控件、一个UpdatePanel控件和一个UpdateProgress控件。另外,应注意到我们在ID为btTest的按钮中设置了它的OnClick属性值为btTest_Click,也就是说当用户单击该按钮将调用源码文件upgDemo.aspx.cs中的方法btTest_Click(),它的代码如下所示:

protected void btTest_Click(object sender, EventArgs e)

{

//设置延迟时间,以便能显示UpdateProgress控件

System.Threading.Thread.Sleep(6000);

string strMsg = "欢迎访问IT在中国http://www.itzcn.com<br >";

strMsg += "当前时间是:" + DateTime.Now.ToString();

lResult.Text = strMsg;

}

上述代码很简单,首先产生相应的延迟,以便能使显示页面呈现UpdateProgress控件的内容,然后将一些字符串信息返回给显示页面。它的执行效果如图9-8、9-9所示:

图9-8  呈现UpdateProgress控件的效果   图9-9  单击“测试”按钮后的最终效果

2.使用多个UpdateProgress控件

在这个实例中,我们使用多个UpdateProgress控件来演示它们是如何使用的。同样,我们需要先创建一个显示文件upgDemo2.aspx,它用于呈现一些文本内容及多个按钮。它的部分代码如下所示:

<form id="form1" runat="server" method="post">

<div>

<asp:Label ID="Label1" runat="server" Font-Bold="True" Text="使用多个UpdateProgress控件"></asp:Label><br />

<hr style="border:2px solid #000000;" />

</div>

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

</asp:ScriptManager>

<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">

<ContentTemplate>

<asp:Label ID="Label2" runat="server" Text="你喜欢的水果是:"></asp:Label>

<asp:DropDownList ID="drFruit" runat="server" AutoPostBack="True" OnSelectedIndexChanged="drFruit_SelectedIndexChanged">

<asp:ListItem Value="">请选择</asp:ListItem>

<asp:ListItem Value="香蕉">香蕉</asp:ListItem>

<asp:ListItem Value="苹果">苹果</asp:ListItem>

<asp:ListItem Value="桔子">桔子</asp:ListItem>

</asp:DropDownList>

<br /><asp:Label ID="lMsg1" runat="server" ></asp:Label>

</ContentTemplate>

</asp:UpdatePanel>

<asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="UpdatePanel1">

<ProgressTemplate>

<div id="iLoading1" style="color: #ff0000; font-family: 隶书; background-color: #99ccff;">Loading1......</div>

</ProgressTemplate>

</asp:UpdateProgress>

<hr style="border:1px solid #99ccff;" />

<asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional" ChildrenAsTriggers="true">

<ContentTemplate>

<asp:Label ID="Label3" runat="server" Text="请选择你要访问的网站:"></asp:Label>

<asp:RadioButtonList ID="irblSite" runat="server" OnSelectedIndexChanged="irblSite_SelectedIndexChanged" AutoPostBack="true">

<asp:ListItem Value="http://www.itzcn.com">IT在中国</asp:ListItem>

<asp:ListItem Value="http://www.itying.net">IT营</asp:ListItem>

</asp:RadioButtonList>

<br /><asp:Label ID="lMsg2" runat="server" ></asp:Label>

</ContentTemplate>

</asp:UpdatePanel>

<asp:UpdateProgress ID="UpdateProgress2" runat="server" AssociatedUpdatePanelID="UpdatePanel2">

<ProgressTemplate>

<div id="iLoading2" style="font: smallcaption; color: #ffcc99; background-color: #99ccff">Loading2......</div>

</ProgressTemplate>

</asp:UpdateProgress>

</form>

在上述代码中,我们分别添加了一个ScriptManager控件、两个UpdatePanel控件、两个UpdateProgress控件和其他的一些页面元素。其中,同样调用了源码文件upgMemo.aspx.cs中的相应方法。代码如下所示:

protected void drFruit_SelectedIndexChanged(object sender, EventArgs e)

{

//设置延迟时间,以便能显示UpdateProgress1控件

System.Threading.Thread.Sleep(5000);

string strFruit = Request.Form["drFruit"];

string strMsg = "你最喜欢的水果是:" + strFruit;

strMsg += "<br />当前时间是:" + DateTime.Now.ToString();

lMsg1.Text = strMsg;

}

protected void irblSite_SelectedIndexChanged(object sender, EventArgs e)

{

System.Threading.Thread.Sleep(6000);

string strSite = Request.Form["irblSite"];

string strMsg = "<a href=\'" +strSite + "\'>请单击此处转向要访问的网站</a>";

strMsg += "<br />当前时间是:" + DateTime.Now.ToString();

lMsg2.Text = strMsg;

}

上述代码的作用,同样是先通过响应的延迟来呈现相应的UpdateProgress控件,然后根据不同的请求进行不同的操作,最后将执行结果返回给显示页面。该案例的运行效果如图9-10与9-11所示:

图9-10  呈现UpdateProgress1的显示效果  图9-11  呈现UpdateProgress2的显示效果

从图9-10与9-11中可以看出,两个UpdatePanel控件是互不响应的,它们分别调用各自的UpdateProgress控件。实际上这是通过设置UpdateProgress控件的AssociatedUpdatePanelID属性值来实现的。

转载于:https://www.cnblogs.com/zhangliyu/archive/2009/04/01/1426914.html

UpdateProgress相关推荐

  1. UpdateProgress使用

    UpdateProgress是一个进度显示条,加在AJAX里能显得更加的人性化(个人认为).现在我们就开始吧: 第一.新建一个AJAX项目.在页面上加上ScriptManager,UpdatePane ...

  2. UpdateProgress学习

    在updatePanel里面放了一个Button和Label,然后点击Button给Label赋值.这个是个很简单的过程了. 代码我就补贴了. 然后我再加了一个UpdateProgress控件,把它的 ...

  3. [转]MSDN - 在客户端脚本中为 UpdateProgress 控件编程

    本文转自: http://msdn.microsoft.com/zh-cn/library/bb386518.aspx 在本教程中,将通过编写 ECMAScript (JavaScript) 代码来扩 ...

  4. UpdateProgress 控件--用户中断

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="UpdateProgress(一 ...

  5. UpdateProgress控件

    9.4 UpdateProgress控件 在现实的网络中,当我们打开某一个网站或链接时,由于种种原因经常要等待页面显示出来,这样的用户体验真的很差.如果能在页面执行较长时间操作的同时,给用户提供一个类 ...

  6. AJAX 带有 取消功能的 UpdateProgress

    aspx 页 : <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server&qu ...

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

    原文链接:http://www.cnblogs.com/Terrylee/archive/2006/11/12/ASPNET_AJAX_UpdateProgress_Part2.html 在本篇文章中 ...

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

    在ASP.NET AJAX Beta2中,UpdateProgress控件已经从"增值"CTP中移到了ASP.NET AJAX核心中.以下两篇关于UpdateProgress的文章 ...

  9. 第八篇: UpdateProgress 控件--显示正在处理中的信息

    UpdateProgress 控件负责当页面在异步更新数据时,显示目前处理状况. 1. 新建 Web窗体: UpdateProgress(一).aspx.    添加一个 ScriptManger 控 ...

最新文章

  1. java数组的协变_Java数组协变与范型不变性
  2. 有关完全二叉树求节点数和前缀树求字符串是否重复的两道算法题
  3. 深入理解Linux调度子系统
  4. 异常mongodb:Invalid BSON field name XXXXXX:YYYYY.zz
  5. 第一阶段 03Java的基本数据类型
  6. 给广告打“保”字标、弄风险提示 百度搜索为用户旅游操碎了心
  7. centos 7mysql加tomcat_CentOS 7环境搭建(JDK、Tomcat、Mysql)
  8. python调用第三方接口获取数据_python调用接口,python接收post请求接口(附完整代码)...
  9. vs设置编码格式_轻松编辑PDF文档的贝茨编码
  10. 百度以侵犯商业秘密起诉前高管王劲 索赔5000万 内附王劲离职承诺函
  11. RT-Thread配置SPI-Flash(W25Q256)
  12. vue.js 获取当前屏幕的宽度_js获取移动端屏幕高度和宽度等设备尺寸
  13. STM32F103C8T6系统板
  14. Cisco路由器配置动态路由rip
  15. dellt130服务器做系统,戴尔Dell R330;T130安装系统后键盘鼠标不能使用
  16. excel删除重复值并原位置保留第一个值方法步骤
  17. 动态规划 — 钢条切割问题
  18. OSPF学习小结与实验
  19. MFC 多个RadioButton设为一组 vs2013
  20. 产业园区需要塑造的“六”大品牌

热门文章

  1. android获取状态栏截屏按钮状态,关于代码截屏带状态栏的问题
  2. matlab 博客,matlab
  3. java 集合快速排序_搞定Java快速排序
  4. 1.QML语法、属性和元素
  5. AttributeError: module ‘cv2.cv2‘ has no attribute ‘xfeatures2d‘解决方法
  6. C++中static关键字用法
  7. Linux 批量依赖库拷贝(ldd)
  8. iOS沙盒路径及路径下数据的存储和读取
  9. Java 9 揭秘(16. 虚拟机栈遍历)
  10. 【编码】-小Ho的防护盾-2016.08.14