开发者社区> 技术小甜> 正文
阿里云
为了无法计算的价值
打开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 ,如需转载请自行联系原作者

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

相关文章
jQuery Ajax 简单的实现跨域请求
jQuery Ajax 简单的实现跨域请求
70 0
MVC项目开发中那些用到的知识点(Jquery ajax提交Json后台处理)
前言   jQuery提供的ajax方法能很方便的实现客户端与服务器的异步交互,在asp.net mvc 框架使用jQuery能很方便地异步获取提交数据,给用户提供更好的体验!  调用jQuery的ajax方法时,jQuery会根据post或者get协议对参数data进行序列化;   如果提交...
941 0
Jquery Ajax WebService
仅供参考 ws.aspx 代码                $.ajax({                    type: "POST",   //访问WebService使用Post方式请求                    contentType: "application/js...
750 0
+关注
10136
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载