取消异步回发

通过使用页上的NET UpdatePanel Web 服务器控件，可以在 ASP.NET 中实现异步回发。 UpdatePanel 控件不再需要在每次回发时刷新整个页面，这样将改善用户体验。在浏览器中， Microsoft AJAX Library 中的Sys.WebForms.PageRequestManager 类在客户端页生命周期中管 理事件以进行异步回发。可以通过处理 PageRequestManager 类公开的事件来自定义异步回发 出现的方式。

先决条件

若要在您自己的开发环境中实现这些过程，您需要：

Microsoft Visual Studio 2005 或 Microsoft Visual Web Developer 速成版。

一个支持 AJAX 的ASP.NET 网站。

创建取消回发的脚本

首先，创建用于管理浏览器中的异步回发的ECMAScript (JavaScript) 代码。

创建 JavaScript 代码以取消回发

在 ASP.NET 网站中，添加新的JScript 文件并将其命名为 CancelPostback.js。

向文件中添加以下脚本：

var　divElem　=　'AlertDiv';
var　messageElem　=　'AlertMessage';

Sys.Application.add_load(ApplicationLoadHandler)
function　ApplicationLoadHandler(sender,　args)
{
　　　 Sys.WebForms.PageRequestManager.getInstance().add_initializeRequest (CheckStatus);
}
function　CheckStatus(sender,　args)
{
　 var　prm　=　Sys.WebForms.PageRequestManager.getInstance();
　 if　(prm.get_isInAsyncPostBack()　&　args.get_postBackElement().id　== 　'CancelRefresh')　{
　　　 prm.abortPostBack();
　 }
　 else　if　(prm.get_isInAsyncPostBack()　&　args.get_postBackElement().id　 ==　'RefreshButton')　{
　　　 args.set_cancel(true);
　　　 ActivateAlertDiv('visible',　'Still　working　on　previous　 request.');
　 }
　 else　if　(!prm.get_isInAsyncPostBack()　&　args.get_postBackElement().id 　==　'RefreshButton')　{
　　　 ActivateAlertDiv('visible',　'Retrieving　headlines.');
　 }
}
function　ActivateAlertDiv(visString,　msg)
{
　　　 var　adiv　=　$get(divElem);
　　　 var　aspan　=　$get(messageElem);
　　　 adiv.style.visibility　=　visString;
　　　 aspan.innerHTML　=　msg;
}
if(typeof(Sys)　!==　"undefined")　Sys.Application.notifyScriptLoaded ();
该脚本执行下列任务：

定义 Sys.Application 类的load 事件的处理程序。此处理程序随后为 PageRequestManager 类的initializeRequest 事件注册一个名为 CheckStatus 的处理程序。

定义 CheckStatus 处理程序以检查当前是否正在执行一个异步回发，并确定导致该回发的 元素的名称。

定义一个 ActivateAlertDiv 函数，该函数切换用于显示消息的<div> 元素的可见性 。

对 UpdatePanel 控件使用脚本

在此过程中，将使用您在包含 UpdatePanel 控件的页中创建的脚本。如果用户在异步回发 进行过程时单击了某个链接，则该脚本将取消回发。

创建用户可以在其中取消回发的页

创建名为 Default.aspx 的新的单文件 ASP.NET 网页并切换到“设计”视图。

在工具箱的“AJAX Extensions”选项卡中，双击 ScriptManager 控件以将其添加到页面中 。

 

在工具箱中，双击 UpdatePanel 控件以将其添加到页面中。

切换到“源”视图，然后将以下样式规则添加到页的<style> 元素中的 <style> 块中：

<style　type="text/css">
　　 body　{
　　　　 font-family:　Tahoma;
　　 }
　　 #UpdatePanel1{
　　　　 width:　400px;
　　　　 height:　200px;
　　　　 border:　solid　1px　gray;
　　 }
　　 div.AlertStyle　{
　　　 font-size:　smaller;
　　　 background-color:　#FFC080;
　　　 width:　400px;
　　　 height:　20px;
　　　 visibility:　hidden;
　　 }
　 </style>

样式规则定义由 UpdatePanel 控件呈现的<div> 元素的高度和宽度。规则还定义显 示进度消息的嵌套的<div> 元素的外观。

在 <ContentTemplate> 元素的<ContentTemplate> 元素内部添加以下标记：

<asp:DataList　ID="HeadlineList"　runat="server">
　　 <HeaderTemplate>
　　 <strong>Headlines</strong>
　　 </HeaderTemplate>
　　 <ItemTemplate>
　　　　　 <%#　Eval("Value")　%>
　　 </ItemTemplate>
　　 <FooterTemplate>
　　 </FooterTemplate>
　　 <FooterStyle　HorizontalAlign="right"　/>
</asp:DataList>
<p　style="text-align:right">
<asp:Button　ID="RefreshButton"
　　　　　　 Text="Refresh"
　　　　　　 runat="server"
　　　　　　 OnClick="NewsClick_Handler"　/>
</p>
<div　id="AlertDiv"　class="AlertStyle">
<span　id="AlertMessage"></span>
&nbsp;&nbsp;&nbsp;&nbsp;
<asp:LinkButton　ID="CancelRefresh"　runat="server">
Cancel</asp:LinkButton>

该标记执行以下任务：

定义一个 DataList 控件，其中的项绑定到一个 Value 字段。此过程稍后会将该字段作为 一个 SortedList 对象进行定义。

定义导致异步回发的Button 控件。

定义一个 <div> 元素，该元素用于在异步回发过程中显示消息。<div> 元素 也包括一个 LinkButton 控件，该控件可用来取消回发。

在 <script　runat="server"> 元素中，添加以下服务器代码作为 Click 事件处理 程序，该处理程序针对的是 UpdatePanel 控件中的“刷新”按钮。

Protected　Sub　NewsClick_Handler(ByVal　sender　As　Object,　ByVal　e　As 　EventArgs)
　　 System.Threading.Thread.Sleep(2000)
　　 HeadlineList.DataSource　=　GetHeadlines()
　　 HeadlineList.DataBind()
End　Sub

该代码使用数据绑定来读取和显示 DataList 控件中的标题列表。

说明：

出于本教程的需要，Click 事件的处理程序有意引入了延迟。在实际应用中，您不会引入延 迟。相反，延迟是由服务器通信或需要花费很长时间处理的服务器代码造成的，例如长时间运 行的数据库查询。

在 <script> 元素内部，为页的Load 事件添加下列代码：

Protected　Sub　Page_Load(ByVal　sender　As　Object,　ByVal　e　As　 EventArgs)
　　 If　Not　(IsPostBack)　Then
　　　　 HeadlineList.DataSource　=　GetHeadlines()
　　　　 HeadlineList.DataBind()
　　 End　If
End　Sub

该代码检查当前请求是否为回发请求。如果该请求不是回发请求，则将 DataList 控件绑定 到一个标题列表。（在异步回发期间，上一步中创建的NewClick_Handler 方法中将发生数据绑 定。）

在 <script> 元素内部，添加下列代码以生成标题：

'　Helper　method　to　simulate　news　headline　fetch.
Private　Function　GetHeadlines()　As　SortedList
　　 Dim　headlines　As　New　SortedList()
　　 headlines.Add(1,　"This　is　headline　1.")
　　 headlines.Add(2,　"This　is　headline　2.")
　　 headlines.Add(3,　"This　is　headline　3.")
　　 headlines.Add(4,　"This　is　headline　4.")
　　 headlines.Add(5,　"This　is　headline　5.")
　　 headlines.Add(6,　"(Last　updated　on　"　&　DateTime.Now.ToString()　 &　")")
　　 Return　headlines
End　Function

在本教程中，这些标题是以静态列表的形式创建的。在实际的应用中，将动态生成这些标题 。

切换到“设计”视图，

选择 ScriptManager 控件。

在“属性”窗口中，选择“脚本”属性并单击省略号 (…) 按钮以显示“ScriptReference 集合编辑器”对话框。

单击“添加”以添加脚本引用。

将脚本引用的“路径”属性设置为 CancelPostback.js，该文件是以前创建的JavaScript 文件。

使用 ScriptManager 的Scripts 集合添加脚本引用可确保在 Microsoft AJAX Library 加 载之后加载相应的脚本。

 

单击“确定”关闭“ScriptReference 集合编辑器”对话框。

保存更改，然后按 Ctrl+F5 在浏览器中查看页面。

单击“刷新”按钮并等待面板刷新。

将显示一条消息，并提供一个用于取消回发的选项。

再次单击“刷新”按钮，然后在消息出现之后再次单击“刷新”按钮并等待面板刷新。

消息的文本将变为指示先前的刷新仍在进行，将忽略第二次刷新。

再次单击“刷新”按钮，并在消息出现时单击“取消”链接来取消回发。

此时，由于已取消异步回发，因此 UpdatePanel 控件中显示的时间不会发生更改。

<%@　Page　Language="VB"　%>
<%@　Import　Namespace="System.Collections.Generic"　%>
<!DOCTYPE　html　PUBLIC　"-//W3C//DTD　XHTML　1.0　Transitional//EN"
　 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script　runat="server">
　　 Protected　Sub　NewsClick_Handler(ByVal　sender　As　Object,　ByVal　e　As　 EventArgs)
　　　　 System.Threading.Thread.Sleep(2000)
　　　　 HeadlineList.DataSource　=　GetHeadlines()
　　　　 HeadlineList.DataBind()
　　 End　Sub
　　 Protected　Sub　Page_Load(ByVal　sender　As　Object,　ByVal　e　As　 EventArgs)
　　　　 If　Not　(IsPostBack)　Then
　　　　　　 HeadlineList.DataSource　=　GetHeadlines()
　　　　　　 HeadlineList.DataBind()
　　　　 End　If
　　 End　Sub
　　 '　Helper　method　to　simulate　news　headline　fetch.
　　 Private　Function　GetHeadlines()　As　SortedList
　　　　 Dim　headlines　As　New　SortedList()
　　　　 headlines.Add(1,　"This　is　headline　1.")
　　　　 headlines.Add(2,　"This　is　headline　2.")
　　　　 headlines.Add(3,　"This　is　headline　3.")
　　　　 headlines.Add(4,　"This　is　headline　4.")
　　　　 headlines.Add(5,　"This　is　headline　5.")
　　　　 headlines.Add(6,　"(Last　updated　on　"　&　DateTime.Now.ToString() 　&　")")
　　　　 Return　headlines
　　 End　Function
</script>

<html　xmlns="http://www.169mnk.com/1999/xhtml">
<head　id="Head1"　runat="server">
　　 <title>Canceling　Postback　Example</title>
　　 <style　type="text/css">
　　 body　{
　　　　 font-family:　Tahoma;
　　 }
　　 #UpdatePanel1{
　　　　 width:　400px;
　　　　 height:　200px;
　　　　 border:　solid　1px　gray;
　　 }
　　 div.AlertStyle　{
　　　 font-size:　smaller;
　　　 background-color:　#FFC080;
　　　 width:　400px;
　　　 height:　20px;
　　　 visibility:　hidden;
　　 }
　 </style>
</head>
<body>
　　 <form　id="form1"　runat="server">
　　　　 <div　>
　　　　 <asp:ScriptManager　ID="ScriptManager1"　runat="server">
　　　　 <Scripts>
　　　　 <asp:ScriptReference　Path="CancelPostback.js"　/>
　　　　 </Scripts>
　　　　 </asp:ScriptManager>
　　　　 <asp:UpdatePanel　ID="UpdatePanel1"　runat="Server"　>
　　　　　　 <ContentTemplate>
　　　　　　　　 <asp:DataList　ID="HeadlineList"　runat="server">
　　　　　　　　　　 <HeaderTemplate>
　　　　　　　　　　 <strong>Headlines</strong>
　　　　　　　　　　 </HeaderTemplate>
　　　　　　　　　　 <ItemTemplate>
　　　　　　　　　　　　　 <%#　Eval("Value")　%>
　　　　　　　　　　 </ItemTemplate>
　　　　　　　　　　 <FooterTemplate>
　　　　　　　　　　 </FooterTemplate>
　　　　　　　　　　 <FooterStyle　HorizontalAlign="right"　/>
　　　　　　　　 </asp:DataList>
　　　　　　　　 <p　style="text-align:right">
　　　　　　　　 <asp:Button　ID="RefreshButton"
　　　　　　　　　　　　　　 Text="Refresh"
　　　　　　　　　　　　　　 runat="server"
　　　　　　　　　　　　　　 OnClick="NewsClick_Handler"　/>
　　　　　　　　 </p>
　　　　　　　　 <div　id="AlertDiv"　class="AlertStyle">
　　　　　　　　 <span　id="AlertMessage"></span>
　　　　　　　　 &nbsp;&nbsp;&nbsp;&nbsp;
　　　　　　　　 <asp:LinkButton　ID="CancelRefresh"　runat="server">
　　　　　　　　 Cancel</asp:LinkButton>
　　　　　　 </ContentTemplate>
　　　　 </asp:UpdatePanel>
　　　　 </div>
　　 </form>
</body>
</html>

回顾

本教程演示如何编写用于取消异步回发的JavaScript 代码。该脚本提供 PageRequestManager 类的initializeRequest 事件的处理程序。在 initializeRequest 事件 中，可以确定哪个元素导致了回发以及回发是否正在进行。然后可以采取相应的操作。在本教 程中，代码显示一个包含取消按钮的<div> 元素。

若要自动显示 UpdatePanel 控件状态，可以使用 UpdateProgress 控件。