UpdateProgress
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 />
</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相关推荐
- UpdateProgress使用
UpdateProgress是一个进度显示条,加在AJAX里能显得更加的人性化(个人认为).现在我们就开始吧: 第一.新建一个AJAX项目.在页面上加上ScriptManager,UpdatePane ...
- UpdateProgress学习
在updatePanel里面放了一个Button和Label,然后点击Button给Label赋值.这个是个很简单的过程了. 代码我就补贴了. 然后我再加了一个UpdateProgress控件,把它的 ...
- [转]MSDN - 在客户端脚本中为 UpdateProgress 控件编程
本文转自: http://msdn.microsoft.com/zh-cn/library/bb386518.aspx 在本教程中,将通过编写 ECMAScript (JavaScript) 代码来扩 ...
- UpdateProgress 控件--用户中断
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="UpdateProgress(一 ...
- UpdateProgress控件
9.4 UpdateProgress控件 在现实的网络中,当我们打开某一个网站或链接时,由于种种原因经常要等待页面显示出来,这样的用户体验真的很差.如果能在页面执行较长时间操作的同时,给用户提供一个类 ...
- AJAX 带有 取消功能的 UpdateProgress
aspx 页 : <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server&qu ...
- ASP.NET AJAX入门系列(7):使用客户端脚本对UpdateProgress编程
原文链接:http://www.cnblogs.com/Terrylee/archive/2006/11/12/ASPNET_AJAX_UpdateProgress_Part2.html 在本篇文章中 ...
- ASP.NET AJAX入门系列(6):UpdateProgress控件简单介绍
在ASP.NET AJAX Beta2中,UpdateProgress控件已经从"增值"CTP中移到了ASP.NET AJAX核心中.以下两篇关于UpdateProgress的文章 ...
- 第八篇: UpdateProgress 控件--显示正在处理中的信息
UpdateProgress 控件负责当页面在异步更新数据时,显示目前处理状况. 1. 新建 Web窗体: UpdateProgress(一).aspx. 添加一个 ScriptManger 控 ...
最新文章
- java数组的协变_Java数组协变与范型不变性
- 有关完全二叉树求节点数和前缀树求字符串是否重复的两道算法题
- 深入理解Linux调度子系统
- 异常mongodb:Invalid BSON field name XXXXXX:YYYYY.zz
- 第一阶段 03Java的基本数据类型
- 给广告打“保”字标、弄风险提示 百度搜索为用户旅游操碎了心
- centos 7mysql加tomcat_CentOS 7环境搭建(JDK、Tomcat、Mysql)
- python调用第三方接口获取数据_python调用接口,python接收post请求接口(附完整代码)...
- vs设置编码格式_轻松编辑PDF文档的贝茨编码
- 百度以侵犯商业秘密起诉前高管王劲 索赔5000万 内附王劲离职承诺函
- RT-Thread配置SPI-Flash(W25Q256)
- vue.js 获取当前屏幕的宽度_js获取移动端屏幕高度和宽度等设备尺寸
- STM32F103C8T6系统板
- Cisco路由器配置动态路由rip
- dellt130服务器做系统,戴尔Dell R330;T130安装系统后键盘鼠标不能使用
- excel删除重复值并原位置保留第一个值方法步骤
- 动态规划 — 钢条切割问题
- OSPF学习小结与实验
- MFC 多个RadioButton设为一组 vs2013
- 产业园区需要塑造的“六”大品牌
热门文章
- android获取状态栏截屏按钮状态,关于代码截屏带状态栏的问题
- matlab 博客,matlab
- java 集合快速排序_搞定Java快速排序
- 1.QML语法、属性和元素
- AttributeError: module ‘cv2.cv2‘ has no attribute ‘xfeatures2d‘解决方法
- C++中static关键字用法
- Linux 批量依赖库拷贝(ldd)
- iOS沙盒路径及路径下数据的存储和读取
- Java 9 揭秘(16. 虚拟机栈遍历)
- 【编码】-小Ho的防护盾-2016.08.14