开发者社区> 技术小甜> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

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

简介:
+关注继续查看



在本篇文章中,我们将通过编写JavaScript来使用客户端行为扩展UpdateProgress控件,客户端代码将使用ASP.NET AJAX Library中的PageRequestManager,在UpdateProgress控件中,将添加一个Button,来允许用户取消异步更新,并且使用客户端脚本来显示或者隐藏进度信息。

 
主要内容
1.通过客户端脚本取消异步更新
2.通过客户端脚本显示或者隐藏进度信息
 
一.通过客户端脚本取消异步更新
1.创建一个Web页面并切换到设计视图。
2.在工具箱中双击ScriptManagerUpdatePanelUpdateProgress控件添加到页面中。添加后页面如下:
3UpdatePanel控件中添加一个Label控件并设置它的Text属性值为“Panel Rendered”。
4.添加一个Button控件并设置它的Text属性值为“refresh”。
5.在UpdateProgress控件中添加文本text Processing…,并添加一个HtmlButton控件并设置它的Text属性为cancle
6.双击refresh控件添加Click事件。
7.在ButtondClick事件处理中添加如下代码,人为的创建一个3秒钟的延迟并显示当前服务器的时间。
None.gifprotected void Button1_Click(object sender, EventArgs e)
ExpandedBlockStart.gif
{
InBlock.gif    System.Threading.Thread.Sleep(
3000);
InBlock.gif
InBlock.gif    Label1.Text 
= DateTime.Now.ToString();
ExpandedBlockEnd.gif}
8.添加如下脚本,获取一个当前PageRequestManager类的实例,并创建一个函数调用abortPostBack方法来停止异步更新。
ExpandedBlockStart.gif<script language="javascript" type="text/javascript">
InBlock.gif
<!-- 
InBlock.gif
var prm = Sys.WebForms.PageRequestManager.getInstance();
InBlock.gif
ExpandedSubBlockStart.gif
function CancelAsyncPostBack() {
InBlock.gif
ExpandedSubBlockStart.gif    
if (prm.get_isInAsyncPostBack()) {
InBlock.gif
InBlock.gif      prm.abortPostBack();
InBlock.gif
ExpandedSubBlockEnd.gif    }

ExpandedSubBlockEnd.gif}

ExpandedBlockEnd.gif
// -->
None.gif
</script>
9.设置HtmlButtonclick特性为CancelAsyncPostBack
10.添加如下的样式块到<head>元素之间。
ExpandedBlockStart.gif<style type="text/css">
InBlock.gif
ExpandedSubBlockStart.gif#UpdatePanel1 
{
InBlock.gif
InBlock.gif  width
:200px; height:100px;
InBlock.gif
InBlock.gif  border
: 1px solid gray;
InBlock.gif
ExpandedSubBlockEnd.gif
}

InBlock.gif
ExpandedSubBlockStart.gif#UpdateProgress1 
{
InBlock.gif
InBlock.gif  width
:200px; background-color: #FFC080;
InBlock.gif
InBlock.gif  bottom
: 0%; left: 0px; position: absolute;
InBlock.gif
ExpandedSubBlockEnd.gif
}

ExpandedBlockEnd.gif
None.gif
</style>
11.保存并按Ctrl + F5运行。
12.单击refresh按钮,经过短暂的延时之后显示进度信息,完成异步更新之后UpdatePanel中的信息显示为当前的服务器时间。
13.单击refresh按钮并立即单击Cancle按钮结束异步更新,注意到UpdatePanel中的时间信息并没有更新。
二.通过客户端脚本显示或者隐藏进度信息
在下列情况下,UpdateProgress控件将不会自动显示:
    UpdateProgress控件关联的UpdatePanel之外的控件引发的异步更新。
    UpdateProgress控件没有关联任何UpdatePanel,不在UpdatePanel中的控件引发的异步更新(例如用代码实现的更新)。
下面的例子将展示一个不在UpdateProgress所关联的UpdatePanel中的控件所引发的异步更新时,如何显示UpdateProgress控件。
1.在我们前面所创建的页面中,切换到设计视图。
2.选中UpdateProgress控件,在属性窗口中,设置AssociatedUpdatePanelID属性为UpdatePanel1
3.在UpdatePanelUpdateProgress控件之外添加一个Button控件。
4.设置ButtonText属性值为Trigger,并设置ID属性为Panel1Trigger
5.选择UpdatePanel控件,在属性窗口中Triggers属性行单击ellipsis (…)
6.创建一个异步更新触发器,并设置控件IDPanel1Trigger
7.双击Trigger按钮添加Click事件。
8.在ButtondClick事件处理中添加如下代码,人为的创建一个3秒钟的延迟并显示当前服务器的时间,并附加上一条信息表示是由触发器引发的异步更新。
None.gifprotected void Panel1Trigger_Click(object sender, EventArgs e)
ExpandedBlockStart.gif
{
InBlock.gif    System.Threading.Thread.Sleep(
3000);
InBlock.gif
InBlock.gif    Label1.Text 
= DateTime.Now.ToString() + " - trigger";
ExpandedBlockEnd.gif}
9.在代码窗口,在已有的<Script>脚本块中添加如下代码:


ExpandedBlockStart.gif<script language="javascript" type="text/javascript">
InBlock.gif
InBlock.gif
<!-- 
InBlock.gif
InBlock.gif
var prm = Sys.WebForms.PageRequestManager.getInstance();
InBlock.gif
ExpandedSubBlockStart.gif
function CancelAsyncPostBack() {
InBlock.gif
ExpandedSubBlockStart.gif    
if (prm.get_isInAsyncPostBack()) {
InBlock.gif
InBlock.gif      prm.abortPostBack();
InBlock.gif
ExpandedSubBlockEnd.gif    }

InBlock.gif
ExpandedSubBlockEnd.gif}

InBlock.gif
InBlock.gifprm.add_initializeRequest(InitializeRequest);
InBlock.gif
InBlock.gifprm.add_endRequest(EndRequest);
InBlock.gif
InBlock.gif
var postBackElement;
InBlock.gif
ExpandedSubBlockStart.gif
function InitializeRequest(sender, args) {
InBlock.gif
ExpandedSubBlockStart.gif    
if (prm.get_isInAsyncPostBack()) {
InBlock.gif
InBlock.gif        args.set_cancel(
true);
ExpandedSubBlockEnd.gif    }

InBlock.gif
InBlock.gif    postBackElement 
= args.get_postBackElement();
InBlock.gif
ExpandedSubBlockStart.gif    
if (postBackElement.id = 'Panel1Trigger') {
InBlock.gif
InBlock.gif        $get('UpdateProgress1').style.display 
= 'block';                
InBlock.gif
ExpandedSubBlockEnd.gif    }

InBlock.gif
ExpandedSubBlockEnd.gif}

InBlock.gif
ExpandedSubBlockStart.gif
function EndRequest(sender, args) {
InBlock.gif
ExpandedSubBlockStart.gif    
if (postBackElement.id = 'Panel1Trigger') {
InBlock.gif
InBlock.gif        $get('UpdateProgress1').style.display 
= 'none';
InBlock.gif
ExpandedSubBlockEnd.gif    }

InBlock.gif
ExpandedSubBlockEnd.gif}

InBlock.gif
InBlock.gif
// -->
ExpandedBlockEnd.gif

None.gif
</script>
10.保存并按Ctrl + F5运行。
11.单击Trigger按钮,如下所示:

[翻译自官方文档]













本文转自lihuijun51CTO博客,原文链接:http://blog.51cto.com/terrylee/67716 ,如需转载请自行联系原作者

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
利用Asp.net Ajax异步获取xml文档内容
Ajax原意本是让人利用异步获取XML内容,以实现无刷新的网页效果asp.net ajax已将底层内容封装实现起来远比自写xmlhttp来的方便,至少浏览器兼容方面要强得很多下面以一个www.asp.
543 0
[导入]Asp.net Ajax调用web services IE7下正常,FF下就不好使了
Asp.net Ajax调用web services IE7下正常,FF下就不好使了 文章来源:http://blog.csdn.net/chsword/archive/2007/02/26/1515419.aspx
571 0
[导入]ASP.NET AJAX 说明文档->客户端引用->全局命名空间->JavaScript 基础类型扩展->Array 类型扩展->contains 函数
Array.contains 函数。使用 contains 函数确定某元素是否在 Array 中。在Firefox浏览器中 调用 contains 函数 如果数组中有元素被设置为 undefined且item 为 undefined 则返回 true .其它所有浏览器,在此情况下函数返回 false.以下示例展示了如何使用contains 函数来确定某元素是否在 Array 中。
486 0
[导入]ASP.NET AJAX 说明文档->客户端引用->全局命名空间->JavaScript 基础类型扩展->Array 类型扩展->clone 函数
创建 Array 的浅表副本. 静态函数,使用无需实例化。文章来源:http://blog.csdn.net/chsword/archive/2007/02/24/1513307.aspx
689 0
[导入]ASP.NET AJAX 说明文档->客户端引用->全局命名空间->JavaScript 基础类型扩展->Array 类型扩展->clear 函数
Array.clear 函数。使用 clear函数 从 Array对象 中移除所有元素。下面的示例展示了如何使用 clear 函数。文章来源:http://blog.csdn.net/chsword/archive/2007/02/24/1513298.aspx
445 0
[导入]ASP.NET AJAX 说明文档->客户端引用->全局命名空间->JavaScript 基础类型扩展->Array 类型扩展->addRange 函数
Array.addRange 函数。使用 addRange 函数将一个Array中的元素添加到另一个 Array 的结尾处.如果 items 为不包含任何元素的数组, 则目标数组无变化,且无异常抛出. 注意。
672 0
[导入]ASP.NET AJAX 说明文档->客户端引用->全局命名空间->JavaScript 基础类型扩展->Array 类型扩展->add 函数
Array.add 函数。将元素添加到 Array 的结尾处. 本函数是静态函数,使用时无需实例化。语法Array.add(array,文章来源:http://blog.csdn.net/chsword/archive/2007/02/24/1513250.aspx
495 0
[导入]ASP.NET AJAX 说明文档->客户端引用->全局命名空间->JavaScript 基础类型扩展->Array 类型扩展
Array 类型扩展。提供了基于ECMAScript (JavaScript) 的 Array 对象的扩展.将另一个 Array对象 的元素添加到 Array对象 的末尾。将元素插入 Array 的指定索引处。
602 0
[导入]ASP.NET AJAX 说明文档->客户端引用->全局命名空间
全局命名空间 说明。本部分包含 ECMAScript (JavaScript)扩展的全局对象和其它核心对象. JavaScript 基本类型扩展。文章来源:http://blog.csdn.net/chsword/archive/2007/02/24/1513227.aspx
654 0
+关注
10136
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载