UpdatePanel 控件简介

UpdatePanel 控件简介

全部折叠全部展开代码：全部代码：多种代码：Visual Basic 代码：C# 代码：Visual C++ 代码：F# 代码：JScript

UpdatePanel 控件简介

在本教程中，您将使用两个 Microsoft Ajax 服务器控件（ScriptManager 控件和 UpdatePanel 控件）向网页中添加部分页更新支持。这些控件可移除所有回发的整页刷新请求，这可改善用户体验。有关部分页更新的更多背景信息，请参见部分页呈现概述。

系统必备

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

Microsoft Visual Studio 2005 或 Microsoft Visual Web Developer 学习版。
一个支持 AJAX 的 ASP.NET 网站。

使用 UpdatePanel 控件

创建新页并切换到“设计”视图。
在工具箱的“AJAX Extensions”选项卡中，双击 ScriptManager 控件，将其添加到页中。
双击 UpdatePanel 控件，将其添加到页中。
单击 UpdatePanel 控件内部，然后在工具箱的“标准”选项卡中双击 Label 和 Button 控件以将它们添加到 UpdatePanel 控件中。

说明

确保将 Label 和 Button 控件添加到 UpdatePanel 控件内。
将 Label 的 Text 属性设置为“已创建的面板”。
双击 Button 控件，以为该按钮的 Click 事件添加处理程序。

说明
确保将 Label 和 Button 控件添加到 UpdatePanel 控件内。

将下面的代码添加到 Click 处理程序中，这些代码可将面板中标签的值设置为当前时间。

Visual Basic

Copy Code

Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs)
    Label1.Text = "Refreshed at " & _
        DateTime.Now.ToString()
End Sub

Copy Code

protected void Button1_Click(object sender, EventArgs e)
{
    Label1.Text = "Refreshed at " +
        DateTime.Now.ToString();
}

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

单击按钮。

注意，面板中的文本会发生变化，以显示面板内容的上次刷新时间。此文本在按钮的 Click 事件处理程序中设置。

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

Visual Basic

Copy Code

<%@ 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 = "Refreshed at " & _
            DateTime.Now.ToString()
    End Sub
</script>

<html  >
<head runat="server">
    <title>Untitled Page</title>
    <style type="text/css">
    #UpdatePanel1 { 
      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>UpdatePanel</legend>
                <asp:Label ID="Label1" runat="server" Text="Panel created."></asp:Label><br />
                <asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Button" />
                </fieldset>
            </ContentTemplate>
        </asp:UpdatePanel>

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

Copy Code

<%@ 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 = "Refreshed at " +
            DateTime.Now.ToString();
    }
</script>

<html  >
<head runat="server">
    <title>Untitled Page</title>
    <style type="text/css">
    #UpdatePanel1 { 
      width:300px; height:100px;
     }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div style="padding-top: 10px">
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate>
                <fieldset>
                <legend>UpdatePanel</legend>
                <asp:Label ID="Label1" runat="server" Text="Panel created."></asp:Label><br />
                <asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Button" />
                </fieldset>
            </ContentTemplate>
        </asp:UpdatePanel>
        <br />
        </div>

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

每次单击按钮时面板内容都会发生更改，但不会刷新整个页面。默认情况下，UpdatePanel 控件的 ChildrenAsTriggers 属性为 true。如果将此属性设置为 true，则无论面板内的哪个控件导致回发，面板内的控件都会参与部分页更新。

理解 UpdatePanel 控件的优点

将某些更新面板中没有的控件添加到页面中是理解 UpdatePanel 控件的优点的最佳途径。然后，您就可以观察这些控件的行为与更新面板内部的控件的行为有何不同。

演示使用 UpdatePanel 控件的优点

创建新页并切换到“设计”视图。
在工具箱的“AJAX Extensions”选项卡中，双击 ScriptManager 控件，将其添加到页中。
双击 UpdatePanel 控件，将其添加到页中。
单击 UpdatePanel 控件内部，然后在工具箱的“标准”选项卡中双击 Calendar 控件以将其添加到 UpdatePanel 控件中。

说明

确保将 Calendar 控件添加到 UpdatePanel 控件内部。
单击 UpdatePanel 控件的外部，然后将另一个 Calendar 控件添加到页面中。

此控件将不是 UpdatePanel 控件的一部分。
保存更改，然后按 Ctrl+F5 在浏览器中查看页面。
在位于 UpdatePanel 控件内的日历中导航到上个月或下个月。

所显示的月份将发生更改，但不会刷新整个页面。

说明
确保将 Calendar 控件添加到 UpdatePanel 控件内部。

在位于 UpdatePanel 控件外的日历中导航到上个月或下个月。

这将刷新整个页面。

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

Visual Basic

Copy Code

<%@ 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">

</script>

<html  >
<head runat="server">
    <title>UpdatePanel Tutorial</title>
    <style type="text/css">
    #UpdatePanel1 { 
      width:300px;
     }
    </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>UpdatePanel</legend>
                <asp:Calendar ID="Calendar1" runat="server"></asp:Calendar>
                </fieldset>
            </ContentTemplate>
        </asp:UpdatePanel>
        <br />
        <asp:Calendar ID="Calendar2" runat="server"></asp:Calendar>    
    </div>
    </form>
</body>
</html>

Copy Code

<%@ 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">

</script>

<html  >
<head runat="server">
    <title>UpdatePanel Tutorial</title>
    <style type="text/css">
    #UpdatePanel1 { 
      width:300px;
     }
    </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>UpdatePanel</legend>
                <asp:Calendar ID="Calendar1" runat="server"></asp:Calendar>
                </fieldset>
            </ContentTemplate>
        </asp:UpdatePanel>
        <br />
        <asp:Calendar ID="Calendar2" runat="server"></asp:Calendar>    
    </div>
    </form>
</body>
</html>

使用外部按钮刷新 UpdatePanel 控件

默认情况下，UpdatePanel 控件内的回发控件（如按钮）会导致部分页更新。如您所见，默认情况下，UpdatePanel 控件外的按钮或其他控件会导致刷新整个页面。

您还可以将更新面板外部的控件配置为仅刷新更新面板的触发器。

使用外部按钮刷新 UpdatePanel 控件

创建新页并切换到“设计”视图。
在工具箱的“AJAX Extensions”选项卡中，双击 ScriptManager 控件和 UpdatePanel 控件，以将每种控件中的一个添加到页面中。
单击 UpdatePanel 控件内部，然后在工具箱的“标准”选项卡中双击 Label 控件，以将其添加到 UpdatePanel 控件中。
将标签的 Text 属性设置为“已创建的面板”。
单击 UpdatePanel 控件的外部，然后添加一个 Button 控件。
双击 Button 控件，以为该按钮的 Click 事件添加处理程序。

将下面的代码添加到 Click 处理程序中，这些代码可将面板中标签的值设置为当前时间。

Visual Basic

Copy Code

Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs)
    Label1.Text = "Refreshed at " & _
        DateTime.Now.ToString()
End Sub

Copy Code

protected void Button1_Click(object sender, EventArgs e)
{
    Label1.Text = "Refreshed at " +
        DateTime.Now.ToString();
}

切换到“设计”视图，并选择 UpdatePanel，然后查看“属性”窗口。

说明

如果未显示“属性”窗口，请按 F4。
在“触发器”字段中，双击省略号 (...) 按钮。

此时将显示“UpdatePanelTrigger 集合编辑器”对话框。
单击“添加”以添加新的触发器。
在触发器属性的“ControlID”字段中，使用下拉列表选择“Button1”。

在本示例中，未指定触发器的“EventName”属性。因此，按钮的默认事件（Click 事件）将触发 UpdatePanel 控件的刷新。
在集合编辑器中，单击“确定”。
保存更改，然后按 Ctrl+F5 在浏览器中查看页面。
单击按钮。

面板中的文本将发生更改，以显示面板内容的刷新时间。

说明
如果未显示“属性”窗口，请按 F4。

单击该按钮若干次。

时间将发生更改，但整个页面不会刷新。

单击 UpdatePanel 外部的按钮之所以会刷新面板的内容，是因为您将该按钮配置为了 UpdatePanel 控件的触发器。单击作为触发器的按钮将执行异步回发，并会导致刷新关联的更新面板。此行为类似于本教程中第一个示例的行为；在第一个示例中，按钮位于 UpdatePanel 内部。

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

Visual Basic

Copy Code

<%@ 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 = "Refreshed at " & _
            DateTime.Now.ToString()
    End Sub
</script>

<html  >
<head runat="server">
    <title>UpdatePanel Tutorial</title>
    <style type="text/css">
    #UpdatePanel1 { 
      width:300px;
     }
    </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>UpdatePanel</legend>
                <asp:Label ID="Label1" runat="server" Text="Panel created."></asp:Label><br />
                </fieldset>
            </ContentTemplate>
            <Triggers>
                <asp:AsyncPostBackTrigger ControlID="Button1" />
            </Triggers>
        </asp:UpdatePanel>
        <asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Button" /></div>
    </form>
</body>
</html>

Copy Code

<%@ 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 = "Refreshed at " +
            DateTime.Now.ToString();
    }
</script>

<html  >
<head runat="server">
    <title>UpdatePanel Tutorial</title>
    <style type="text/css">
    #UpdatePanel1 { 
      width:300px;
     }
    </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>UpdatePanel</legend>
                <asp:Label ID="Label1" runat="server" Text="Panel created."></asp:Label><br />
                </fieldset>
            </ContentTemplate>
            <Triggers>
                <asp:AsyncPostBackTrigger ControlID="Button1" />
            </Triggers>
        </asp:UpdatePanel>
        <asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Button" /></div>
    </form>
</body>
</html>

回顾

本教程介绍了使用 UpdatePanel 控件来启用部分页更新的基本概念。您必须始终添加一个 ScriptManager 控件，然后添加一个 UpdatePanel 控件。默认情况下，面板内部的控件在执行回发时将导致面板刷新。如果将面板外部的控件配置为触发器，则它们在执行时将导致刷新 UpdatePanel。

下一步是学习如何向页面添加多个 UpdatePanel 控件。有关更多信息，请参见创建具有多个 UpdatePanel 控件的简单 ASP.NET 页。

posted on 2010-07-02 15:07 yongheng's blogs 阅读(382) 评论(0) 编辑收藏举报