通过

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

  • 项目

更新：2007 年 11 月

在本教程中，您将在页上使用多个 UpdatePanel 控件。通过在页上使用多个 UpdatePanel 控件，可以以增量方式单独或一起更新页面的各个区域。有关部分页更新的更多信息，请参见部分页呈现概述和 UpdatePanel 控件简介。

先决条件

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

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

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

创建具有两个独立更新区域的页

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

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

    UpdatePanel 教程

  3. 在工具箱中双击 UpdatePanel 控件两次，以将两个 UpdatePanel 控件添加到页面中。

  4. 在“属性”窗口中，将这两个 UpdatePanel() 控件的 UpdateMode 属性均设置为 Conditional。

    UpdatePanel 教程

  5. 在其中一个 UpdatePanel 控件中，添加一个 Label 控件并将其 Text 属性设置为“已创建面板”。

  6. 在同一 UpdatePanel 控件中，添加一个 Button 控件并将其 Text 属性设置为“刷新面板”。

  7. 在另一个 UpdatePanel 控件中添加一个 Calendar 控件。

    UpdatePanel 教程

  8. 双击“刷新面板”按钮，为其 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 runat="server">

    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 runat="server">
    <title>UpdatePanel Tutorial</title>
    <style type="text/css">
    #UpdatePanel1, #UpdatePanel2 { 
      width:300px; height:100px;
     }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:ScriptManager id="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <asp:UpdatePanel id="UpdatePanel1" runat="server">
            <ContentTemplate>
                <fieldset>
                <legend>UpdatePanel1</legend>
                <asp:Label ID="Label1" runat="server" Text="Panel Created"></asp:Label><br />
                <asp:Button ID="Button1" runat="server" Text="Refresh Panel 1" OnClick="Button1_Click" />
                </fieldset>
            </ContentTemplate>
        </asp:UpdatePanel>
        <asp:UpdatePanel ID="UpdatePanel2" runat="server">
            <ContentTemplate>
                <fieldset>
                <legend>UpdatePanel2</legend>
                <asp:Calendar ID="Calendar1" runat="server"></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 runat="server">

    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 runat="server">
    <title>UpdatePanel Tutorial</title>
    <style type="text/css">
    #UpdatePanel1, #UpdatePanel2 { 
      width:300px; height:100px;
     }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:ScriptManager id="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <asp:UpdatePanel id="UpdatePanel1" runat="server">
            <ContentTemplate>
                <fieldset>
                <legend>UpdatePanel1</legend>
                <asp:Label ID="Label1" runat="server" Text="Panel Created"></asp:Label><br />
                <asp:Button ID="Button1" runat="server" Text="Refresh Panel 1" OnClick="Button1_Click" />
                </fieldset>
            </ContentTemplate>
        </asp:UpdatePanel>
        <asp:UpdatePanel ID="UpdatePanel2" runat="server">
            <ContentTemplate>
                <fieldset>
                <legend>UpdatePanel2</legend>
                <asp:Calendar ID="Calendar1" runat="server"></asp:Calendar>
                </fieldset>
            </ContentTemplate>
        </asp:UpdatePanel>

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

    默认情况下，UpdatePanel 控件的 ChildrenAsTriggers 属性为 true。如果将此属性设置为 true，则无论面板内的哪个控件导致回发，面板内的控件都会参与部分页更新。

嵌套 UpdatePanel 控件

在某些情况下，使用嵌套 UpdatePanel 控件可让您提供在其他情况下很难提供的 UI 功能。当您希望能够在单独刷新页的特定区域的同时刷新多个区域时，嵌套的面板将很有用。通过将外部控件和嵌套控件的 UpdateMode 属性设置为 Conditional 可实现这一点。这会导致在仅刷新内部面板的情况下，外部面板不会刷新其页面区域。但是，如果刷新外部面板，则嵌套的面板也会刷新。

在下面的示例中，简单地演示了这一概念。

嵌套 UpdatePanel 控件

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

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

  3. 在工具箱中，双击 UpdatePanel 控件以将 UpdatePanel 控件添加到页面中。

    UpdatePanel 教程

  4. 单击 UpdatePanel 控件内部，然后在工具箱的**“标准”**选项卡中双击 Button 控件，将其添加到 UpdatePanel 控件。

  5. 将按钮的 Text 属性设置为“刷新外部面板”。

    UpdatePanel 教程

  6. 在“属性”窗口中，将 UpdatePanel() 控件的 UpdateMode 属性设置为 Conditional。

    UpdatePanel 教程

  7. 切换到“源”视图，然后在 <asp:UpdatePanel> 元素的 <ContentTemplate> 元素内添加下列代码。

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

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

    该代码显示时间，并用于指示上次呈现标记的时间。

  8. 切换到“设计”视图，单击 UpdatePanel 控件内部，然后在第一个面板内部添加另一个 UpdatePanel 控件。

  9. 在“属性”窗口中，将嵌套的 UpdatePanel() 控件的 UpdateMode 属性设置为 Conditional。

    UpdatePanel 教程

  10. 在嵌套的 UpdatePanel 控件内部添加 Calendar 控件。

    UpdatePanel 教程

  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 runat="server">
    <title>UpdatePanel Tutorial</title>
    <style type="text/css">
    #UpdatePanel2  {
      position: relative;
      margin: 2% 5% 2% 5%;
    }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:ScriptManager id="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <asp:UpdatePanel id="UpdatePanel1" UpdateMode="Conditional" runat="server">
            <ContentTemplate>
                <fieldset>
                <legend>Parent UpdatePanel</legend>
                Last refresh <%=DateTime.Now.ToString() %> <br />
                <asp:Button ID="Button1" runat="server" Text="Refresh Outer Panel" />
                <asp:UpdatePanel ID="UpdatePanel2" runat="server">
                    <ContentTemplate>
                        <fieldset>
                        <legend>Nested UpdatePanel</legend>
                         Last refresh <%=DateTime.Now.ToString() %> <br />
                        <asp:Calendar ID="Calendar1" runat="server"></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 runat="server">
    <title>UpdatePanel Tutorial</title>
    <style type="text/css">
    #UpdatePanel2  {
      position: relative;
      margin: 2% 5% 2% 5%;
    }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:ScriptManager id="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <asp:UpdatePanel id="UpdatePanel1" UpdateMode="Conditional" runat="server">
            <ContentTemplate>
                <fieldset>
                <legend>Parent UpdatePanel</legend>
                Last refresh <%=DateTime.Now.ToString() %> <br />
                <asp:Button ID="Button1" runat="server" Text="Refresh Outer Panel" />
                <asp:UpdatePanel ID="UpdatePanel2" runat="server">
                    <ContentTemplate>
                        <fieldset>
                        <legend>Nested UpdatePanel</legend>
                         Last refresh <%=DateTime.Now.ToString() %> <br />
                        <asp:Calendar ID="Calendar1" runat="server"></asp:Calendar>
                        </fieldset>
                    </ContentTemplate>
                </asp:UpdatePanel>
                </fieldset>
            </ContentTemplate>
        </asp:UpdatePanel>
    </div>
    </form>
</body>
</html>
    Bb398867.alert_note(zh-cn,VS.90).gif说明：

    只显示尚未更新的 Calendar 控件。默认情况下，当呈现日历时，会将其设置为当前月份和日期。不过，在此步骤中，当您单击按钮时，日历会显示您先前选择的月份和日期。页将在背后使用 Calendar 控件的视图状态，以呈现显示您选定的月份和日期的日历。这阐释了 UpdatePanel 控件将执行相应的逻辑以确保页在异步回发之后处于所需的状态。可以通过将 Calendar 控件的 EnableViewState 属性设置为 false 并再次运行这些步骤来测试这一点。在这种情况下，无论移动到哪个月份，只要单击按钮，日历就将恢复为显示当前月份。

回顾

本教程介绍了在页上使用多个 UpdatePanel 控件的概念。当 UpdatePanel 控件未嵌套时，可以通过将 UpdateMode 属性设置为 Conditional 来单独更新每个面板。（UpdateMode 属性的默认值为 Always。这将导致面板进行刷新以响应任何异步回发。）

当嵌套面板时，行为会稍有不同。如果将外部控件和嵌套控件的 UpdateMode 属性设置为 Conditional，则可以在不刷新外部面板的情况下刷新内部面板。但是，如果刷新外部更新面板，则内部更新面板也会刷新。

请参见

任务

UpdatePanel 控件简介

概念

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