ASP.NET AJAX UpdateProgress 控件概述

方案

　　当网页包含一个或多个用于部分页呈现的 UpdatePanel 控件时，UpdateProgress 控件可帮助您设计更为直观的 UI。如果部分页更新速度较慢，则可以使用 UpdateProgress 控件来提供有关更新状态的可视反馈。可以在页上放置多个 UpdateProgress 控件，其中每个控件都与不同的 UpdatePanel 控件相关联。也可以使用一个 UpdateProgress 控件，并将其与页上的所有 UpdatePanel 控件关联。

　　背景

　　UpdateProgress 控件将呈现一个 <div> 元素，该元素将根据关联的 UpdatePanel 控件是否已导致异步回发来显示或隐藏。对于初始页呈现和同步回发，将不会显示 UpdateProgress 控件。

　　将 UpdateProgress 控件与 UpdatePanel 控件关联

　　通过设置 UpdateProgress 控件的 AssociatedUpdatePanelID 属性，可将 UpdateProgress 控件与 UpdatePanel 控件关联。当回发事件源自 UpdatePanel 控件时，将显示任何关联的 UpdateProgress 控件。如果不将 UpdateProgress 控件与特定的 UpdatePanel 控件关联，则 UpdateProgress 控件将显示任何异步回发的进度。

　　如果将一个 UpdatePanel 控件的 ChildrenAsTriggers 属性设置为 false，并且异步回发源自该 UpdatePanel 控件内部，则将显示任何关联的 UpdateProgress 控件。

　　创建 UpdateProgress 控件的内容

　　可使用 ProgressTemplate 属性以声明方式指定由 UpdateProgress 控件显示的消息。<ProgressTemplate> 元素可包含 HTML 和标记。下面的示例演示如何为 UpdateProgress 控件指定消息。

<asp:UpdateProgress　ID="UpdateProgress1"　runat="server">　
<ProgressTemplate>　
　An　update　is　in　progress...　
</ProgressTemplate>　
</asp:UpdateProgress>　
　

　　下面的示例演示一个 UpdateProgress 控件，该控件显示两个 UpdatePanel 控件的更新状态。

　　下面的示例演示两个 UpdateProgress 控件。每个控件都显示关联的 UpdatePanel 控件的更新状态。

　　下面的示例演示如何向 <ProgressTemplate> 元素添加一个按钮，用户可通过单击此按钮来停止异步回发。取消在另一个回发执行期间启动的任何新的回发。

<%@　Page　Language="VB"　%>　
　
<!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　Button_Click(ByVal　sender　As　Object,　ByVal　e　As　System.EventArgs)　
　　　　System.Threading.Thread.Sleep(3000)　
　　End　Sub　
</script>　
　
<html　xmlns="http://www.w3.org/1999/xhtml"　>　
<head　id="Head1"　runat="server">　
　　<title>UpdateProgress　Example</title>　
　　<style　type="text/css">　
　　#UpdatePanel1,　#UpdatePanel2,　#UpdateProgress1　{　
　　　border-right:　gray　1px　solid;　border-top:　gray　1px　solid;　
　　　border-left:　gray　1px　solid;　border-bottom:　gray　1px　solid;　　　
　　}　
　　#UpdatePanel1,　#UpdatePanel2　{　
　　　width:200px;　height:200px;　position:　relative;　
　　　float:　left;　margin-left:　10px;　margin-top:　10px;　
　　　}　
　　　#UpdateProgress1　{　
　　　width:　400px;　background-color:　#FFC080;　
　　　bottom:　0%;　left:　0px;　position:　absolute;　
　　　}　
　　</style>　
</head>　
<body>　
　　<form　id="form1"　runat="server">　
　　<div>　
　　<asp:ScriptManager　ID="ScriptManager1"　runat="server"　/>　
　　<script　type="text/javascript">　
　　var　prm　=　Sys.WebForms.PageRequestManager.getInstance();　
　　prm.add_initializeRequest(InitializeRequest);　
　　prm.add_endRequest(EndRequest);　
　　var　postBackElement;　
　　function　InitializeRequest(sender,　args)　{　
　　　　if　(prm.get_isInAsyncPostBack())　
　　　　{　
　　　　　args.set_cancel(true);　
　　　　}　
　　　　postBackElement　=　args.get_postBackElement();　
　　　　if　(postBackElement.id　==　'ButtonTrigger')　
　　　　{　
　　　　　$get('UpdateProgress1').style.display　=　"block";　
　　　　}　
　　}　
　　function　EndRequest　(sender,　args)　{　
　　　　if　(postBackElement.id　==　'ButtonTrigger')　
　　　　{　
　　　　　$get('UpdateProgress1').style.display　=　"none";　　　
　　　　}　
　　}　
　　function　AbortPostBack()　{　
　　　if　(prm.get_isInAsyncPostBack())　{　
　　　　　　prm.abortPostBack();　
　　　}　　　　　
　　}　
　　</script>　
　　<asp:Button　ID="ButtonTrigger"　runat="server"　Text="Refresh　Panel　1"　OnClick="Button_Click"　/>　　　
　　<asp:UpdatePanel　ID="UpdatePanel1"　UpdateMode="Conditional"　runat="server">　
　　<ContentTemplate>　
　　<%=DateTime.Now.ToString()　%>　<br　/>　
　　The　trigger　for　this　panel　
　　causes　the　UpdateProgress　to　be　displayed　
　　even　though　the　UpdateProgress　is　associated　
　　with　panel　2.　　　
　　<br　/>　
　　</ContentTemplate>　
　　<Triggers>　
　　　<asp:AsyncPostBackTrigger　ControlID="ButtonTrigger"　/>　
　　</Triggers>　
　　</asp:UpdatePanel>　
　　<asp:UpdatePanel　ID="UpdatePanel2"　UpdateMode="Conditional"　runat="server">　
　　<ContentTemplate>　
　　<%=DateTime.Now.ToString()　%>　<br　/>　
　　<asp:Button　ID="Button2"　runat="server"　Text="Refresh　Panel"　OnClick="Button_Click"/>　　　
　　</ContentTemplate>　
　　</asp:UpdatePanel>　
　　<asp:UpdateProgress　ID="UpdateProgress1"　runat="server"　AssociatedUpdatePanelID="UpdatePanel2"　>　
　　<ProgressTemplate>　
　　　Update　in　progress...　
　　　<input　type="button"　value="stop"　onclick="AbortPostBack()"　/>　
　　</ProgressTemplate>　
　　</asp:UpdateProgress>　
　　</div>　
　　</form>　
</body>　
</html>　
　

　　在上一示例中，<ProgressTemplate> 元素中的 HtmlButton 控件的 onClick 属性调用 JavaScript AbortPostBack 函数。

　　指定内容布局

　　当 DynamicLayout 属性为 true 时，UpdateProgress 控件最初不占用页面显示中的任何空间。而是页面根据需要动态更改以显示 UpdateProgress 控件内容。为了支持动态显示，该控件将作为 <div> 元素呈现，并且其 display 样式属性最初设置为 none

　　当 DynamicLayout 属性为 false 时，UpdateProgress 控件会占用页面显示中的空间，即使该控件不可见也是如此。在这种情况下，该控件的 <div> 元素的 display 样式属性设置为 block，并且其 visibility 最初设置为 hidden。

　　将 UpdateProgress 控件放置在页上

　　可将 UpdateProgress 控件放置在 UpdatePanel 控件的内部或外部。只要 UpdateProgress 控件关联的 UpdatePanel 控件因异步回发而被更新，就会显示该控件。即使 UpdateProgress 控件位于另一个 UpdatePanel 控件内也是这样。

　　如果 UpdatePanel 控件位于另一个更新面板中，则源自子面板内部的回发将导致显示任何与子面板关联的 UpdateProgress 控件。它还显示任何与父面板关联的 UpdateProgress 控件。如果回发源自父面板的直接子控件，则只显示与父面板关联的 UpdateProgress 控件。这将遵循如何触发回发的逻辑。

　　指定何时显示 UpdateProgress 控件

　　使用 PageRequestManager 类的 JavaScript beginRequest 和 endRequest 事件，可以以编程方式控制何时显示 UpdateProgress 控件。在 beginRequest 事件处理程序中，显示表示 UpdateProgress 控件的 DOM 元素。在 endRequest 事件处理程序中，隐藏该元素。

　　在以下情况下，必须提供客户端脚本以显示和隐藏 UpdateProgress 控件：

　　在从注册为更新面板的异步回发触发器的控件（但此控件不与 UpdateProgress 控件关联）进行回发的过程中。

　　在从以编程方式注册为异步回发控件的控件（通过使用 ScriptManager 控件的 RegisterAsyncPostBackControl 方法）进行回发的过程中。在这种情况下，UpdateProgress 控件不能自动确定是否已触发异步回发。

　　类参考

　　下表列出了与 [T:System.Web.UI.]UpdateProgress 类一起使用的关键类

类	说明
UpdateProgress	当更新 UpdatePanel 控件内容时，在浏览器中提供可视反馈。
UpdatePanel	指定可参与部分页更新的网页部分。
ScriptManager	管理部分页呈现。ScriptManager 控件为要发送到浏览器的脚本组件进行注册并重写页呈现，以便仅呈现指定的页面区域。
PageRequestManager	协调浏览器中的部分页呈现。PageRequestManager 类与服务器以异步方式交换信息，并公开用于自定义客户端脚本撰写的事件和方法

«
»

PHP教程

PHP简介 PHP基本语法 PHP类型 PHP变量 PHP运算符 PHP控制结构 PHP函数 PHP类与对象 PHP异常处理函数库分类