ASP.NET - UpdatePanel 控件概述
使用 ASP.NET UpdatePanel 控件可生成功能丰富的、以客户端为中心的 Web 应用程序。通过使用 UpdatePanel 控件，可以刷新页的选定部分，而不是使用回发刷新整个页面。这称为执行“部分页更新”。包含一个 ScriptManager 控件和一个或多个 UpdatePanel 控件的 ASP.NET 网页可自动参与部分页更新，而不需要自定义客户端脚本。
一、介绍
UpdatePanel 控件通过指定页中无需刷新整个页面即可更新的区域发挥作用。此过程由 ScriptManager 服务器控件和客户端 PageRequestManager 类来协调。当启用部分页更新时，控件可以通过异步方式发布到服务器。异步回发的行为与常规回发类似：生成的服务器页执行完整的页和控件生命周期。不过，通过使用异步回发，可将页更新限制为包含在 UpdatePanel 控件中并标记为要更新的页区域。服务器仅将受影响的元素的 HTML 标记发送到浏览器。在浏览器中，客户端 PageRequestManager 类执行文档对象模型 (DOM) 操作以将现有 HTML 替换为更新的标记。
说明： 使用异步回发或使用 XMLHTTPRequest 对象时，如果 URL 包含双字节字符，则可能发生回发错误。此问题可以通过下面的方法得到解决：在页面的 head 元素中加入 <base href="url"/> 元素，其中 href 属性设置为引用该页面的 URL 编码的字符串。可以添加动态添加到服务器代码中的此元素。
下图演示一个首次加载的页和一个后续异步回发，该回发将刷新 UpdatePanel 控件的内容。
1.1、部分页呈现概述
1.2、启用部分页更新
UpdatePanel 控件在网页中需要 ScriptManager 控件。默认情况下，将启用部分页更新，因为 ScriptManager 控件的 EnablePartialRendering 属性的默认值为 true。
下面的示例显示用于定义页面上的 ScriptManager 控件和 UpdatePanel 控件的标记。UpdatePanel 控件包含一个 Button 控件，当单击该控件时，将刷新面板中的内容。默认情况下，ChildrenAsTriggers 属性为 true。因此，Button 控件将用作异步回发控件。
<asp:ScriptManager ID="ScriptManager"
runat="server" />
<asp:UpdatePanel ID="UpdatePanel1"
UpdateMode="Conditional"
runat="server">
<ContentTemplate>
<fieldset>
<legend>UpdatePanel content</legend>
<!-- Other content in the panel. -->
<%=DateTime.Now.ToString() %>
<br />
<asp:Button ID="Button1"
Text="Refresh Panel"
runat="server" />
</fieldset>
</ContentTemplate>
</asp:UpdatePanel>
1.3、指定 UpdatePanel 控件内容
可以通过声明方式向 UpdatePanel 控件添加内容，也可以在设计器中通过使用 ContentTemplate 属性来添加内容。在标记中，将此属性作为 ContentTemplate 元素公开。若要以编程方式添加内容，请使用 ContentTemplateContainer 属性。
当首次呈现包含一个或多个 UpdatePanel 控件的页时，将呈现 UpdatePanel 控件的所有内容并将这些内容发送到浏览器。在后续异步回发中，可能会更新各个 UpdatePanel 控件的内容。更新将与面板设置、导致回发的元素以及特定于每个面板的代码有关。
1.4、指定 UpdatePanel 触发器
默认情况下，UpdatePanel 控件内的任何回发控件都将导致异步回发并刷新面板的内容。但是，也可以配置页上的其他控件来刷新 UpdatePanel 控件。可以通过为 UpdatePanel 控件定义触发器来做到这一点。触发器是一类绑定，用于指定使面板更新的回发控件和事件。当引发触发器控件的指定事件（例如，按钮的 Click 事件）时，将刷新更新面板。
下面的示例演示如何为 UpdatePanel 控件指定触发器。
<asp:Button ID="Button1"
Text="Refresh Panel"
runat="server" />
<asp:ScriptManager ID="ScriptManager1"
runat="server" />
<asp:UpdatePanel ID="UpdatePanel1"
UpdateMode="Conditional"
runat="server">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Button1" />
</Triggers>
<ContentTemplate>
<fieldset>
<legend>UpdatePanel content</legend>
<%=DateTime.Now.ToString() %>
</fieldset>
</ContentTemplate>
</asp:UpdatePanel>
使用 UpdatePanel 控件的 Triggers 元素内的 asp:AsyncPostBackTrigger 元素定义触发器。（如果在 Visual Studio 中编辑页面，则可以使用“UpdatePanelTrigger 集合编辑器”对话框创建触发器。）
触发器的控件事件是可选的。如果不指定事件，则触发器事件是控件的默认事件。例如，对于 Button 控件，默认事件是 Click 事件。
1.5、如何刷新 UpdatePanel 控件
下面的列表描述 UpdatePanel 控件的属性设置，这些设置确定在部分页呈现过程中何时刷新面板的内容。
如果 UpdateMode 属性设置为 Always，则 UpdatePanel 控件的内容在每次从页上的任意位置执行回发时都会更新。这包括来自其他 UpdatePanel 控件内部的控件的异步回发，也包括来自 UpdatePanel 控件外部的控件的回发。
如果 UpdateMode 属性设置为 Conditional，则 UpdatePanel 控件的内容在出现以下情况下之一时更新：
·当回发由 UpdatePanel 控件的触发器引起时。
·当显式调用 UpdatePanel 控件的 Update 方法时。
·当 UpdatePanel 控件嵌套在另一个 UpdatePanel 控件内并更新父面板时。
·当 ChildrenAsTriggers 属性设置为 true 并且 UpdatePanel 控件的子控件导致回发时。嵌套的 UpdatePanel 控件的子控件不会导致更新外部 UpdatePanel 控件，除非将它们显式定义为父面板的触发器。
如果 ChildrenAsTriggers 属性设置为 false 且 UpdateMode 属性设置为 Always，则将引发异常。此 ChildrenAsTriggers 属性仅在 UpdateMode 属性设置为 Conditional 时使用。
1.6、在母版页中使用 UpdatePanel 控件
若要在母版页中使用 UpdatePanel 控件，必须决定如何包含 ScriptManager 控件。如果在母版页上包含 ScriptManager 控件，则可将其用作所有内容页的 ScriptManager 控件。（如果要以声明方式在内容页中注册脚本或服务，可将 ScriptManagerProxy 控件添加到该内容页。）
如果母版页不包含 ScriptManager 控件，则可以将 ScriptManager 控件单独放置在包含 UpdatePanel 控件的每个内容页上。设计选择取决于您计划如何管理应用程序中的客户端脚本。有关如何管理客户端脚本的更多信息，请参见 ScriptManager 控件概述。
在某些情况下，ScriptManager 控件位于母版页上，对于某个内容页，不需要使用部分页呈现功能。在上述情况下，对于相应的内容页，必须以编程方式将 ScriptManager 控件的 EnablePartialRendering 属性设置为 false。
下面的示例显示用于母版页上的 ScriptManager 控件和内容页上的 UpdatePanel 控件的标记。在本示例中，将在母版页上定义一个名为 LastUpdate 的属性，并从 UpdatePanel 控件内部引用该属性。
<%@ 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 DateTime LastUpdate
{
get
{
return (DateTime)(ViewState["LastUpdate"] ?? DateTime.Now);
}
set
{
ViewState["LastUpdate"] = value;
}
}
protected void MasterButton2_Click(object sender, EventArgs e)
{
LastUpdate = DateTime.Now;
((UpdatePanel)ContentPlaceHolder1.FindControl("UpdatePanel1")).Update();
}
protected void Page_Load(object sender, EventArgs e)
{
ScriptManager1.RegisterAsyncPostBackControl(Button2);
}
</script>
<html >
<head id="Head1" runat="server">
<title>ScriptManager in Master Page Example</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<asp:Panel ID="MasterPanel1" runat="server" GroupingText="Master Page">
<asp:Button ID="Button1" runat="server" Text="Full Page Refresh" />
<asp:Button ID="Button2" runat="server" Text="Refresh Panel" OnClick="MasterButton2_Click" />
</asp:Panel>
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
</form>
</body>
</html>
<%@ Page Language="C#" MasterPageFile="MasterCS.master"
Title="ScriptManager in Content Page" %>
<%@ MasterType VirtualPath="MasterCS.master" %>
<script runat="server">
protected void Button3_Click(object sender, EventArgs e)
{
Master.LastUpdate = DateTime.Now;
}
</script>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1"
runat="Server">
<asp:Panel ID="Panel2"
GroupingText="ContentPage"
runat="server" >
<asp:UpdatePanel ID="UpdatePanel1"
UpdateMode="Conditional"
runat="server">
<ContentTemplate>
<p>
Last updated: <strong>
<%= Master.LastUpdate.ToString() %>
</strong>
</p>
<asp:Button ID="Button3"
Text="Refresh Panel"
OnClick="Button3_Click"
runat="server" />
</ContentTemplate>
</asp:UpdatePanel>
</asp:Panel>
</asp:Content>
1.7、使用嵌套的 UpdatePanel 控件
UpdatePanel 控件可以嵌套。如果刷新父面板，则也会刷新所有嵌套的面板。
下面的示例显示用于在一个 UpdatePanel 控件内定义另一个 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">
</script>
<html >
<head id="Head1" runat="server">
<title>UpdatePanelUpdateMode Example</title>
<style type="text/css">
div.NestedPanel
{
position: relative;
margin: 2% 5% 2% 5%;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager"
runat="server" />
<asp:UpdatePanel ID="OuterPanel"
UpdateMode="Conditional"
runat="server">
<ContentTemplate>
<div>
<fieldset>
<legend>Outer Panel </legend>
<br />
<asp:Button ID="OPButton1"
Text="Outer Panel Button"
runat="server" />
<br />
Last updated on
<%= DateTime.Now.ToString() %>
<br />
<br />
<asp:UpdatePanel ID="NestedPanel1"
UpdateMode="Conditional"
runat="server">
<ContentTemplate>
<div class="NestedPanel">
<fieldset>
<legend>Nested Panel 1</legend>
<br />
Last updated on
<%= DateTime.Now.ToString() %>
<br />
<asp:Button ID="NPButton1"</span