UpdatePanel控件的简单属性学习一、RenderMode属性,值为Block(默认值)为Inline ![]() <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> <asp:UpdatePanel ID="UpdatePanel1" runat="server" RenderMode="Block"> <ContentTemplate> RenderMode=Block </ContentTemplate> </asp:UpdatePanel> <hr /> <asp:UpdatePanel ID="UpdatePanel2" runat="server" RenderMode="Inline"> <ContentTemplate> RenderMode=Inline </ContentTemplate> </asp:UpdatePanel> 运行后查看网页源代码,会发现以下HTML标记:
![]() <div id="UpdatePanel1"> RenderMode=Block </div> <hr /> <span id="UpdatePanel2"> RenderMode=Inline </span> 这就是这两个值的区别,为Block时输出的容器为<div>,而为Inline时则输出<span>。 二、UpdateMode属性,值为Always(默认值)或Conditional
作用分别为Always:只要页面有异步回送则该UpdatePanel更新 Conditional:只有该UpdatePanel控件中的控件产生的异步回送,才更新该UpdatePanel 在页面输入以下代码:
<asp:ScriptManager ID="ScriptManager1" runat="server"> 运行后就会发现按钮文本所写的效果。</asp:ScriptManager> <asp:UpdatePanel ID="UpdatePanel1" runat="server" RenderMode="Block" UpdateMode="Always"> <ContentTemplate> <%=DateTime.Now %> <asp:Button ID="Button1" runat="server" Text="点击该按钮只有上面时间更新" /> </ContentTemplate> </asp:UpdatePanel> <hr /> <asp:UpdatePanel ID="UpdatePanel2" runat="server" RenderMode="Block" UpdateMode="Conditional"> <ContentTemplate> <%=DateTime.Now %> <asp:Button ID="Button2" runat="server" Text="点击该按钮全部时间都会更新" /> </ContentTemplate> </asp:UpdatePanel> 三、ChildrenAsTriggers属性,值为True(默认值)为False
<asp:ScriptManager ID="ScriptManager1" runat="server"> 运行结果如按钮文本所写,他的作用是任何异步回送都不会引发该UpdatePanel更新(单独指定的除外)。</asp:ScriptManager> <asp:UpdatePanel ID="UpdatePanel1" runat="server" RenderMode="Block" UpdateMode="Always" ChildrenAsTriggers="true"> <ContentTemplate> <%=DateTime.Now %> </ContentTemplate> </asp:UpdatePanel> <hr /> <asp:UpdatePanel ID="UpdatePanel2" runat="server" RenderMode="Block" UpdateMode="Conditional" ChildrenAsTriggers="false"> <ContentTemplate> <%=DateTime.Now %> <asp:Button ID="Button2" runat="server" Text="点击该按钮只有上方的时间会更新" /> </ContentTemplate> </asp:UpdatePanel> 注意:如果ChildrenAsTriggers的值为False,则UpdateMode的值也应该为Conditional,否则会引发异常,这时他不知道是该更新还是不更新。 四、Triggers属性,这其实是UpdatePanel的一个子节点,作用是为UpdatePanel指定一个控件,由该控件引发UpdatePanel更新 ![]() <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> <asp:UpdatePanel ID="UpdatePanel1" runat="server" RenderMode="Block" ChildrenAsTriggers="true" UpdateMode="Conditional"> <ContentTemplate> <%=DateTime.Now %> </ContentTemplate> <Triggers> <asp:AsyncPostBackTrigger ControlID="Button1" /> </Triggers> </asp:UpdatePanel><hr /> <asp:Button ID="Button1" runat="server" Text="该按钮在UpdatePanel外,但为Triggers所指定,也会引发UpdatePanel更新" /> 由于UpdatePanel1的UpdateMode属性为Conditional,所以只有当里面的控件引发回送时也会更新,但是Triggers节点指定了一个外部的Button控件,由该控件一样会引发UpdatePanel的更新。有意思的是被指定的Button按钮会变成一个异步控件,也就是说如果你还双击该按钮在CS文件中添加了一个Button_Click事件的话,会报出一个脚本错误!
在<asp:AsyncPostBackTrigger ControlID="Button1" />中还有一个属性“EventName”,该属性指定了一个事件名称,作用为只有当ControlID指定的控件的EventName指定的事件才会引发更新。 在页面输入以下代码:
<asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> <asp:UpdatePanel ID="UpdatePanel1" runat="server" RenderMode="Block" ChildrenAsTriggers="false" UpdateMode="Conditional"> <ContentTemplate> <%=DateTime.Now %> <asp:Button ID="Button1" runat="server" Text="不会刷新" /> <asp:Button ID="Button2" runat="server" Text="不会刷新" /> </ContentTemplate> </asp:UpdatePanel> 如第三个属性所说:这里把UpdatePanel的ChildrerAsTriggers属性设置为False,则任何控件引发的回送都不会引发该UpdatePanel更新。 但是把代码修改如下:
<asp:ScriptManager ID="ScriptManager1" runat="server"> 其实就是为UpdatePanel添加了一个<Triggers>节点,指向Button1。则运行结果按钮文本所示。</asp:ScriptManager> <asp:UpdatePanel ID="UpdatePanel1" runat="server" RenderMode="Block" ChildrenAsTriggers="false" UpdateMode="Conditional"> <ContentTemplate> <%=DateTime.Now %> <asp:Button ID="Button1" runat="server" Text="因为是Triggers指定的控件,所以会引发更新" /> <asp:Button ID="Button2" runat="server" Text="不会刷新" /> </ContentTemplate> <Triggers> <asp:AsyncPostBackTrigger ControlID="Button1" /> </Triggers> </asp:UpdatePanel> 事实上Triggers可以指定UpdatePanel外的控件,也可以指定一个在其他UpdatePanel内的控件,或者在GridView中的一个控件。
在母版页中使用 UpdatePanel 要在母版页中使用 UpdatePanel 控件,必须确定如何使用 ScriptManager 控件。如果在母版页面中放置了一个 ScriptManater 控件,则 ScriptManager 控件可以在所有的内容面中起作用。(如果要在内容页中声明脚本或服务,可以在页面中添加一个 ScriptManagerProxy,它具有和 ScriptManager 差不多一样的属性和方法。)
如果在母版页中没有包含 ScriptManager 控件,就必须在包含 UpdatePanel 控件的每个内容页是都要放置一个 ScriptManager 控件,设计的选择依赖于在应用程序中将如何管理客户端脚本。 如果在母版页中包含了 ScriptManager 控件,而在某个内容页中又不打算使用局部页面输出的功能时,必须用程序设置内容中的 ScriptManager 控件的 EnablePartialRendering 为 false 。 使用嵌套的 UpdatePanel 控件 UpdatePanel 控件可以嵌套使用,如果父面板被刷新,则所有嵌套的面板也都会被刷新。
下列代码展示了如何在一个 UpdatePanel 控件中定义另一个 UpdatePanel 控件。 <%@ Page Language="C#" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www./TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www./1999/xhtml"> <head id="Head1" runat="server"> <title>UpdatePanelUpdateMode 示例</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>外层 Panel </legend> <br /> <asp:Button ID="OPButton1" Text="外层面板按钮" runat="server" /> <br /> 最后更新在: <%= DateTime.Now.ToString() %> <br /> <br /> <asp:UpdatePanel ID="NestedPanel1" UpdateMode="Conditional" runat="server"> <ContentTemplate> <div class="NestedPanel"> <fieldset> <legend>嵌套面板</legend> <br /> 最后更新在: <%= DateTime.Now.ToString() %> <br /> <asp:Button ID="NPButton1" Text="嵌套面板按钮" runat="server" /> </fieldset> </div> </ContentTemplate> </asp:UpdatePanel> </fieldset> </div> </ContentTemplate> </asp:UpdatePanel> </div> </form> </body> </html> 用程序创建 UpdatePanel 控件 要用程序添加一个 UpdatePanel 控件到页面中,可以先创建一个新的 UpdatePanel 实例,然后使用它的 ContentTemplateContainer 属性的 Add( Control ) 方法来添加其他控件。不能直接使用 ContentTemplate 属性来添加控件。
如果 UpdatePanel 控件是程序添加的,只有来自同样命名容器如 UpdatePanel 控件中控件的回发才可以被使用为面板的触发器。 下列代码演示了如何用程序添加 UpdatePanel 控件。 <%@ Page Language="C#" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www./TR/xhtml1/DTD/xhtml1-transitional.dtd"> <script runat="server"> protected void Page_Load(object sender, EventArgs e) { UpdatePanel up1 = new UpdatePanel(); up1.ID = "UpdatePanel1"; up1.UpdateMode = UpdatePanelUpdateMode.Conditional; Button button1 = new Button(); button1.ID = "Button1"; button1.Text = "Submit"; button1.Click += new EventHandler(Button_Click); Label label1 = new Label(); label1.ID = "Label1"; label1.Text = "A full page postback occurred."; up1.ContentTemplateContainer.Controls.Add(button1); up1.ContentTemplateContainer.Controls.Add(label1); Page.Form.Controls.Add(up1); } protected void Button_Click(object sender, EventArgs e) { ((Label)Page.FindControl("Label1")).Text = "Panel refreshed at " + DateTime.Now.ToString(); } </script> <html xmlns="http://www./1999/xhtml"> <head id="Head1" runat="server"> <title>UpdatePanel Added Programmatically Example</title> </head> <body> <form id="form1" runat="server"> <div> <asp:ScriptManager ID="TheScriptManager" runat="server" /> </div> </form> </body> </html>
UpdatePanel 的关键属性
ChildrenAsTriggers:
指示来自 UpdatePanel 控件的直接子控件的回发是否更新面板的内容。设置为 true 时更新,否则不更新,默认为 true 。如果此属性设置为 false ,UpdatePanel 控件的 UpdateMode 就必须设置为 Conditional ,否则会抛出 InvalidOperationException 异常。 UpdateMode:指示什么时候需要更新面板。当一个UpdatePanel 控件没有包含在另一个 UpatePanel 控件中时,面板的更新是根据 UpdateMode 、ChildrenAsTriggers 属性的设置,以及触发器的集合来进行的。当一个 UpdatePanel 控件在另一个 UpdatePanel 控件内部时,子面板会自动在父面板更新时更新。 UpdatePanel 控件的内容在下列情形下会更新:
由以上内容可以看出,使用 UpdatePanel 控件可以方便的帮助大家开发出具有 AJAX 特性的 ASP.NET 应用程序来。当然,它也不是万能的,过度的使用会引起一定的性能开销,同时它还与现在的部分 ASP.NET 控件不兼容,如 TreeView、Menu,以及 WebParts 控件等。 |
|