通过

将 ASP.NET UpdatePanel 控件用于母版页

更新：2007 年 11 月

任何包含 UpdatePanel 控件的 ASP.NET 页还需要 ScriptManager 控件。若要将 UpdatePanel 控件用于母版页，则可以将 ScriptManager 控件放置在母版页上。在此情况下，母版页将为每个内容页提供一个 ScriptManager 控件。如果不希望为个别内容页启用部分页更新，则可以为这些页禁用部分页更新。

也可以将 ScriptManager 控件放置在每个内容页上。如果只有一些内容页将包含 UpdatePanel 控件，则可能需要这样做。

先决条件

若要在您自己的开发环境中实现这些过程，您需要：

  • Visual Web Developer 速成版或 Microsoft Visual Studio 2005。

  • 一个支持 AJAX 的 ASP.NET 网站。

向内容页添加 UpdatePanel 控件

  1. 创建新母版页并切换到“设计”视图。

  2. 在工具箱的**“AJAX Extensions”**选项卡中，双击 ScriptManager 控件以将其添加到页面中。确保将 ScriptManager 控件添加到 ContentPlaceHolder 控件外部。

  3. 在 ContentPlaceHolder 控件外部，添加文本“母版页”。

  4. 从工具箱的**“HTML”选项卡中，将“水平规则”**元素拖动到文本的后面。

    UpdatePanel 教程

  5. 创建母版页的内容页。

    在解决方案资源管理器中，右击项目的名称，然后单击**“添加新项”。在“添加新项”对话框中，选中“选择母版页”复选框，再单击“确定”**。

  6. 在 Content 控件内部，键入文本“内容页”，再从工具箱添加 UpdatePanel 控件。

    UpdatePanel 教程

  7. 在 UpdatePanel 控件内部添加 Calendar 控件。

    UpdatePanel 教程

  8. 保存更改，然后按 Ctrl+F5 在浏览器中查看页面。

  9. 单击日历上的下个月和上个月控件。

    日历将发生更改而不刷新整个页面。当日历位于与母版页不关联的页上的 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" runat="server">
        <contenttemplate>
        <fieldset>
        <legend>UpdatePanel</legend>
           <asp:Calendar id="Calendar1" runat="server"></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" runat="server">
        <contenttemplate>
        <fieldset>
        <legend>UpdatePanel</legend>
           <asp:Calendar id="Calendar1" runat="server"></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 runat="server">

</script>

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>UpdatePanel in Master Pages</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        Master Page<br />
        <hr />
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <br />
        <asp:contentplaceholder id="ContentPlaceHolder1" runat="server">
        </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 runat="server">

</script>

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>UpdatePanel in Master Pages</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        Master Page<br />
        <hr />
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <br />
        <asp:contentplaceholder id="ContentPlaceHolder1" runat="server">
        </asp:contentplaceholder>
    </div>
    </form>
</body>
</html>

从母版页刷新 UpdatePanel

在本部分教程中，您会将控件添加到母版页，这将导致异步回发，然后刷新内容页上的 UpdatePanel 控件。

为所有内容页启用部分页更新

  1. 在母版页中切换到“设计”视图。

  2. 将文本和两个按钮添加到母版页上的 ScriptManager 控件后面。

  3. 将其中一个按钮的 ID 设置为 DecrementButton，并将其 Text 值设置为“-”。将另一个按钮的 ID 设置为 IncrementButton，并将其 Text 值设置为“+”。

    UpdatePanel 教程

    这两个按钮将增加和减少内容页的日历上选定的日期。

  4. 选择 +（加号）按钮，然后在“属性”窗口的工具栏中，单击“事件”按钮并在**“单击”**框中输入 MasterButton_Click。

    UpdatePanel 教程

  5. 对 -（减号）按钮重复上述步骤。

  6. 在控件外部双击页以创建 Page_Load 事件处理程序。

  7. 在处理程序中添加以下代码以将这两个按钮注册为异步回发控件：

    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);
}

  8. 添加以下代码以创建名为 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;
}

  9. 添加以下代码以在母版页中创建名为 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;}
}

  10. 在内容页中，切换到“设计”视图，然后双击 Calendar 控件以便为 SelectionChanged 事件创建事件处理程序。

  11. 将下列代码添加到 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;
}

  12. 切换到内容页，然后添加 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;
}

  13. 向页添加 @ MasterType 指令，以便可以引用母版页的 Offset 属性作为强类型属性。

    <%@ MasterType VirtualPath="MasterPage.master" %>

    <%@ MasterType VirtualPath="MasterPage.master" %>

  14. 在内容页中，切换到“设计”视图并选择 UpdatePanel 控件。

  15. 在“属性”窗口中，将 UpdatePanelUpdateMode 属性设置为 Conditional。

    UpdatePanel 教程

  16. 保存更改，然后按 Ctrl+F5 在浏览器中查看页面。

  17. 单击日历上的下个月和上个月控件。

    日历将发生更改而不刷新整个页面。

  18. 选择日历上的一个日期，然后单击母版页上的按钮以更改选定的日期。

    将发生这些更改而不会刷新整个页面。

    示例设置的样式可以更好地显示 UpdatePanel 控件表示的页面区域。

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

<script runat="server">
    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" runat="server" UpdateMode="Conditional">
        <ContentTemplate>
        <fieldset>
        <legend>UpdatePanel</legend>
           <asp:Calendar id="Calendar1" runat="server" 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 runat="server">
    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" runat="server" UpdateMode="Conditional">
        <ContentTemplate>
        <fieldset>
        <legend>UpdatePanel</legend>
           <asp:Calendar id="Calendar1" runat="server" 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 runat="server">
    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" runat="server">
    <title>UpdatePanel in Master Pages</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        Master Page<br />
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        Change date &nbsp;
        <asp:Button ID="DecrementButton" runat="server" Text="-" OnClick="MasterButton_Click" />
        <asp:Button ID="IncrementButton" runat="server" Text="+" OnClick="MasterButton_Click" />
        <hr />
        <br />
        <asp:contentplaceholder id="ContentPlaceHolder1" runat="server">
        </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 runat="server">
    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" runat="server">
    <title>UpdatePanel in Master Pages</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        Master Page<br />
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        Change date &nbsp;
        <asp:Button ID="DecrementButton" runat="server" Text="-" OnClick="MasterButton_Click" />
        <asp:Button ID="IncrementButton" runat="server" Text="+" OnClick="MasterButton_Click" />
        <hr />
        <br />
        <asp:contentplaceholder id="ContentPlaceHolder1" runat="server">
        </asp:contentplaceholder>
    </div>
    </form>
</body>
</html>

为内容页禁用部分页更新

如果向母版页添加 ScriptManager 控件，则默认情况下将为所有内容页启用部分页更新。如果不希望为个别内容页启用部分页更新，则可以禁用此功能。如果内容页包含与部分页更新不兼容的自定义控件，则可能需要这样做。

为内容页禁用部分页更新

回顾

本教程演示如何在母版页中使用 UpdatePanel 控件。如果母版页中存在 ScriptManager 控件，则可以在内容页中使用 UpdatePanel 控件，而无需在内容页中声明 ScriptManager 控件。

若要为单个内容页（其母版页已启用部分页呈现）禁用部分页呈现，请以编程方式为内容页禁用部分页呈现。

请参见

任务

UpdatePanel 控件简介

创建具有多个 UpdatePanel 控件的简单 ASP.NET 页

概念

ASP.NET 母版页概述

将 ASP.NET UpdatePanel 控件与数据绑定控件一起使用

参考

UpdatePanel

ScriptManager