UpdateProgress 控制項簡介

更新：2007 年 11 月

本教學課程指導您利用 UpdateProgress 控制項來顯示網頁局部更新的進度。如果網頁包含 UpdatePanel 控制項，您也可以包括 UpdateProgress 控制項，隨時告知使用者網頁局部更新的狀態。您可以用單一的 UpdateProgress 控制項來呈現整個網頁的網頁局部更新進度。也可以在每一個 UpdatePanel 控制項內加入 UpdateProgress 控制項。本教學課程將示範以上兩種模式。

必要條件

若要在自己的開發環境中實作這些程序，您需要：

Microsoft Visual Studio 2005 或 Visual Web Developer Express 版。
具備 AJAX 能力的 ASP.NET 網站。

使用單一的 UpdateProgress 控制項

一開始，您將使用單一的 UpdateProgress 控制項來顯示網頁上所有網頁局部更新的進度。

在整個網頁上使用單一的 UpdateProgress 控制項

建立新頁面並切換至 [設計] 檢視。
在工具箱的 [AJAX 擴充功能] 索引標籤中按兩下 ScriptManager 控制項，以便將該控制項加入至頁面。
按兩下 UpdatePanel 控制項，以便將該控制項加入至頁面。
按兩下 UpdateProgress 控制項，以便將該控制項加入至頁面。
在 UpdateProgress 控制項內，加入文字正在處理…。
在 UpdatePanel 控制項內加入一個 Label 控制項及一個 Button 控制項。
把 Label 控制項的 Text 屬性設定成已呈現初始頁面。
按兩下 Button 控制項，為按鈕的 Click 事件加入處理常式。

將下列程式碼加入 Click 處理常式，可用手動方式造成三秒鐘的延遲，然後顯示目前時間。

Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs)
    ' Introducing delay for demonstration.
    System.Threading.Thread.Sleep(3000)
    Label1.Text = "Page refreshed at " & _
        DateTime.Now.ToString()
End Sub

protected void Button1_Click(object sender, EventArgs e)
{
    // Introducing delay for demonstration.
    System.Threading.Thread.Sleep(3000);
    Label1.Text = "Page refreshed at " +
        DateTime.Now.ToString();       
}

注意事項：
在此教學課程中，Click 事件的處理常式會故意造成延遲。實際上，延遲並非由您造成。此延遲是因伺服端流量或需要長時間執行的伺服端程式碼 (例如，需長時間執行的資料庫查詢) 所造成。

儲存變更，然後按 CTRL+F5 在瀏覽器中檢視頁面。

按一下這個按鈕。

在短暫的延遲之後，會顯示進度訊息。Click 事件的處理常式完成後，進度訊息會隱藏，面板中顯示的時間會更新。

本範例的樣式是設定為以較佳方式顯示 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 Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs)
        ' Introducing delay for demonstration.
        System.Threading.Thread.Sleep(3000)
        Label1.Text = "Page refreshed at " & _
            DateTime.Now.ToString()
    End Sub
</script>

<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" >
    <title>UpdateProgress Tutorial</title>
    <style type="text/css">
    #UpdatePanel1 { 
      width:300px; height:100px;
     }
    </style>
</head>
<body>
    <form id="form1" >
    <div>
        <asp:ScriptManager ID="ScriptManager1" >
        </asp:ScriptManager>
        <asp:UpdatePanel ID="UpdatePanel1" >
            <ContentTemplate>
                <fieldset>
                <legend>UpdatePanel</legend>
                <asp:Label ID="Label1"  Text="Initial page rendered."></asp:Label><br />
                <asp:Button ID="Button1"  Text="Button" OnClick="Button1_Click" />
                </fieldset>
            </ContentTemplate>
        </asp:UpdatePanel>
        <asp:UpdateProgress ID="UpdateProgress1" >
            <ProgressTemplate>
                Processing...
            </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 Button1_Click(object sender, EventArgs e)
    {
        // Introducing delay for demonstration.
        System.Threading.Thread.Sleep(3000);
        Label1.Text = "Page refreshed at " +
            DateTime.Now.ToString();       
    }
</script>

<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" >
    <title>UpdateProgress Tutorial</title>
    <style type="text/css">
    #UpdatePanel1 { 
      width:300px; height:100px;
     }
    </style>
</head>
<body>
    <form id="form1" >
    <div>
        <asp:ScriptManager ID="ScriptManager1" >
        </asp:ScriptManager>
        <asp:UpdatePanel ID="UpdatePanel1" >
            <ContentTemplate>
                <fieldset>
                <legend>UpdatePanel</legend>
                <asp:Label ID="Label1"  Text="Initial page rendered."></asp:Label><br />
                <asp:Button ID="Button1"  Text="Button" OnClick="Button1_Click" />
                </fieldset>
            </ContentTemplate>
        </asp:UpdatePanel>
        <asp:UpdateProgress ID="UpdateProgress1" >
            <ProgressTemplate>
                Processing...
            </ProgressTemplate>
        </asp:UpdateProgress>

    </div>
    </form>
</body>
</html>

使用多個 UpdateProgress 控制項

網頁上的一個 UpdateProgress 控制項可為網頁上的所有 UpdatePanel 控制項顯示進度訊息。不過 UpdatePanel 控制項內部產生的非同步回傳會引發 UpdateProgress 控制項顯示自己的訊息。面板上，只要是觸發程序的控制項，其回傳也會顯示訊息。

您可以設定進度控制項的 AssociatedUpdatePanelID 屬性，讓 UpdateProgress 控制項與單一的 UpdatePanel 控制項產生關聯。如此，就只有當回傳事件來自關聯之 UpdatePanel 控制項內部時，UpdateProgress 控制項才會顯示訊息。

在下一個程序中，將兩個 UpdateProgress 控制項加入至網頁，每個控制項關聯到不同的 UpdatePanel 控制項。

在一個網頁上使用多個 UpdateProgress 控制項

建立新頁面並切換至 [設計] 檢視。
在工具箱的 [AJAX 擴充功能] 索引標籤中按兩下 ScriptManager 控制項，以便將該控制項加入至頁面。
按兩下 UpdatePanel 控制項兩次，將控制項的兩個執行個體加入網頁。
在每一個 UpdatePanel 控制項裡加入一個 Label 控制項和一個 Button 控制項。
將這兩個 Label 控制項的 Text 屬性都設定為一開始已呈現面板。
按兩下每個 Button 控制項，為每個按鈕的 Click 事件加入處理常式。

將下列程式碼加入每一個 Click 處理常式，可用手動方式造成三秒鐘的延遲，然後顯示目前時間。

Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs)
    ' Introducing delay for demonstration.
    System.Threading.Thread.Sleep(3000)
    Label1.Text = "Page refreshed at " & _
        DateTime.Now.ToString()
End Sub

Protected Sub Button2_Click(ByVal sender As Object, ByVal e As System.EventArgs)
    ' Introducing delay for demonstration.
    System.Threading.Thread.Sleep(3000)
    Label1.Text = "Page refreshed at " & _
        DateTime.Now.ToString()
End Sub

protected void Button1_Click(object sender, EventArgs e)
{
    // Introducing delay for demonstration.
    System.Threading.Thread.Sleep(3000);
    Label1.Text = "Page refreshed at " +
        DateTime.Now.ToString();       
}

protected void Button2_Click(object sender, EventArgs e)
{
    // Introducing delay for demonstration.
    System.Threading.Thread.Sleep(3000);
    Label2.Text = "Page refreshed at " +
        DateTime.Now.ToString();       

}

切換至 [設計] 檢視。
在第一個 UpdatePanel 控制項內按一下，然後加入 UpdateProgress 控制項。
在 UpdateProgress 控制項內加入文字 Panel1 正在更新。

這會設定 ProgressTemplate 屬性。
選取 UpdateProgress 控制項，然後在 [屬性] 視窗中，將 AssociatedUpdatePanelID 屬性設定為 UpdatePanel1。
在第二個 UpdatePanel 控制項內按一下，然後加入第二個 UpdateProgress 控制項。
將 UpdateProgress 控制項的文字設定成 Panel2 正在更新，並將它的 AssociatedUpdatePanelID 屬性設定成 UpdatePanel2。
儲存變更，然後按 CTRL+F5 在瀏覽器中檢視頁面。
按一下第一個面板裡的按鈕。

在短暫的延遲之後，會顯示與第一個面板關聯的進度訊息。其他 UpdateProgress 控制項不會顯示。

按一下第二個面板裡的按鈕。

在短暫的延遲之後，會顯示與第二個面板關聯的進度訊息。

注意事項：
預設中，一個非同步回傳如果還在進行中，就開始新的非同步回傳，則第一個回傳會被取消掉。如需詳細資訊，請參閱指定特定非同步回傳的優先順序。