UpdateProgress 控制項概觀

  • 發行項

更新：2007 年 11 月

UpdateProgress 控制項提供有關 UpdatePanel 控制項中網頁局部更新的狀態資訊。您可以自訂 UpdateProgress 控制項的預設內容和配置。當網頁局部更新太快時，為了避免出現閃爍，您可以指定 UpdateProgress 控制項顯示之前的延遲時間。

本主題包含與下列項目相關的資訊：

  • 案例

  • 背景

  • 程式碼範例

  • 類別參考

案例

當 Web 網頁包含一個或多個網頁局部呈現的 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" >
<ProgressTemplate>
  An update is in progress...
</ProgressTemplate>
</asp:UpdateProgress>

<asp:UpdateProgress ID="UpdateProgress1" >
<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 >
    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 >
    <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" >
    <div>
    <asp:ScriptManager ID="ScriptManager1"  />
    <asp:UpdatePanel ID="UpdatePanel1" UpdateMode="Conditional" >
    <ContentTemplate>
    <%=DateTime.Now.ToString() %> <br />
    <asp:Button ID="Button1"  Text="Refresh Panel" OnClick="Button_Click" />    
    </ContentTemplate>
    </asp:UpdatePanel>
    <asp:UpdatePanel ID="UpdatePanel2" UpdateMode="Conditional" >
    <ContentTemplate>
    <%=DateTime.Now.ToString() %> <br />
    <asp:Button ID="Button2"  Text="Refresh Panel" OnClick="Button_Click"/>    
    </ContentTemplate>
    </asp:UpdatePanel>
    <asp:UpdateProgress ID="UpdateProgress1" >
    <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 >
    protected void Button_Click(object sender, EventArgs e)
    {
        System.Threading.Thread.Sleep(3000);
    }
</script>

<html xmlns="http://www.w3.org/1999/xhtml" >
<head >
    <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" >
    <div>
    <asp:ScriptManager ID="ScriptManager1"  />
    <asp:UpdatePanel ID="UpdatePanel1" UpdateMode="Conditional" >
    <ContentTemplate>
    <%=DateTime.Now.ToString() %> <br />
    <asp:Button ID="Button1"  Text="Refresh Panel" OnClick="Button_Click" />    
    </ContentTemplate>
    </asp:UpdatePanel>
    <asp:UpdatePanel ID="UpdatePanel2" UpdateMode="Conditional" >
    <ContentTemplate>
    <%=DateTime.Now.ToString() %> <br />
    <asp:Button ID="Button2"  Text="Refresh Panel" OnClick="Button_Click"/>    
    </ContentTemplate>
    </asp:UpdatePanel>
    <asp:UpdateProgress ID="UpdateProgress1" >
    <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 >
    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 >
    <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" >
    <div>
    <asp:ScriptManager ID="ScriptManager1"  />
    <asp:UpdatePanel ID="UpdatePanel1" UpdateMode="Conditional" >
    <ContentTemplate>
    <%=DateTime.Now.ToString() %> <br />
    <asp:Button ID="Button1"  Text="Refresh Panel" OnClick="Button_Click" />    
    <asp:UpdateProgress ID="UpdateProgress1" AssociatedUpdatePanelID="UpdatePanel1" >
    <ProgressTemplate>
      UpdatePanel1 updating...
    </ProgressTemplate>
    </asp:UpdateProgress>
    </ContentTemplate>
    </asp:UpdatePanel>
    <asp:UpdatePanel ID="UpdatePanel2" UpdateMode="Conditional" >
    <ContentTemplate>
    <%=DateTime.Now.ToString() %> <br />
    <asp:Button ID="Button2"  Text="Refresh Panel" OnClick="Button_Click"/>    
    <asp:UpdateProgress ID="UpdateProgress2" AssociatedUpdatePanelID="UpdatePanel2" >
    <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 >
    protected void Button_Click(object sender, EventArgs e)
    {
        System.Threading.Thread.Sleep(3000);
    }
</script>

<html xmlns="http://www.w3.org/1999/xhtml" >
<head >
    <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" >
    <div>
    <asp:ScriptManager ID="ScriptManager1"  />
    <asp:UpdatePanel ID="UpdatePanel1" UpdateMode="Conditional" >
    <ContentTemplate>
    <%=DateTime.Now.ToString() %> <br />
    <asp:Button ID="Button1"  Text="Refresh Panel" OnClick="Button_Click" />    
    <asp:UpdateProgress ID="UpdateProgress1" AssociatedUpdatePanelID="UpdatePanel1" >
    <ProgressTemplate>
      UpdatePanel1 updating...
    </ProgressTemplate>
    </asp:UpdateProgress>
    </ContentTemplate>
    </asp:UpdatePanel>
    <asp:UpdatePanel ID="UpdatePanel2" UpdateMode="Conditional" >
    <ContentTemplate>
    <%=DateTime.Now.ToString() %> <br />
    <asp:Button ID="Button2"  Text="Refresh Panel" OnClick="Button_Click"/>    
    <asp:UpdateProgress ID="UpdateProgress2" AssociatedUpdatePanelID="UpdatePanel2" >
    <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 >
    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" >
    <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" >
    <div>
    <asp:ScriptManager ID="ScriptManager1"  />
    <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"  Text="Refresh Panel 1" OnClick="Button_Click" />    
    <asp:UpdatePanel ID="UpdatePanel1" UpdateMode="Conditional" >
    <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" >
    <ContentTemplate>
    <%=DateTime.Now.ToString() %> <br />
    <asp:Button ID="Button2"  Text="Refresh Panel" OnClick="Button_Click"/>    
    </ContentTemplate>
    </asp:UpdatePanel>
    <asp:UpdateProgress ID="UpdateProgress1"  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 >
    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" >
    <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" >
    <div>
    <asp:ScriptManager ID="ScriptManager1"  />
    <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"  Text="Refresh Panel 1" OnClick="Button_Click" />    
    <asp:UpdatePanel ID="UpdatePanel1" UpdateMode="Conditional" >
    <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" >
    <ContentTemplate>
    <%=DateTime.Now.ToString() %> <br />
    <asp:Button ID="Button2"  Text="Refresh Panel" OnClick="Button_Click"/>    
    </ContentTemplate>
    </asp:UpdatePanel>
    <asp:UpdateProgress ID="UpdateProgress1"  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 函式。如需詳細資訊，請參閱 PageRequestManager 類別的 abortPostBack 方法和 isInAsyncPostBack 屬性。

指定內容配置

當 DynamicLayout 屬性為 true 時，UpdateProgress 控制項一開始不會佔用任何網頁顯示空間。相反地，網頁會視情況動態地變更顯示 UpdateProgress 控制項內容。為了支援動態顯示，控制項呈現為 <div> 項目，這個項目的 display 樣式屬性一開始會設定為 none。

當 DynamicLayout 屬性為 false 時，UpdateProgress 控制項會佔用網頁顯示空間，即使看不見控制項也一樣。在此情況下，控制項的 <div> 項目會將 display 樣式屬性設定為 block，且 visibility 一開始會設定為 hidden。

在頁面上放置 UpdateProgress 控制項

您可以將 UpdateProgress 控制項放在 UpdatePanel 控制項之內或之外。每次隨著非同步回傳而更新關聯的 UpdatePanel 控制項時，就會顯示 UpdateProgress 控制項。即使 UpdateProgress 控制項位於另一個 UpdatePanel 控制項內也一樣。

如果 UpdatePanel 控制項位於另一個更新面板內，源自子面板內的回傳會導致顯示任何與子面板關聯的 UpdateProgress 控制項。也會顯示與父面板關聯的任何 UpdateProgress 控制項。如果回傳源自父面板的直接子控制項，只會顯示與父面板關聯的 UpdateProgress 控制項。這符合回傳的觸發邏輯。

指定 UpdateProgress 控制項的顯示時機

您可以使用 PageRequestManager 類別的 JavaScript beginRequest 和 endRequest 事件，以程式設計方式控制何時顯示 UpdateProgress 控制項。在 beginRequest 事件處理常式中，顯示代表 UpdateProgress 控制項的 DOM 項目。在 endRequest 事件處理常式中，隱藏該項目。

在下列情況下，您必須提供用戶端指令碼來顯示和隱藏 UpdateProgress 控制項：

  • 在控制項回傳期間，這個控制項註冊為更新面板的非同步回傳觸發程式 (Trigger)，但未與 UpdateProgress 控制項產生關聯。

  • 在控制項回傳期間，這些控制項透過 ScriptManager 控制項的 RegisterAsyncPostBackControl 方法，以程式設計方式註冊為非同步回傳控制項。在此情況下，UpdateProgress 控制項無法自動判斷是否已觸發非同步回傳。

程式碼範例

下列章節包含建立和使用 [T:System.Web.UI.]UpdateProgress 控制項的程式碼範例。

教學課程

類別參考

下表列出與 [T:System.Web.UI.]UpdateProgress 類別一起使用的兩個重要類別。

Class

描述

UpdateProgress

當 UpdatePanel 控制項的內容更新時，在瀏覽器中提供視覺化回應。

UpdatePanel

指定可參與網頁局部更新的 Web 網頁部分。

ScriptManager

管理網頁局部呈現。ScriptManager 控制項會註冊要傳送至瀏覽器的指令碼元件，並覆寫網頁呈現，只呈現指定的網頁區域。

PageRequestManager

協調瀏覽器中的網頁局部呈現。PageRequestManager 類別會與伺服器非同步交換資訊，並公開自訂用戶端指令碼的事件與方法。

其他主題

ASP.NET 網頁存留週期概觀

請參閱

工作

UpdatePanel 控制項簡介

UpdateProgress 控制項簡介

在用戶端指令碼中撰寫 UpdateProgress 控制項程式

概念

UpdatePanel 控制項概觀