使用多個 UpdatePanel 控制項建立簡單的 ASP.NET 頁面

  • 發行項

更新：2007 年 11 月

在此教學課程中，您將會在頁面上使用多個 UpdatePanel 控制項。透過在頁面上使用多個 UpdatePanel 控制項，您可用遞增方式單獨或同時更新頁面的多個區域。如需網頁局部更新的詳細資訊，請參閱網頁局部呈現概觀與UpdatePanel 控制項簡介。

必要條件

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

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

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

建立具有兩個獨立更新區域的頁面

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

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

  3. 按兩下工具箱中的 UpdatePanel 控制項兩次，將兩個 UpdatePanel 控制項加入至頁面。

  4. 在 [屬性] 視窗中，將兩個 UpdatePanel() 控制項的 UpdateMode 屬性設定為 Conditional。

  5. 在其中一個 UpdatePanel 控制項中，加入 Label 控制項，並將其 Text 屬性設定為 Panel Created。

  6. 在相同的 UpdatePanel 控制項中，加入 Button 控制項，並將其 Text 屬性設定為 Refresh Panel。

  7. 在另一個 UpdatePanel 控制項中，加入 Calendar 控制項。

  8. 按兩下 [Refresh Panel] 按鈕，為其 Click 事件加入事件處理常式。

  9. 將下列程式碼加入至處理常式，這樣可將 Label 控制項設定為目前的時間。

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

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

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

  11. 按一下這個按鈕。

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

  12. 在月曆中，移動到不同的月份。

    其他面板中的時間不會變更。兩個面板中的內容會獨立更新。

    本範例的樣式是為了以較佳的方式顯示 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 = "Panel 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, #UpdatePanel2 { 
      width:300px; height:100px;
     }
    </style>
</head>
<body>
    <form id="form1" >
    <div>
        <asp:ScriptManager id="ScriptManager1" >
        </asp:ScriptManager>
        <asp:UpdatePanel id="UpdatePanel1" >
            <ContentTemplate>
                <fieldset>
                <legend>UpdatePanel1</legend>
                <asp:Label ID="Label1"  Text="Panel Created"></asp:Label><br />
                <asp:Button ID="Button1"  Text="Refresh Panel 1" OnClick="Button1_Click" />
                </fieldset>
            </ContentTemplate>
        </asp:UpdatePanel>
        <asp:UpdatePanel ID="UpdatePanel2" >
            <ContentTemplate>
                <fieldset>
                <legend>UpdatePanel2</legend>
                <asp:Calendar ID="Calendar1" ></asp:Calendar>
                </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 = "Panel refreshed at " +
            DateTime.Now.ToString();
    }
</script>

<html xmlns="http://www.w3.org/1999/xhtml" >
<head >
    <title>UpdatePanel Tutorial</title>
    <style type="text/css">
    #UpdatePanel1, #UpdatePanel2 { 
      width:300px; height:100px;
     }
    </style>
</head>
<body>
    <form id="form1" >
    <div>
        <asp:ScriptManager id="ScriptManager1" >
        </asp:ScriptManager>
        <asp:UpdatePanel id="UpdatePanel1" >
            <ContentTemplate>
                <fieldset>
                <legend>UpdatePanel1</legend>
                <asp:Label ID="Label1"  Text="Panel Created"></asp:Label><br />
                <asp:Button ID="Button1"  Text="Refresh Panel 1" OnClick="Button1_Click" />
                </fieldset>
            </ContentTemplate>
        </asp:UpdatePanel>
        <asp:UpdatePanel ID="UpdatePanel2" >
            <ContentTemplate>
                <fieldset>
                <legend>UpdatePanel2</legend>
                <asp:Calendar ID="Calendar1" ></asp:Calendar>
                </fieldset>
            </ContentTemplate>
        </asp:UpdatePanel>

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

    根據預設，UpdatePanel 控制項的 ChildrenAsTriggers 屬性為 true。此屬性設定為 true 時，只要面板中的任何控制項引發回傳，面板內部的控制項就會參與網頁局部更新。

將 UpdatePanel 控制項巢狀化

在某些案例中，將 UpdatePanel 控制項巢狀化可讓您提供原本難以提供的 UI 功能。當您要個別重新整理特定頁面區域以及同時重新整理多個區域時，巢狀面板非常有用。您可以將巢狀外部與同部控制項的 UpdateMode 屬性設定為 Conditional，以完成此動作。若只有內部面板重新整理，此設定將造成外部面板無法重新整理其頁面區域。不過，若重新整理外部面板，也會重新整理巢狀面板。

下列範例示範此概念簡化的形式。

將 UpdatePanel 控制項巢狀化

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

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

  3. 在工具箱中，按兩下 UpdatePanel 控制項以將 UpdatePanel 控制項加入至頁面。

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

  5. 將按鈕的 Text 屬性設定為 Refresh Outer Panel。

  6. 在 [屬性] 視窗中，將 UpdatePanel() 控制項的 UpdateMode 屬性設定為 Conditional。

  7. 切換至 [原始碼] 檢視，並將下列程式碼加入至 <asp:UpdatePanel> 項目的 <ContentTemplate> 項目內部。

    Last refresh <%=DateTime.Now.ToString() %> <br />

    Last refresh <%=DateTime.Now.ToString() %> <br />

    程式碼會顯示時間，而且會用於指示上次呈現標記的時間。

  8. 切換至 [設計] 檢視、按一下 UpdatePanel 控制項內部，然後將第二個 UpdatePanel 控制項加入至第一個面板內部。

  9. 在 [屬性] 視窗中，將巢狀 UpdatePanel() 控制項的 UpdateMode 屬性設定為 Conditional。

  10. 在巢狀 UpdatePanel 控制項內部加入 Calendar 控制項。

  11. 切換至 [原始碼] 檢視，並在巢狀 <asp:UpdatePanel> 項目的 <ContentTemplate> 項目內部加入下列程式碼。

    Last refresh <%=DateTime.Now.ToString() %> <br />

    Last refresh <%=DateTime.Now.ToString() %> <br />

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

    當您將巢狀 UpdatePanel 控制項中的月曆移動到上一個月或下一個月時，外部面板的時間不會變更，因為內容不會重新呈現。相反地，當您按一下外部面板中的按鈕時，內部面板中的時間會重新整理。月曆不會變更，因為 Calendar 控制項的 EnableViewState 屬性預設為 true。

    本範例的樣式設定為以較佳方式顯示 UpdatePanel 控制項所表示的頁面區域。

    <%@ Page Language="VB" %>

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


<html xmlns="http://www.w3.org/1999/xhtml" >
<head >
    <title>UpdatePanel Tutorial</title>
    <style type="text/css">
    #UpdatePanel2  {
      position: relative;
      margin: 2% 5% 2% 5%;
    }
    </style>
</head>
<body>
    <form id="form1" >
    <div>
        <asp:ScriptManager id="ScriptManager1" >
        </asp:ScriptManager>
        <asp:UpdatePanel id="UpdatePanel1" UpdateMode="Conditional" >
            <ContentTemplate>
                <fieldset>
                <legend>Parent UpdatePanel</legend>
                Last refresh <%=DateTime.Now.ToString() %> <br />
                <asp:Button ID="Button1"  Text="Refresh Outer Panel" />
                <asp:UpdatePanel ID="UpdatePanel2" >
                    <ContentTemplate>
                        <fieldset>
                        <legend>Nested UpdatePanel</legend>
                         Last refresh <%=DateTime.Now.ToString() %> <br />
                        <asp:Calendar ID="Calendar1" ></asp:Calendar>
                        </fieldset>
                    </ContentTemplate>
                </asp:UpdatePanel>
                </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">


<html xmlns="http://www.w3.org/1999/xhtml" >
<head >
    <title>UpdatePanel Tutorial</title>
    <style type="text/css">
    #UpdatePanel2  {
      position: relative;
      margin: 2% 5% 2% 5%;
    }
    </style>
</head>
<body>
    <form id="form1" >
    <div>
        <asp:ScriptManager id="ScriptManager1" >
        </asp:ScriptManager>
        <asp:UpdatePanel id="UpdatePanel1" UpdateMode="Conditional" >
            <ContentTemplate>
                <fieldset>
                <legend>Parent UpdatePanel</legend>
                Last refresh <%=DateTime.Now.ToString() %> <br />
                <asp:Button ID="Button1"  Text="Refresh Outer Panel" />
                <asp:UpdatePanel ID="UpdatePanel2" >
                    <ContentTemplate>
                        <fieldset>
                        <legend>Nested UpdatePanel</legend>
                         Last refresh <%=DateTime.Now.ToString() %> <br />
                        <asp:Calendar ID="Calendar1" ></asp:Calendar>
                        </fieldset>
                    </ContentTemplate>
                </asp:UpdatePanel>
                </fieldset>
            </ContentTemplate>
        </asp:UpdatePanel>
    </div>
    </form>
</body>
</html>
    注意事項：

    Calendar 控制項看起來好像沒有更新。根據預設，重新整理月曆時，它會設定為目前的月份與日期。不過，在此步驟中，當您按一下按鈕時，月曆會顯示您先前選取的月份與日期。在封面下，頁面會使用 Calendar 控制項的檢視狀態，以您選取的月份與日期來呈現月曆。這說明 UpdatePanel 控制項執行適當的邏輯，以確定非同步回傳後頁面處於預期的狀態。您可以將 Calendar 控制項的 EnableViewState 屬性設定為 false 並再次執行這些步驟，以測試此狀態。在該案例中，不論您移動到哪個月份，當您按一下該按鈕時，月曆將會還原為顯示目前月份。

檢閱

此教學課程介紹使用網頁上多個 UpdatePanel 控制項的概念。當 UpdatePanel 控制項未巢狀化時，您可以將 UpdateMode 屬性設定為 Conditional，以獨立更新每個面板。(UpdateMode 屬性的預設值是 Always。這會造成面板重新整理以回應任何非同步回傳)。

當面板巢狀化時，行為會有些許不同。若將外部控制項與巢狀控制項的 UpdateMode 屬性設定為 Conditional，可以重新整理內部面板，而不需重新整理外部面板。不過，若重新整理外部更新面板，也會重新整理內部更新面板。

請參閱

工作

UpdatePanel 控制項簡介

概念

搭配資料繫結控制項使用 ASP.NET UpdatePanel 控制項