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

布满荆棘的人生 2021-11-22 15:34 67阅读 0赞

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

**主要内容**

1．通过客户端脚本取消异步更新

2．通过客户端脚本显示或者隐藏进度信息

**一．通过客户端脚本取消异步更新**

1．创建一个Web页面并切换到设计视图。

2．在工具箱中双击ScriptManager、UpdatePanel、UpdateProgress控件添加到页面中。添加后页面如下：

![UPTutorial10Step1.jpg][]

3．在UpdatePanel控件中添加一个Label控件并设置它的Text属性值为“Panel Rendered”。

4．添加一个Button控件并设置它的Text属性值为“refresh”。

5．在UpdateProgress控件中添加文本text Processing…，并添加一个HtmlButton控件并设置它的Text属性为cancle。

![UPTutorial10Step2.jpg][]

6．双击refresh控件添加Click事件。

7．在Buttond的Click事件处理中添加如下代码，人为的创建一个3秒钟的延迟并显示当前服务器的时间。

![None.gif][] protected  void  Button1\_Click( object  sender, EventArgs e)  
![ExpandedBlockStart.gif][]![ContractedBlock.gif][] \{  
![InBlock.gif][]    System.Threading.Thread.Sleep(3000);  
![InBlock.gif][]  
![InBlock.gif][]    Label1.Text = DateTime.Now.ToString();  
![ExpandedBlockEnd.gif][]\}

8．添加如下脚本，获取一个当前PageRequestManager类的实例，并创建一个函数调用abortPostBack方法来停止异步更新。

![ExpandedBlockStart.gif][] ![ContractedBlock.gif][] < script  language ="javascript"  type ="text/javascript" >   
![InBlock.gif][]  
![None.gif][] </ script >

9．设置HtmlButton的click特性为CancelAsyncPostBack。

![UPTutorial10Step5.jpg][]

10．添加如下的样式块到<head>元素之间。

![ExpandedBlockStart.gif][] ![ContractedBlock.gif][] < style  type ="text/css" >   
![InBlock.gif][]  
![ExpandedSubBlockStart.gif][]![ContractedSubBlock.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][]![ContractedSubBlock.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中的信息显示为当前的服务器时间。

![ASPNETAJAX_016.gif][]

13．单击refresh按钮并立即单击Cancle按钮结束异步更新，注意到UpdatePanel中的时间信息并没有更新。

**二．通过客户端脚本显示或者隐藏进度信息**

在下列情况下，UpdateProgress控件将不会自动显示：

由UpdateProgress控件关联的UpdatePanel之外的控件引发的异步更新。

UpdateProgress控件没有关联任何UpdatePanel，不在UpdatePanel中的控件引发的异步更新（例如用代码实现的更新）。

下面的例子将展示一个不在UpdateProgress所关联的UpdatePanel中的控件所引发的异步更新时，如何显示UpdateProgress控件。

1．在我们前面所创建的页面中，切换到设计视图。

2．选中UpdateProgress控件，在属性窗口中，设置AssociatedUpdatePanelID属性为UpdatePanel1。

![UPTutorial11Step1.jpg][]

3．在UpdatePanel和UpdateProgress控件之外添加一个Button控件。

4．设置Button的Text属性值为Trigger，并设置ID属性为Panel1Trigger。

![UPTutorial11Step2.jpg][]

5．选择UpdatePanel控件，在属性窗口中Triggers属性行单击ellipsis (…)。

6．创建一个异步更新触发器，并设置控件ID为Panel1Trigger。

![UPTutorial11Step3.jpg][]

7．双击Trigger按钮添加Click事件。

8．在Buttond的Click事件处理中添加如下代码，人为的创建一个3秒钟的延迟并显示当前服务器的时间，并附加上一条信息表示是由触发器引发的异步更新。

![None.gif][] protected  void  Panel1Trigger\_Click( object  sender, EventArgs e)  
![ExpandedBlockStart.gif][]![ContractedBlock.gif][] \{  
![InBlock.gif][]    System.Threading.Thread.Sleep(3000);  
![InBlock.gif][]  
![InBlock.gif][]    Label1.Text = DateTime.Now.ToString() \+ " - trigger";  
![ExpandedBlockEnd.gif][]\}

9．在代码窗口，在已有的<Script>脚本块中添加如下代码：

![UPTutorial11Step5.jpg][]

![ExpandedBlockStart.gif][] ![ContractedBlock.gif][] < script  language ="javascript"  type ="text/javascript" >   
![InBlock.gif][]  
![InBlock.gif][]  
![ExpandedBlockEnd.gif][]  
![None.gif][] </ script >

10．保存并按Ctrl + F5运行。

11．单击Trigger按钮，如下所示：

![ASPNETAJAX_017.gif][]  
\[翻译自官方文档\]

作者： [TerryLee][]  
出处： [http://terrylee.cnblogs.com/][TerryLee]  
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。

posted @ 2006-11-12 22:59 [TerryLee][TerryLee 1] 阅读(9910) [评论(67)][67]   [编辑][Link 1] [收藏][Link 2] 所属分类: [ASP.NET][] 、 [AJAX][]

![558655.html_type_1_webview_1][]

转载于:https://www.cnblogs.com/yongheng178/archive/2008/08/03/1259398.html

[UPTutorial10Step1.jpg]: /images/20211122/92f27dae95b443c98d9e47373a9592bc.png
[UPTutorial10Step2.jpg]: /images/20211122/0227fcca75244239aa9acdf7013060de.png
[None.gif]: /images/20211122/e405fbf374834f3d816b9178777a41e1.png
[ExpandedBlockStart.gif]: https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif
[ContractedBlock.gif]: /images/20211122/064c0866809142fdb3ade7fe4bbc3a78.png
[InBlock.gif]: /images/20211122/38ab0e411cbf42fd844e7e817dc4f147.png
[ExpandedBlockEnd.gif]: /images/20211122/4de6133233004ef59428650a296dc057.png
[ExpandedSubBlockStart.gif]: https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif
[ContractedSubBlock.gif]: /images/20211122/9737dd503b18457384619be901b2d00e.png
[ExpandedSubBlockEnd.gif]: /images/20211122/280487cdfebc4afdada8487d0084cd09.png
[UPTutorial10Step5.jpg]: /images/20211122/d6662855db2f4a7e872ea85acd4edcaa.png
[ASPNETAJAX_016.gif]: /images/20211122/0dd0a9a762b849d4b99b5b54a86d6dd3.png
[UPTutorial11Step1.jpg]: /images/20211122/044fb70045a745eea17a2dfd8b4b470b.png
[UPTutorial11Step2.jpg]: /images/20211122/8f85e411f3a44f76b15913965a2d459a.png
[UPTutorial11Step3.jpg]: /images/20211122/348ad4c2267b4152820a3eb5a45ad361.png
[UPTutorial11Step5.jpg]: /images/20211122/310a453b32184380b831933b91207d8b.png
[ASPNETAJAX_017.gif]: /images/20211122/86002db7c5f94ba3a42c9df0cda974d7.png
[TerryLee]: http://terrylee.cnblogs.com/
[TerryLee 1]: http://www.cnblogs.com/Terrylee/
[67]: http://www.cnblogs.com/Terrylee/archive/2006/11/12/ASPNET_AJAX_UpdateProgress_Part2.html#Post
[Link 1]: http://www.cnblogs.com/Terrylee/admin/EditPosts.aspx?postid=558655
[Link 2]: http://www.cnblogs.com/Terrylee/AddToFavorite.aspx?id=558655
[ASP.NET]: http://www.cnblogs.com/Terrylee/category/37512.html
[AJAX]: http://www.cnblogs.com/Terrylee/category/115628.html
[558655.html_type_1_webview_1]: /images/20211122/bb6e0009934841c0bec59d21b544c29b.png