通过

教程：如何创建包含两个独立更新区域的网页

  • 项目

在本教程中，您将在一个网页中使用多个 UpdatePanel 控件。通过在一个网页上使用多个 UpdatePanel 控件，您可以按照递增的方式单独更新或一起更新该网页的各个区域。有关部分页更新的详细信息，请参阅部分页呈现概述。

所有 ASP.NET AJAX 控件都需要 web.config 文件中的特定设置才能正常运行。如果您试图使用这些控件之一，但您的网站不包含所需的 web.config 文件，则网页的“设计”视图中本应显示该控件之处会出现错误。在“设计”视图中，如果您单击处于该状态的控件，则 Microsoft Expression Web 会让您选择要创建一个新的 web.config 文件还是更新现有的 web.config 文件。

创建包含两个独立更新的区域的网页

  1. 在“文件”菜单上，指向“新建”，然后单击“ASPX”。

  2. 将光标置于 ASPX 网页的“设计”视图中。

  3. 在“工具箱”面板中，在“ASP.NET 控件”下的“AJAX”下，双击 ScriptManager 控件以将其添加到该网页中。如果出现一个对话框询问是否要将一个 web.config 文件添加到您的网站以支持 .NET Framework 版本 3.5，请单击“是”。如果出现一个对话框询问是否要对非可视控件启用视觉帮助，请单击“是”。

  4. 在“工具箱”面板中，在“ASP.NET 控件”下的“AJAX”下，双击 UpdatePanel 控件两次，将两个 UpdatePanel 控件添加到该网页中。

  5. 选中网页中的一个 UpdatePanel 控件，在“标记属性”面板中，将“UpdateMode”属性设置为“Conditonal”。对另一个 UpdatePanel 控件重复此步骤。

  6. 在“工具箱”面板中，在“ASP.NET 控件”和“标准”类别下，将 Label 控件拖到“设计”视图中的一个 UpdatePanel 控件中。

  7. 选中网页中的 Label 控件，在“标记属性”面板中，将“Text”属性设置为“Panel Created”。

  8. 在“工具箱”面板中，在“ASP.NET 控件”和“标准”类别下，将 Button 控件拖到包含 Label 控件的同一个 UpdatePanel 控件中。

  9. 选中网页中的该按钮，在“标记属性”面板中，将“Text”属性设置为“Refresh Panel”。

  10. 在“工具箱”面板中，在“ASP.NET 控件”和“标准”类别下，将 Calendar 控件拖到“设计”视图中的另一个 UpdatePanel 控件中。

    Cc295469.8a3d2b47-5420-4c03-b422-bfb6b63ef2bd(zh-cn,Expression.40).png

  11. 在网页的“代码”视图中，在 </head> 标记之前，根据网页的“网页语言”添加下面的代码示例之一：

    <script runat="server" type="text/c#">
    protected void Button1_Click(object sender, EventArgs e)
    {
        Label1.Text = "Panel refreshed at " +
            DateTime.Now.ToString();
    }
</script>

    <script runat="server" type="text/vb">
    Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs)
        Label1.Text = "Panel refreshed at " & _
            DateTime.Now.ToString()
    End Sub
</script>

  12. 在“代码”视图中，找到标记 <asp:Button runat="server" Text="Refresh Panel" id="Button1" /> 并向其中添加 OnClick="Button1_Click"。

  13. 在“文件”菜单上，单击“保存”。

  14. 按 F12 在您的 Web 浏览器中预览该网页。

  15. 在 Web 浏览器中的该网页中，单击该按钮。面板中的文本将更改，以显示该面板的内容上次刷新的时间。在日历中，移到其他月份。另一个面板中的时间不会更改。这两个面板的内容会单独更新。

    下表显示最终网页代码：

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@ Page Language="C#" %>
<html dir="ltr" xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled 2</title>
<script runat="server" type="text/c#">
    protected void Button1_Click(object sender, EventArgs e)
    {
        Label1.Text = "Panel refreshed at " +
            DateTime.Now.ToString();
    }
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager runat="server" id="ScriptManager1">
</asp:ScriptManager>
<asp:UpdatePanel runat="server" id="UpdatePanel1" UpdateMode="Conditional">
<ContentTemplate>
<asp:Label runat="server" Text="Panel Created" id="Label1">
</asp:Label>
<asp:Button runat="server" Text="Refresh Panel" id="Button1" OnClick="Button1_Click"/>
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdatePanel runat="server" id="UpdatePanel2" UpdateMode="Conditional">
<ContentTemplate>
<asp:Calendar runat="server" id="Calendar1">
</asp:Calendar>
</ContentTemplate>
</asp:UpdatePanel>
</form>
</body>
</html>

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@ Page Language="VB" %>
<html dir="ltr" xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled 2</title>
<script runat="server" type="text/vb">
    Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs)
        Label1.Text = "Panel refreshed at " & _
            DateTime.Now.ToString()
    End Sub
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager runat="server" id="ScriptManager1">
</asp:ScriptManager>
<asp:UpdatePanel runat="server" id="UpdatePanel1" UpdateMode="Conditional">
<ContentTemplate>
<asp:Label runat="server" Text="Panel Created" id="Label1">
</asp:Label>
<asp:Button runat="server" Text="Refresh Panel" id="Button1" OnClick="Button1_Click"/>
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdatePanel runat="server" id="UpdatePanel2" UpdateMode="Conditional">
<ContentTemplate>
<asp:Calendar runat="server" id="Calendar1">
</asp:Calendar>
</ContentTemplate>
</asp:UpdatePanel>
</form>
</body>
</html>

    回顾

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

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

    有关使用 UpdatePanel 控件的其他教程，请参阅 MSDN Library 中 UpdatePanel 控件概述 Cc295469.xtlink_newWindow(zh-cn,Expression.40).png主题中的“帮助和演练主题”下的链接。尽管这些教程是针对 Microsoft Visual Web Developer 编写的，您在 Microsoft Expression Web 中仍可以按照它们执行操作，只有少数一些情况例外。

另请参阅

概念

部分页呈现概述
UpdatePanel 控件
ScriptManager 控件