共用方式為

UpdatePanel 控制項簡介

  • 發行項

更新：2007 年 11 月

本教學課程中，您要利用下列兩個 ASP.NET AJAX 伺服器控制項，把網頁局部更新支援加入至 Web 網頁：ScriptManager 控制項及 UpdatePanel 控制項。有了這些控制項，每次回傳時不必重新整理整個頁面，讓使用者更滿意。如需網頁局部更新的背景資料，請參閱網頁局部呈現概觀。

必要條件

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

  • Microsoft Visual Studio 2005 或 Microsoft Visual Web Developer Express 版。

  • 具備 AJAX 能力的 ASP.NET 網站。

使用 UpdatePanel 控制項

  1. 建立新頁面並切換至 [設計] 檢視。

  2. 在工具箱的 [AJAX 擴充功能] 索引標籤中，按兩下 ScriptManager 控制項，將它加入至網頁。

  3. 按兩下 UpdatePanel 控制項，將它加入至網頁。

  4. 按一下 UpdatePanel 控制項內部，然後在工具箱的 [標準] 索引標籤中，按兩下 Label 及 Button 控制項，將它們加入至 UpdatePanel 控制項。

    注意事項：

    請確定您已將 Label 與 Button 控制項加入至 UpdatePanel 控制項內部。

  5. 將 Label 的 Text 屬性設定為 Panel 已建立。

  6. 按兩下 Button 控制項，為按鈕的 Click 事件加入處理常式。

  7. 將下列程式碼加入至 Click 處理常式，以便把面板中標籤的值設定為目前的時間。

    Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs)
    Label1.Text = "Refreshed at " & _
        DateTime.Now.ToString()
End Sub

    protected void Button1_Click(object sender, EventArgs e)
{
    Label1.Text = "Refreshed at " +
        DateTime.Now.ToString();
}

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

  9. 按一下這個按鈕。

    請注意，面板內的文字會變更為顯示面板內容上次重新整理的時間。這些文字會設定在按鈕的 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)
        Label1.Text = "Refreshed at " & _
            DateTime.Now.ToString()
    End Sub
</script>

<html xmlns="http://www.w3.org/1999/xhtml" >
<head >
    <title>Untitled Page</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="Panel created."></asp:Label><br />
                <asp:Button ID="Button1"  OnClick="Button1_Click" Text="Button" />
                </fieldset>
            </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 Button1_Click(object sender, EventArgs e)
    {
        Label1.Text = "Refreshed at " +
            DateTime.Now.ToString();
    }
</script>

<html xmlns="http://www.w3.org/1999/xhtml" >
<head >
    <title>Untitled Page</title>
    <style type="text/css">
    #UpdatePanel1 { 
      width:300px; height:100px;
     }
    </style>
</head>
<body>
    <form id="form1" >
    <div style="padding-top: 10px">
        <asp:ScriptManager ID="ScriptManager1" >
        </asp:ScriptManager>
        <asp:UpdatePanel ID="UpdatePanel1" >
            <ContentTemplate>
                <fieldset>
                <legend>UpdatePanel</legend>
                <asp:Label ID="Label1"  Text="Panel created."></asp:Label><br />
                <asp:Button ID="Button1"  OnClick="Button1_Click" Text="Button" />
                </fieldset>
            </ContentTemplate>
        </asp:UpdatePanel>
        <br />
        </div>

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

    您每次按下按鈕時，面板內容都會變更，但不會重新整理整個頁面。根據預設，UpdatePanel 控制項的 ChildrenAsTriggers 屬性為 true。此屬性設定為 true 時，只要面板中的任何控制項引發回傳，面板內部的控制項就會參與網頁局部更新。

了解 UpdatePanel 控制項的優點

藉由將一些控制項加入至不包含在更新面板內的頁面上，可以了解 UpdatePanel 控制項的優點。您就可以觀察這些控制項跟更新面板內控制項的行為有何不同之處。

示範使用 UpdatePanel 控制項的優點

  1. 建立新頁面並切換至 [設計] 檢視。

  2. 在工具箱的 [AJAX 擴充功能] 索引標籤中，按兩下 ScriptManager 控制項，將它加入至網頁。

  3. 按兩下 UpdatePanel 控制項，將它加入至網頁。

  4. 按一下 UpdatePanel 控制項內部，然後在工具箱的 [標準] 索引標籤中，按兩下 Calendar 控制項，將它加入至 UpdatePanel 控制項。

    注意事項：

    請確定您已將 Calendar 控制項加入至 UpdatePanel 控制項內部。

  5. 按一下 UpdatePanel 控制項外部，然後將第二個 Calendar 控制項加入至頁面。

    此控制項將不會成為 UpdatePanel 控制項的一部分。

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

  7. 巡覽至 UpdatePanel 控制項內行事曆的上一個或下一個月份。

    顯示的月份會變更，但不會重新整理整個頁面。

  8. 巡覽至 UpdatePanel 控制項外行事曆的上一個或下一個月份

    整個頁面會重新整理。

    本範例的樣式是設計為以較佳方式顯示 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 >

</script>

<html xmlns="http://www.w3.org/1999/xhtml" >
<head >
    <title>UpdatePanel Tutorial</title>
    <style type="text/css">
    #UpdatePanel1 { 
      width:300px;
     }
    </style>
</head>
<body>
    <form id="form1" >
    <div>
        <asp:ScriptManager ID="ScriptManager1" >
        </asp:ScriptManager>
        <asp:UpdatePanel ID="UpdatePanel1" >
            <ContentTemplate>
                <fieldset>
                <legend>UpdatePanel</legend>
                <asp:Calendar ID="Calendar1" ></asp:Calendar>
                </fieldset>
            </ContentTemplate>
        </asp:UpdatePanel>
        <br />
        <asp:Calendar ID="Calendar2" ></asp:Calendar>    
    </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 >

</script>

<html xmlns="http://www.w3.org/1999/xhtml" >
<head >
    <title>UpdatePanel Tutorial</title>
    <style type="text/css">
    #UpdatePanel1 { 
      width:300px;
     }
    </style>
</head>
<body>
    <form id="form1" >
    <div>
        <asp:ScriptManager ID="ScriptManager1" >
        </asp:ScriptManager>
        <asp:UpdatePanel ID="UpdatePanel1" >
            <ContentTemplate>
                <fieldset>
                <legend>UpdatePanel</legend>
                <asp:Calendar ID="Calendar1" ></asp:Calendar>
                </fieldset>
            </ContentTemplate>
        </asp:UpdatePanel>
        <br />
        <asp:Calendar ID="Calendar2" ></asp:Calendar>    
    </div>
    </form>
</body>
</html>

使用外部按鈕重新整理 UpdatePanel 控制項

根據預設，UpdatePanel 控制項內部的回傳控制項 (如按鈕) 會導致網頁局部更新。如您所見，根據預設，UpdatePanel 控制項外部的按鈕或其他控制項會導致整個網頁重新整理。

您也可以將更新面板外部的控制項設定為僅重新整理更新面板的觸發程序。

使用外部按鈕重新整理 UpdatePanel 控制項

  1. 建立新頁面並切換至 [設計] 檢視。

  2. 在工具箱的 [AJAX 擴充功能] 索引標籤中，按兩下 ScriptManager 和 UpdatePanel 控制項，將它們加入至頁面。

  3. 按一下 UpdatePanel 控制項內部，然後在工具箱的 [標準] 索引標籤中，按兩下 Label 控制項，將它加入至 UpdatePanel 控制項。

  4. 把標籤的 Text 屬性設定為 Panel 已建立。

  5. 按一下 UpdatePanel 控制項外部，然後加入 Button 控制項。

  6. 按兩下 Button 控制項，為按鈕的 Click 事件加入處理常式。

  7. 將下列程式碼加入至 Click 處理常式，以便把面板中標籤的值設定為目前的時間。

    Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs)
    Label1.Text = "Refreshed at " & _
        DateTime.Now.ToString()
End Sub

    protected void Button1_Click(object sender, EventArgs e)
{
    Label1.Text = "Refreshed at " +
        DateTime.Now.ToString();
}

  8. 切換至 [設計] 檢視，選取 UpdatePanel 然後檢視 [屬性] 視窗。

    注意事項：

    [屬性] 視窗如果沒有顯示，請按 F4。

  9. 在 [觸發程序] 欄位中按兩下省略符號 (…) 按鈕。

    [UpdatePanelTrigger 集合編輯器] 對話方塊隨即顯示。

  10. 按一下 [加入] 以加入新觸發程序。

  11. 在觸發程序屬性的 [ControlID] 欄位中，使用下拉式清單選取 [Button1]。

    本範例未指定觸發程序的 [EventName] 屬性。因此，按鈕的預設事件 (Click 事件) 會觸發 UpdatePanel 控制項重新整理。

  12. 按一下集合編輯器裡的 [確定]。

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

  14. 按一下這個按鈕。

    面板中的文字會變更，顯示面板內容重新整理的時間。

  15. 多按幾次按鈕。

    時間會變更，但不會重新整理整個頁面。

    按一下 UpdatePanel 外部的按鈕，面板內容就會重新整理，因為您已將這個按鈕設定為 UpdatePanel 控制項的觸發程序。當您按下做為觸發程序的按鈕時，就會執行非同步回傳，並導致關聯的更新面板重新整理。這個行為與本教學課程第一個範例的行為相似，但該範例中，按鈕位於 UpdatePanel 內部。

    本範例的樣式是設計為以較佳方式顯示 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)
        Label1.Text = "Refreshed at " & _
            DateTime.Now.ToString()
    End Sub
</script>

<html xmlns="http://www.w3.org/1999/xhtml" >
<head >
    <title>UpdatePanel Tutorial</title>
    <style type="text/css">
    #UpdatePanel1 { 
      width:300px;
     }
    </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="Panel created."></asp:Label><br />
                </fieldset>
            </ContentTemplate>
            <Triggers>
                <asp:AsyncPostBackTrigger ControlID="Button1" />
            </Triggers>
        </asp:UpdatePanel>
        <asp:Button ID="Button1"  OnClick="Button1_Click" Text="Button" /></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)
    {
        Label1.Text = "Refreshed at " +
            DateTime.Now.ToString();
    }
</script>

<html xmlns="http://www.w3.org/1999/xhtml" >
<head >
    <title>UpdatePanel Tutorial</title>
    <style type="text/css">
    #UpdatePanel1 { 
      width:300px;
     }
    </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="Panel created."></asp:Label><br />
                </fieldset>
            </ContentTemplate>
            <Triggers>
                <asp:AsyncPostBackTrigger ControlID="Button1" />
            </Triggers>
        </asp:UpdatePanel>
        <asp:Button ID="Button1"  OnClick="Button1_Click" Text="Button" /></div>
    </form>
</body>
</html>

檢閱

本教學課程介紹一些基本概念，指導您用 UpdatePanel 控制項來啟用網頁局部更新功能。您務必先加入 ScriptManager 控制項，再加入 UpdatePanel 控制項。根據預設，執行回傳時，面板內部的控制項會導致面板重新整理。面板外部的控制項如果設定為面板的觸發程序，就會導致 UpdatePanel 重新整理。

下一個步驟是學習如何在頁面上加入多個 UpdatePanel 控制項。如需詳細資訊，請參閱使用多個 UpdatePanel 控制項建立簡單的 ASP.NET 頁面。

請參閱

概念

網頁局部呈現概觀

參考

UpdatePanel

ScriptManager