《ASPNET AJAX入门系列：使用客户端脚本对UpdateProgress编程.docx》由会员分享，可在线阅读，更多相关《ASPNET AJAX入门系列：使用客户端脚本对UpdateProgress编程.docx（9页珍藏版）》请在三一办公上搜索。
1、ASP.NET AJAX入门系列 ：使用客户端脚本对UpdateProgress编程 在本篇文章中，我们将通过编写JavaScript来使用客户端行为扩展UpdateProgress控件，客户端代码将使用ASP.NET AJAX Library中的PageRequestManager，在UpdateProgress控件中，将添加一个Button，来允许用户取消异步更新，并且使用客户端脚本来显示或者隐藏进度信息。主要内容1通过客户端脚本取消异步更新2通过客户端脚本显示或者隐藏进度信息一通过客户端脚本取消异步更新1创建一个Web页面并切换到设计视图。2在工具箱中双击ScriptManager、Up
2、datePanel、UpdateProgress控件添加到页面中。添加后页面如下：3在UpdatePanel控件中添加一个Label控件并设置它的Text属性值为“Panel Rendered”。4添加一个Button控件并设置它的Text属性值为“refresh”。5在UpdateProgress控件中添加文本text Processing，并添加一个HtmlButton控件并设置它的Text属性为cancle。6双击refresh控件添加Click事件。7在Buttond的Click事件处理中添加如下代码，人为的创建一个3秒钟的延迟并显示当前服务器的时间。protectedvoidButt
3、on1_Click(objectsender,EventArgse)System.Threading.Thread.Sleep(3000);Label1.Text=DateTime.Now.ToString();8添加如下脚本，获取一个当前PageRequestManager类的实例，并创建一个函数调用abortPostBack方法来停止异步更新。9设置HtmlButton的click特性为CancelAsyncPostBack。10添加如下的样式块到元素之间。#UpdatePanel1width:200px;height:100px;border:1pxsolidgray;#UpdatePr
4、ogress1width:200px;background-color:#FFC080;bottom:0%;left:0px;position:absolute;11保存并按Ctrl + F5运行。12单击refresh按钮，经过短暂的延时之后显示进度信息，完成异步更新之后UpdatePanel中的信息显示为当前的服务器时间。13单击refresh按钮并立即单击Cancle按钮结束异步更新，注意到UpdatePanel中的时间信息并没有更新。二通过客户端脚本显示或者隐藏进度信息在下列情况下，UpdateProgress控件将不会自动显示：由UpdateProgress控件关联的UpdatePa
5、nel之外的控件引发的异步更新。UpdateProgress控件没有关联任何UpdatePanel，不在UpdatePanel中的控件引发的异步更新（例如用代码实现的更新）。下面的例子将展示一个不在UpdateProgress所关联的UpdatePanel中的控件所引发的异步更新时，如何显示UpdateProgress控件。1在我们前面所创建的页面中，切换到设计视图。2选中UpdateProgress控件，在属性窗口中，设置AssociatedUpdatePanelID属性为UpdatePanel1。3在UpdatePanel和UpdateProgress控件之外添加一个Button控件。4设
6、置Button的Text属性值为Trigger，并设置ID属性为Panel1Trigger。5选择UpdatePanel控件，在属性窗口中Triggers属性行单击ellipsis ()。6创建一个异步更新触发器，并设置控件ID为Panel1Trigger。7双击Trigger按钮添加Click事件。8在Buttond的Click事件处理中添加如下代码，人为的创建一个3秒钟的延迟并显示当前服务器的时间，并附加上一条信息表示是由触发器引发的异步更新。protectedvoidPanel1Trigger_Click(objectsender,EventArgse)System.Threading.Thread.Sleep(3000);Label1.Text=DateTime.Now.ToString()+-trigger;9在代码窗口，在已有的脚本块中添加如下代码：10保存并按Ctrl + F5运行。11单击Trigger按钮，如下所示：
