教學課程：如何使用兩個獨立更新區域建立網頁

發行項
10/11/2017

在本教學課程中，您將在網頁上使用多個 UpdatePanel 控制項。在網頁上使用多個 UpdatePanel 控制項，可讓您分別或同時對網頁區域進行漸進式更新。如需有關部分頁面更新的詳細資訊，請參閱部分網頁呈現概觀。

所有 ASP.NET AJAX 控制項皆有賴 web.config 檔案中的特定設定，才能正常運作。在嘗試使用此類控制項時，若網站中沒有必要的 web.config 檔案，則會顯示該控制項的網頁即會在 [設計] 檢視中出現錯誤。若您在 [設計] 檢視中按一下處於該狀態的控制項，Microsoft Expression Web 將會讓您選擇建立新的 web.config 檔案，或更新現有的 web.config 檔案。

建立兩個獨立更新區域的網頁

在 [檔案] 功能表上，指向 [開新檔案]，然後按一下 [ASPX]。
將游標放置於 ASPX 網頁的 [設計] 檢視中。
在 [工具箱] 工作窗格中的 [ASP.NET 控制項] 下方，按兩下 AJAX 下的 [ScriptManager] 控制項，將其新增至網頁中。若出現對話方塊詢問您是否要新增 web.config 檔案至網站中以支援 .NET Framework 3.5 版，請按一下 [是]。若出現對話方塊詢問您是否要為隱藏式控制項開啟 [視覺輔助工具]，請按一下 [是]。
在 [工具箱] 工作窗格中的 [ASP.NET 控制項] 下方，按兩下 AJAX 下的 UpdatePanel 控制項兩次，將其新增至網頁中。
在您的網頁中選取其中一個 UpdatePanel 控制項後，在 [標籤屬性] 工作窗格中，將 [UpdateMode] 屬性設為 [條件]。對其他 UpdatePanel 控制項重複此步驟。
在 [工具箱] 工作窗格的 [ASP.NET 控制項] 與 [標準] 類別下，將 [Label] 控制項拖曳至 [設計] 檢視的其中一個 UpdatePanel 控制項中。
在您的網頁中選取 Label 控制項後，在 [標籤屬性] 工作窗格中將 [Text] 屬性設為 [建立的面板]。
在 [工具箱] 工作窗格的 [ASP.NET 控制項] 與 [標準] 類別下方，將 [Button] 控制項拖曳至 Label 控制項所在的相同 UpdatePanel 控制項中。
在您的網頁中選取按鈕後，在 [標籤屬性] 工作窗格中將 [Text] 屬性設為 [重新整理面板]。
在 [工具箱] 工作窗格的 [ASP.NET 控制項] 與 [標準] 類別下方，將 [Calendar] 控制項拖曳至 [設計] 檢視的其他 UpdatePanel 控制項中。

在網頁的 [程式碼] 檢視中，根據網頁的 [網頁語言]，在 </head> 標籤前新增下列其中一個程式碼範例。

<script runat="server" type="text/c#">
    protected void Button1_Click(object sender, EventArgs e)
    {
        Label1.Text = "Panel refreshed at " +
            DateTime.Now.ToString();
    }
</script>

<script runat="server" type="text/vb">
    Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs)
        Label1.Text = "Panel refreshed at " & _
            DateTime.Now.ToString()
    End Sub
</script>

在 [程式碼] 檢視中找出標籤 <asp:Button runat="server" Text="Refresh Panel" id="Button1" />，然後在該標籤中加入 "OnClick="Button1_Click"。
按一下 [檔案] 功能表中的 [儲存]。
按下 F12 在網頁瀏覽器中預覽網頁。

在網頁的網頁瀏覽器中，按一下按鈕。面板內的文字會轉而顯示面板前次重新整理的內容。在行事曆中移至不同的月份。其他面板中的時間不會變更。兩個面板的內容會各自更新。

下表顯示最後一頁程式碼：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@ Page Language="C#" %>
<html dir="ltr" xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled 2</title>
<script runat="server" type="text/c#">
    protected void Button1_Click(object sender, EventArgs e)
    {
        Label1.Text = "Panel refreshed at " +
            DateTime.Now.ToString();
    }
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager runat="server" id="ScriptManager1">
</asp:ScriptManager>
<asp:UpdatePanel runat="server" id="UpdatePanel1" UpdateMode="Conditional">
<ContentTemplate>
<asp:Label runat="server" Text="Panel Created" id="Label1">
</asp:Label>
<asp:Button runat="server" Text="Refresh Panel" id="Button1" OnClick="Button1_Click"/>
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdatePanel runat="server" id="UpdatePanel2" UpdateMode="Conditional">
<ContentTemplate>
<asp:Calendar runat="server" id="Calendar1">
</asp:Calendar>
</ContentTemplate>
</asp:UpdatePanel>
</form>
</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@ Page Language="VB" %>
<html dir="ltr" xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled 2</title>
<script runat="server" type="text/vb">
    Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs)
        Label1.Text = "Panel refreshed at " & _
            DateTime.Now.ToString()
    End Sub
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager runat="server" id="ScriptManager1">
</asp:ScriptManager>
<asp:UpdatePanel runat="server" id="UpdatePanel1" UpdateMode="Conditional">
<ContentTemplate>
<asp:Label runat="server" Text="Panel Created" id="Label1">
</asp:Label>
<asp:Button runat="server" Text="Refresh Panel" id="Button1" OnClick="Button1_Click"/>
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdatePanel runat="server" id="UpdatePanel2" UpdateMode="Conditional">
<ContentTemplate>
<asp:Calendar runat="server" id="Calendar1">
</asp:Calendar>
</ContentTemplate>
</asp:UpdatePanel>
</form>
</body>
</html>

檢閱

此教學課程介紹在網頁中使用多個 UpdatePanel 控制項的概念。若 UpdatePanel 控制項並非巢狀控制項，您可以將 UpdateMode 屬性設為 [條件]，以個別更新每個面板。(UpdateMode 屬性的預設值為 [永遠]。如此會讓面板針對所有非同步的回傳進行重新整理。)

巢狀面板的行為將略有不同。若您將外部控制項與巢狀控制項的 UpdateMode 屬性都設為 [條件]，內部面板即可自行重新整理，而無須重新整理外部面板。但若外部更新面板重新整理，內部更新面板也會隨之重新整理。

如需使用 UpdatePanel 控制項的其他教學課程，請至 MSDN Library 參閱 UpdatePanel (英文) 中「How-to」與「逐步解說」主題下的連結。雖然這些教學課程針對 Microsoft Visual Web Developer 所編寫，但其內容仍值得參考，只要注意 Microsoft Expression Web 中的少數例外即可。

請參閱

概念

部分網頁呈現概觀

UpdatePanel 控制項

ScriptManager 控制項

教學課程：如何使用兩個獨立更新區域建立網頁

建立兩個獨立更新區域的網頁

請參閱

概念

其他資源