通过

UpdateProgress 控件概述

  • 项目

更新：2007 年 11 月

UpdateProgress 控件提供有关 UpdatePanel 控件中的部分页更新的状态信息。可以自定义 UpdateProgress 控件的默认内容和布局。若要在部分页更新的速度非常快时阻止闪烁，可以在显示 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>

<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>

<%@ Page Language="C#" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script runat="server">
    protected void Button_Click(object sender, EventArgs e)
    {
        System.Threading.Thread.Sleep(3000);
    }
</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>

下面的示例演示两个 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 { 
      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 ID="Button1" 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 ID="Button2" runat="server" Text="Refresh Panel" OnClick="Button_Click"/>    
    <asp:UpdateProgress ID="UpdateProgress2" AssociatedUpdatePanelID="UpdatePanel2" runat="server">
    <ProgressTemplate>
      UpdatePanel2 updating...
    </ProgressTemplate>
    </asp:UpdateProgress>
    </ContentTemplate>
    </asp:UpdatePanel>
    </div>
    </form>
</body>
</html>

<%@ Page Language="C#" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script runat="server">
    protected void Button_Click(object sender, EventArgs e)
    {
        System.Threading.Thread.Sleep(3000);
    }
</script>

<html xmlns="http://www.w3.org/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 ID="Button1" 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 ID="Button2" runat="server" Text="Refresh Panel" OnClick="Button_Click"/>    
    <asp:UpdateProgress ID="UpdateProgress2" AssociatedUpdatePanelID="UpdatePanel2" runat="server">
    <ProgressTemplate>
      UpdatePanel2 updating...
    </ProgressTemplate>
    </asp:UpdateProgress>
    </ContentTemplate>
    </asp:UpdatePanel>
    </div>
    </form>
</body>
</html>

下面的示例演示如何向 <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>

<%@ Page Language="C#" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script runat="server">
    protected void Button_Click(object sender, EventArgs e)
    {
        System.Threading.Thread.Sleep(3000);
    }
</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 函数。有关更多信息，请参见 abortPostBack 方法和 PageRequestManager 类的 isInAsyncPostBack 属性。

指定内容布局

当 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 控件的代码示例。

教程

类参考

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

类

说明

UpdateProgress

当更新 UpdatePanel 控件内容时，在浏览器中提供可视反馈。

UpdatePanel

指定可参与部分页更新的网页部分。

ScriptManager

管理部分页呈现。ScriptManager 控件为要发送到浏览器的脚本组件进行注册并重写页呈现，以便仅呈现指定的页面区域。

PageRequestManager

协调浏览器中的部分页呈现。PageRequestManager 类与服务器以异步方式交换信息，并公开用于自定义客户端脚本撰写的事件和方法。

其他主题

ASP.NET 页生命周期概述

请参见

任务

UpdatePanel 控件简介

UpdateProgress 控件介绍

在客户端脚本中为 UpdateProgress 控件编程

概念

UpdatePanel 控件概述