ASP.NET、AJAX、UpdateProgress 控件详细讲解

2014 年 11 月 8 日4160

方案
　　当网页包含一个或多个用于部分页呈现的 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 控件的更新状态。

<%@　Page　Language="VB"　%>　
　
<!DOCTYPE　html　PUBLIC　 "-//W3C//DTD　XHTML　1.0　Transitional//EN"　
　 "http://http://www.zjjv.com///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://http://www.zjjv.com///1999/xhtml"　>　
<head　 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　　runat="server">　
　　<div>　
　　 <asp:ScriptManager　ID="ScriptManager1"　runat="server"　/>　
　　 <asp:UpdatePanel　ID="UpdatePanel1"　UpdateMode="Conditional"　 runat="server">　
　　<ContentTemplate>　
　　 <%=DateTime.Now.ToString()　%>　<br　/>　
　　<asp:Button　　runat="server"　Text="Refresh　Panel"　OnClick="Button_Click"　 />　　　
　　</ContentTemplate>　
　　</asp:UpdatePanel>　
　　<asp:UpdatePanel　ID="UpdatePanel2"　UpdateMode="Conditional"　 runat="server">　
　　<ContentTemplate>　
　　 <%=DateTime.Now.ToString()　%>　<br　/>　
　　<asp:Button　　runat="server"　Text="Refresh　Panel"　/>　　　
　　</ContentTemplate>　
　　 </asp:UpdatePanel>　
　　<asp:UpdateProgress　　runat="server">　
　　<ProgressTemplate>　
　　　Update　in　progress...　
　　</ProgressTemplate>　
　　 </asp:UpdateProgress>　
　　</div>　
　　</form>　
</body> 　
</html>　
　

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

<%@　Page　Language="VB"　%>　
　
<!DOCTYPE　html　PUBLIC　 "-//W3C//DTD　XHTML　1.0　Transitional//EN"　
　 "http://http://www.zjjv.com///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://http://www.zjjv.com///1999/xhtml"　>　
<head　 runat="server">　
　　<title>UpdateProgress　 Example</title>　
　　<style　type="text/css">　
　　 #UpdatePanel1,　#UpdatePanel2　{　
　　　width:200px;　height:200px;　 position:　relative;　
　　　float:　left;　margin-left:　10px;　margin-top:　 10px;　
　　　border-right:　gray　1px　solid;　border-top:　gray　1px　solid;　
　　　border-left:　gray　1px　solid;　border-bottom:　gray　1px　solid;　
　　　}　
　　　#UpdateProgress1,　#UpdateProgress2　{　
　　　width:　200px;　 background-color:　#FFC080;　
　　　position:　absolute;　bottom:　0px;　left: 　0px;　
　　　}　
　　</style>　
</head>　
<body>　
　　<form　id="form1"　runat="server">　
　　<div>　
　　 <asp:ScriptManager　ID="ScriptManager1"　runat="server"　/>　
　　 <asp:UpdatePanel　ID="UpdatePanel1"　UpdateMode="Conditional"　 runat="server">　
　　<ContentTemplate>　
　　 <%=DateTime.Now.ToString()　%>　<br　/>　
　　<asp:Button　　runat="server"　Text="Refresh　Panel"　OnClick="Button_Click"　 />　　　
　　<asp:UpdateProgress　ID="UpdateProgress1"　 AssociatedUpdatePanelID="UpdatePanel1"　runat="server">　
　　 <ProgressTemplate>　
　　　UpdatePanel1　updating...　
　　 </ProgressTemplate>　
　　</asp:UpdateProgress>　
　　 </ContentTemplate>　
　　</asp:UpdatePanel>　
　　 <asp:UpdatePanel　ID="UpdatePanel2"　UpdateMode="Conditional"　 runat="server">　
　　<ContentTemplate>　
　　 <%=DateTime.Now.ToString()　%>　<br　/>　
　　<asp:Button　　runat="server"　Text="Refresh　Panel"　/>　　　
　　<asp:UpdateProgress　　AssociatedUpdatePanelID="UpdatePanel2"　 runat="server">　
　　<ProgressTemplate>　
　　　UpdatePanel2　 updating...　
　　</ProgressTemplate>　
　　 </asp:UpdateProgress>　
　　</ContentTemplate>　
　　 </asp:UpdatePanel>　
　　</div>　
　　</form>　
</body> 　
</html>　
　