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

简介:



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

 
主要内容
1 .通过客户端脚本取消异步更新
2 .通过客户端脚本显示或者隐藏进度信息
 
一.通过客户端脚本取消异步更新
1 .创建一个Web页面并切换到设计视图。
2 .在工具箱中双击ScriptManagerUpdatePanelUpdateProgress控件添加到页面中。添加后页面如下:
3 UpdatePanel控件中添加一个Label控件并设置它的Text属性值为“Panel Rendered”。
4 .添加一个Button控件并设置它的Text属性值为“refresh”。
5 .在UpdateProgress控件中添加文本text Processing…,并添加一个HtmlButton控件并设置它的Text属性为cancle
6 .双击refresh控件添加Click事件。
7 .在ButtondClick事件处理中添加如下代码,人为的创建一个3秒钟的延迟并显示当前服务器的时间。
None.gif protected   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.gif protected   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  ,如需转载请自行联系原作者
相关文章
|
15天前
|
设计模式 前端开发 JavaScript
Ajax技术【Ajax 实战】(二)-全面详解(学习总结---从入门到深化)
Ajax技术【Ajax 实战】(二)-全面详解(学习总结---从入门到深化)
23 0
|
15天前
|
XML JSON 前端开发
Ajax技术【Ajax技术详解、 Ajax 的使用、Ajax请求、 JSON详解、JACKSON 的使用 】(一)-全面详解(学习总结---从入门到深化)
Ajax技术【Ajax技术详解、 Ajax 的使用、Ajax请求、 JSON详解、JACKSON 的使用 】(一)-全面详解(学习总结---从入门到深化)
61 1
|
15天前
|
开发框架 前端开发 JavaScript
ASP.NET AJAX使用方法概述(三)
ASP.NET AJAX使用方法概述(三)
17 1
|
15天前
|
XML JSON 前端开发
Ajax – JSON入门指南
Ajax – JSON入门指南
11 1
|
15天前
|
开发框架 缓存 前端开发
安装ASP.NET AJAX (一安装)
安装ASP.NET AJAX (一安装)
16 0
|
15天前
|
XML 开发框架 .NET
C# .NET面试系列八:ADO.NET、XML、HTTP、AJAX、WebService
## 第二部分:ADO.NET、XML、HTTP、AJAX、WebService #### 1. .NET 和 C# 有什么区别? .NET(通用语言运行时): ```c# 定义:.NET 是一个软件开发框架,提供了一个通用的运行时环境,用于在不同的编程语言中执行代码。 作用:它为多语言支持提供了一个统一的平台,允许不同的语言共享类库和其他资源。.NET 包括 Common Language Runtime (CLR)、基础类库(BCL)和其他工具。 ``` C#(C Sharp): ```c# 定义: C# 是一种由微软设计的面向对象的编程语言,专门为.NET 平台开发而创建。 作
193 2
|
15天前
|
SQL 开发框架 .NET
ASP.NET Web——GridView完整增删改查示例(全篇幅包含sql脚本)大二结业考试必备技能
ASP.NET Web——GridView完整增删改查示例(全篇幅包含sql脚本)大二结业考试必备技能
42 0
|
15天前
|
设计模式 缓存 前端开发
Ajax技术【Ajax 实战】(二)-全面详解(学习总结---从入门到深化)(下)
Ajax技术【Ajax 实战】(二)-全面详解(学习总结---从入门到深化)
17 1
|
15天前
|
前端开发 JavaScript fastjson
Ajax技术【Ajax 实战】(二)-全面详解(学习总结---从入门到深化)(上)
Ajax技术【Ajax 实战】(二)-全面详解(学习总结---从入门到深化)
28 1
|
15天前
|
开发框架 前端开发 .NET
ASP.NET CORE 3.1 MVC“指定的网络名不再可用\企图在不存在的网络连接上进行操作”的问题解决过程
ASP.NET CORE 3.1 MVC“指定的网络名不再可用\企图在不存在的网络连接上进行操作”的问题解决过程
67 0

相关实验场景

更多