ASP.NET AJAX UpdateProgress控件概述

ASP.NET AJAX UpdateProgress控件概述2011-01-11 MSDN 方案

当网页包含一个或多个用于部分页呈现的 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://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 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" />
   <asp:UpdatePanel ID="UpdatePanel1" UpdateMode="Conditional" runat="server">
   <ContentTemplate>
   <%=DateTime.Now.ToString（） %> <br />
   <asp:Button ID="Button1" 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 ID="Button2" runat="server" Text="Refresh Panel" OnClick="Button_Click"/>
   </ContentTemplate>
   </asp:UpdatePanel>
   <asp:UpdateProgress ID="UpdateProgress1" runat="server">
   <ProgressTemplate>
    Update in progress...
   </ProgressTemplate>
   </asp:UpdateProgress>
   </div>
   </form>
</body>
</html>