UpdatePanel 简单实例 ASP.NET

最新推荐文章于 2025-08-23 22:00:30 发布

liang4571231

最新推荐文章于 2025-08-23 22:00:30 发布

阅读量966

点赞数

分类专栏： C#.net 文章标签： asp.net calendar server button asp 日历

C#.net 专栏收录该内容

177 篇文章

订阅专栏

本文介绍如何使用ASP.NET AJAX UpdatePanel控件创建具有独立更新区域的网页，包括控件的基本配置及嵌套使用方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

创建新页并切换到“设计”视图。
在工具箱的“AJAX Extensions”选项卡中，双击 ScriptManager 控件以将其添加到页面中。
在工具箱中双击 UpdatePanel 控件两次，以将两个 UpdatePanel 控件添加到页面中。
在“属性”窗口中，将这两个 UpdatePanel()()() 控件的 UpdateMode 属性均设置为 Conditional。
在其中一个 UpdatePanel 控件中，添加一个 Label 控件并将其 Text 属性设置为“已创建面板”。
在同一 UpdatePanel 控件中，添加一个 Button 控件并将其 Text 属性设置为“刷新面板”。
在另一个 UpdatePanel 控件中添加一个 Calendar 控件。
双击“刷新面板”按钮，为其 Click 事件添加事件处理程序。

将下面的代码添加到处理程序中，这会将 Label 控件设置为当前时间。

Visual Basic

复制代码

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

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

面板中的文本将变为显示上次刷新面板内容的时间。

在日历中，移动到不同的月份。

另一个面板中的时间不会发生更改。这两个面板的内容将单独更新。

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

复制代码

<%@ 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  >
<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 控件

创建新页并切换到“设计”视图。
在工具箱的“AJAX Extensions”选项卡中，双击 ScriptManager 控件以将其添加到页面中。
在工具箱中，双击 UpdatePanel 控件以将 UpdatePanel 控件添加到页面中。
单击 UpdatePanel 控件内部，然后在工具箱的“标准”选项卡中双击 Button 控件，将其添加到 UpdatePanel 控件。
将按钮的 Text 属性设置为“刷新外部面板”。
在“属性”窗口中，将 UpdatePanel()()() 控件的 UpdateMode 属性设置为 Conditional。
切换到“源”视图，然后在 <asp:UpdatePanel> 元素的 <ContentTemplate> 元素内添加下列代码。
Visual Basic

复制代码
```
Last refresh <%=DateTime.Now.ToString() %> <br />
```
C#

复制代码
```
Last refresh <%=DateTime.Now.ToString() %> <br />
```
该代码显示时间，并用于指示上次呈现标记的时间。
切换到“设计”视图，单击 UpdatePanel 控件内部，然后在第一个面板内部添加另一个 UpdatePanel 控件。
在“属性”窗口中，将嵌套的 UpdatePanel()()() 控件的 UpdateMode 属性设置为 Conditional。
在嵌套的 UpdatePanel 控件内部添加 Calendar 控件。
切换到“源”视图，然后在嵌套的 <asp:UpdatePanel> 元素的 <ContentTemplate> 元素内添加下列代码。
Visual Basic

复制代码
```
Last refresh <%=DateTime.Now.ToString() %> <br />
```
C#

复制代码
```
Last refresh <%=DateTime.Now.ToString() %> <br />
```

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

当移动到嵌套的 UpdatePanel 控件的日历中的上一个月或下一个月时，由于未重新呈现内容，因此外部面板的时间不会发生更改。相反，当单击外部面板中的按钮时，将刷新内部面板中的时间。由于默认情况下 Calendar 控件的 EnableViewState 属性为 true，因此日历不会发生更改。

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

复制代码

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

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


<html  >
<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>

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

说明：

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