搭配主版頁面使用 ASP.NET UpdatePanel 控制項

發行項
10/22/2014

更新：2007 年 11 月

包含 UpdatePanel 控制項的任何 ASP.NET 頁面也都需要 ScriptManager 控制項。若要使用 UpdatePanel 控制項來搭配主版頁面，您可以在主版頁面上放置 ScriptManager 控制項。在這個案例中，主版頁面為每個內容頁提供 ScriptManager 控制項。若不想為個別內容頁啟用網頁局部更新，可以停用那些頁面的網頁局部更新。

或者，您可以在每個內容頁上放置 ScriptManager 控制項。若只有某些內容頁將會包含 UpdatePanel 控制項，您可能會這樣做。

必要條件

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

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

將 UpdatePanel 控制項加入至內容頁

建立新的主版頁面並切換至 [設計] 檢視。
在工具箱的 [AJAX 擴充功能] 索引標籤中，按兩下 ScriptManager 控制項將它加入至網頁。請確定您有將 ScriptManager 控制項加到 ContentPlaceHolder 控制項外部。
在 ContentPlaceHolder 控制項外加入文字 Master Page。
從工具箱的 [HTML] 索引標籤中，將 [水平尺規] 項目拖曳至文字後方。
建立用於主版頁面的內容頁。

在 [方案總管] 中，以滑鼠右鍵按一下專案名稱，然後再按一下 [加入新項目]。在 [加入新項目] 對話方塊中，選取 [選取主版頁面] 核取方塊，然後按一下 [確定]。
在 Content 控制項內輸入文字內容頁，然後從工具箱加入 UpdatePanel 控制項。
將 Calendar 控制項加入至 UpdatePanel 控制項內。
儲存變更，然後按 CTRL+F5 在瀏覽器中檢視頁面。

按一下月曆中的下一個月與上一個月控制項。

月曆會變更，但不會重新整理整個頁面。當月曆位於未與主版頁面產生關聯之頁面上的 UpdatePanel 控制項內時，這將會是您所預期的行為。

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

<%@ Page Language="VB" MasterPageFile="MasterPage.master" Title="UpdatePanel in Master Pages" %>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
    Content Page<br />
    <asp:UpdatePanel id="UpdatePanel1" >
        <contenttemplate>
        <fieldset>
        <legend>UpdatePanel</legend>
           <asp:Calendar id="Calendar1" ></asp:Calendar>
        </fieldset>
        </contenttemplate>
    </asp:UpdatePanel>
</asp:Content>

<%@ Page Language="C#" MasterPageFile="MasterPage.master" Title="UpdatePanel in Master Pages" %>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
    Content Page<br />
    <asp:UpdatePanel id="UpdatePanel1" >
        <contenttemplate>
        <fieldset>
        <legend>UpdatePanel</legend>
           <asp:Calendar id="Calendar1" ></asp:Calendar>
        </fieldset>
        </contenttemplate>
    </asp:UpdatePanel>
</asp:Content>

<%@ Master 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 in Master Pages</title>
</head>
<body>
    <form id="form1" >
    <div>
        Master Page<br />
        <hr />
        <asp:ScriptManager ID="ScriptManager1" >
        </asp:ScriptManager>
        <br />
        <asp:contentplaceholder id="ContentPlaceHolder1" >
        </asp:contentplaceholder>
    </div>
    </form>
</body>
</html>

<%@ Master 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 in Master Pages</title>
</head>
<body>
    <form id="form1" >
    <div>
        Master Page<br />
        <hr />
        <asp:ScriptManager ID="ScriptManager1" >
        </asp:ScriptManager>
        <br />
        <asp:contentplaceholder id="ContentPlaceHolder1" >
        </asp:contentplaceholder>
    </div>
    </form>
</body>
</html>

從主版頁面重新整理 UpdatePanel

在教學課程的這個部分，您會將控制項加入至主版頁面，而該控制項會導致非同步回傳並接著重新整理內容頁上的 UpdatePanel 控制項。

啟用所有內容頁的網頁局部更新

在主版頁面中，切換至 [設計] 檢視。
在主版頁面的 ScriptManager 控制項後方加入文字與兩個按鈕。
將其中一個按鈕的 ID 設定為 DecrementButton，並將其 Text 值設定為 "-"。將另一個按鈕的 ID 設定為 IncrementButton，並將其 Text 值設定為 "+"。

這兩個按鈕可以讓內容頁之月曆上選取的日期遞增或遞減。
選取 + (加號) 按鈕，然後在 [屬性] 視窗的工具列上，按一下 [事件] 按鈕並在 [Click] 方塊中輸入 MasterButton_Click。
為 - (減號) 按鈕重複上述步驟。
按兩下控制項以外的頁面以建立 Page_Load 事件處理常式。

在處理常式中加入下列程式碼，將兩個按鈕註冊為非同步回傳控制項：

Protected Sub Page_Load(ByVal Sender As Object, ByVal E As EventArgs)
    ScriptManager1.RegisterAsyncPostBackControl(DecrementButton)
    ScriptManager1.RegisterAsyncPostBackControl(IncrementButton)
End Sub

protected void Page_Load(object sender, EventArgs e)
{
    ScriptManager1.RegisterAsyncPostBackControl(DecrementButton);
    ScriptManager1.RegisterAsyncPostBackControl(IncrementButton);
}

加入下列程式碼以建立名為 MasterButton_Click 的 Click 處理常式：

Protected Sub MasterButton_Click(ByVal Sender As Object, ByVal E As EventArgs)

    Select Case Sender.ID

        Case "IncrementButton"
            Me.Offset = Me.Offset + 1
        Case "DecrementButton"
            Me.Offset = Me.Offset - 1
    End Select
    Dim upl As UpdatePanel
    upl = ContentPlaceHolder1.FindControl("UpdatePanel1")
    upl.Update()
    Dim cal As Calendar
    cal = ContentPlaceHolder1.FindControl("Calendar1")
    Dim newDateTime As DateTime
    newDateTime = DateTime.Today.Add(New TimeSpan(Offset, 0, 0, 0))
    cal.SelectedDate = newDateTime
End Sub

protected void MasterButton_Click(object sender, EventArgs e)
{   
    switch (((Control)sender).ID)
    {
        case "IncrementButton":
            this.Offset = this.Offset + 1;
            break;
        case "DecrementButton":
            this.Offset = this.Offset - 1;
            break;
    }
    ((UpdatePanel)ContentPlaceHolder1.FindControl("UpdatePanel1")).Update();
    Calendar cal = ((Calendar)ContentPlaceHolder1.FindControl("Calendar1"));
    DateTime newDateTime = DateTime.Today.Add(new TimeSpan(Offset, 0, 0, 0));
    cal.SelectedDate = newDateTime;
}

加入下列程式碼，以在主版頁面中建立名為 Offset 的公用屬性，此屬性可追蹤當天日期與所選取日期之間的差異。

Public Property Offset() As Integer
    Get
        If ViewState("Offset") Is Nothing Then
            Return 0
        Else : Return ViewState("Offset")
        End If
    End Get
    Set(ByVal value As Integer)
        ViewState("Offset") = value
    End Set
End Property

public Int32 Offset
{
    get
    { return (Int32)(ViewState["Offset"] ?? 0);}
    set
    { ViewState["Offset"] = value;}
}

在內容頁中，切換至 [設計] 檢視，然後按兩下 Calendar 控制項以建立 SelectionChanged 事件的事件處理常式。

將下列程式碼加入至 SelectionChanged 事件處理常式，在使用者選取日期時設定 Offset 屬性。

Protected Sub Calendar1_SelectionChanged(ByVal Sender As Object, ByVal E As EventArgs)
    Dim selectedDate As DateTime
    selectedDate = Calendar1.SelectedDate
    Master.Offset = _
       Calendar1.SelectedDate.Subtract(DateTime.Today).Days

End Sub

protected void Calendar1_SelectionChanged(object sender, 
    EventArgs e)
{
    DateTime selectedDate = Calendar1.SelectedDate;
    Master.Offset =
       ((TimeSpan)Calendar1.SelectedDate.Subtract(
       DateTime.Today)).Days;
}

切換至內容頁並加入 Page_Load 事件處理常式，此事件處理常式會將月曆的選取日期設定為目前日期。

Protected Sub Page_Load(ByVal Sender As Object, ByVal E As EventArgs)
    Dim newDateTime As DateTime
    newDateTime = DateTime.Today.Add(New TimeSpan(Master.Offset, 0, 0, 0))
    Calendar1.SelectedDate = newDateTime
End Sub

protected void Page_Load(object sender, EventArgs e)
{
    DateTime newDateTime = 
        DateTime.Today.Add(new 
        TimeSpan(Master.Offset, 0, 0, 0));
    Calendar1.SelectedDate = newDateTime;
}

將 @ MasterType 指示詞加入至頁面，以便將主版頁面 Offset 屬性指定為強型別屬性。
```
<%@ MasterType VirtualPath="MasterPage.master" %>
```
```
<%@ MasterType VirtualPath="MasterPage.master" %>
```
在內容頁中切換至 [設計] 檢視，然後選取 UpdatePanel 控制項。
在 [屬性] 視窗中，將 UpdatePanelUpdateMode 屬性設定成 Conditional。
儲存變更，然後按 CTRL+F5 在瀏覽器中檢視頁面。
按一下月曆中的下一個月與上一個月控制項。

月曆會變更，但不會重新整理整個頁面。

選取月曆上的日期，然後按一下主版頁面上的按鈕以變更選取的日期。

日期會變更，但不會重新整理整個頁面。

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

<%@ Page Language="VB" MasterPageFile="MasterPage.master" Title="UpdatePanel in Master Pages" %>
<%@ MasterType VirtualPath="MasterPage.master" %>

<script >
    Protected Sub Page_Load(ByVal Sender As Object, ByVal E As EventArgs)
        Dim newDateTime As DateTime
        newDateTime = DateTime.Today.Add(New TimeSpan(Master.Offset, 0, 0, 0))
        Calendar1.SelectedDate = newDateTime
    End Sub
    Protected Sub Calendar1_SelectionChanged(ByVal Sender As Object, ByVal E As EventArgs)
        Dim selectedDate As DateTime
        selectedDate = Calendar1.SelectedDate
        Master.Offset = _
           Calendar1.SelectedDate.Subtract(DateTime.Today).Days

    End Sub
</script>

<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
    Content Page<br />
    <asp:UpdatePanel id="UpdatePanel1"  UpdateMode="Conditional">
        <ContentTemplate>
        <fieldset>
        <legend>UpdatePanel</legend>
           <asp:Calendar id="Calendar1"  OnSelectionChanged="Calendar1_SelectionChanged"></asp:Calendar> 
        </fieldset>
        </ContentTemplate>
    </asp:UpdatePanel>
</asp:Content>

<%@ Page Language="C#" MasterPageFile="MasterPage.master" Title="UpdatePanel in Master Pages" %>
<%@ MasterType VirtualPath="MasterPage.master" %>

<script >
    protected void Page_Load(object sender, EventArgs e)
    {
        DateTime newDateTime = 
            DateTime.Today.Add(new 
            TimeSpan(Master.Offset, 0, 0, 0));
        Calendar1.SelectedDate = newDateTime;
    }
    protected void Calendar1_SelectionChanged(object sender, 
        EventArgs e)
    {
        DateTime selectedDate = Calendar1.SelectedDate;
        Master.Offset =
           ((TimeSpan)Calendar1.SelectedDate.Subtract(
           DateTime.Today)).Days;
    }
</script>

<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
    Content Page<br />
    <asp:UpdatePanel id="UpdatePanel1"  UpdateMode="Conditional">
        <ContentTemplate>
        <fieldset>
        <legend>UpdatePanel</legend>
           <asp:Calendar id="Calendar1"  OnSelectionChanged="Calendar1_SelectionChanged"></asp:Calendar> 
        </fieldset>
        </ContentTemplate>
    </asp:UpdatePanel>
</asp:Content>

<%@ Master Language="VB" %>

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

<script >
    Public Property Offset() As Integer
        Get
            If ViewState("Offset") Is Nothing Then
                Return 0
            Else : Return ViewState("Offset")
            End If
        End Get
        Set(ByVal value As Integer)
            ViewState("Offset") = value
        End Set
    End Property
    Protected Sub MasterButton_Click(ByVal Sender As Object, ByVal E As EventArgs)

        Select Case Sender.ID

            Case "IncrementButton"
                Me.Offset = Me.Offset + 1
            Case "DecrementButton"
                Me.Offset = Me.Offset - 1
        End Select
        Dim upl As UpdatePanel
        upl = ContentPlaceHolder1.FindControl("UpdatePanel1")
        upl.Update()
        Dim cal As Calendar
        cal = ContentPlaceHolder1.FindControl("Calendar1")
        Dim newDateTime As DateTime
        newDateTime = DateTime.Today.Add(New TimeSpan(Offset, 0, 0, 0))
        cal.SelectedDate = newDateTime
    End Sub
    Protected Sub Page_Load(ByVal Sender As Object, ByVal E As EventArgs)
        ScriptManager1.RegisterAsyncPostBackControl(DecrementButton)
        ScriptManager1.RegisterAsyncPostBackControl(IncrementButton)
    End Sub
</script>

<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" >
    <title>UpdatePanel in Master Pages</title>
</head>
<body>
    <form id="form1" >
    <div>
        Master Page<br />
        <asp:ScriptManager ID="ScriptManager1" >
        </asp:ScriptManager>
        Change date &nbsp;
        <asp:Button ID="DecrementButton"  Text="-" OnClick="MasterButton_Click" />
        <asp:Button ID="IncrementButton"  Text="+" OnClick="MasterButton_Click" />
        <hr />
        <br />
        <asp:contentplaceholder id="ContentPlaceHolder1" >
        </asp:contentplaceholder>
    </div>
    </form>
</body>
</html>

<%@ Master Language="C#" %>

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

<script >
    public Int32 Offset
    {
        get
        { return (Int32)(ViewState["Offset"] ?? 0);}
        set
        { ViewState["Offset"] = value;}
    }
    protected void MasterButton_Click(object sender, EventArgs e)
    {   
        switch (((Control)sender).ID)
        {
            case "IncrementButton":
                this.Offset = this.Offset + 1;
                break;
            case "DecrementButton":
                this.Offset = this.Offset - 1;
                break;
        }
        ((UpdatePanel)ContentPlaceHolder1.FindControl("UpdatePanel1")).Update();
        Calendar cal = ((Calendar)ContentPlaceHolder1.FindControl("Calendar1"));
        DateTime newDateTime = DateTime.Today.Add(new TimeSpan(Offset, 0, 0, 0));
        cal.SelectedDate = newDateTime;
    }
    protected void Page_Load(object sender, EventArgs e)
    {
        ScriptManager1.RegisterAsyncPostBackControl(DecrementButton);
        ScriptManager1.RegisterAsyncPostBackControl(IncrementButton);
    }
</script>

<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" >
    <title>UpdatePanel in Master Pages</title>
</head>
<body>
    <form id="form1" >
    <div>
        Master Page<br />
        <asp:ScriptManager ID="ScriptManager1" >
        </asp:ScriptManager>
        Change date &nbsp;
        <asp:Button ID="DecrementButton"  Text="-" OnClick="MasterButton_Click" />
        <asp:Button ID="IncrementButton"  Text="+" OnClick="MasterButton_Click" />
        <hr />
        <br />
        <asp:contentplaceholder id="ContentPlaceHolder1" >
        </asp:contentplaceholder>
    </div>
    </form>
</body>
</html>

停用內容頁的網頁局部更新

如果您將 ScriptManager 控制項加入至主版頁面，預設會為所有內容頁啟用網頁局部更新。如果不想為個別內容頁啟用部分更新，可以停用該功能。若內容頁包含與網頁局部更新不相容的自訂控制項，您可能想要這樣做。

停用內容頁的網頁局部更新

在內容頁中，建立頁面之 Init 事件的處理常式，此事件會將 ScriptManager 控制項的 EnablePartialRendering 屬性設定為 false。

您必須在內容頁的 Init 事件執行期間或執行之前變更 EnablePartialRendering 屬性的狀態。

檢閱

此教學課程說明如何在主版頁面中使用 UpdatePanel 控制項。若主版頁面中有 ScriptManager 控制項，您可以在內容頁上使用 UpdatePanel 控制項，而不需要在該內容頁上宣告 ScriptManager 控制項。

若要停用個別內容頁 (假設其主版頁面已啟用網頁局部呈現) 的網頁局部呈現，請以程式設計方式停用該內容頁的網頁局部呈現。

請參閱

共用方式為

搭配主版頁面使用 ASP.NET UpdatePanel 控制項

必要條件

將 UpdatePanel 控制項加入至內容頁

從主版頁面重新整理 UpdatePanel

啟用所有內容頁的網頁局部更新

停用內容頁的網頁局部更新

停用內容頁的網頁局部更新

檢閱

請參閱

工作

概念

參考

其他資源