UpdatePanel 用法

全栈程序员站长

发布于 2022-09-15 15:09:30

4980

发布于 2022-09-15 15:09:30

大家好，又见面了，我是你们的朋友全栈君。

局部更新是ajax技术的最基本，也是最重要的用法，今天大概把asp.net ajax中的局部更新控件 updatepanel的用法记录下，大家可以共同探讨

UpdatePanel控制页面的局部更新，这个更新功能依赖于scriptManger控件的EnablePartialRendering属性，如果这个属性设置为false局部更新会失去作用(scriptManger控件的EnablePartialRendering属性的默认值为true不必刻意去设置) 下面是一个完整的UpdatePanel的结构：代码如下: <asp:ScriptManager ID=”ScriptManager1″ runat=”server” > </asp:ScriptManager> <asp:UpdatePanel ID=”UpdatePanel1″ runat=”server” ChildrenAsTriggers=”true” UpdateMode=”Always” RenderMode=”Block”> <ContentTemplate> </ContentTemplate> <Triggers> <asp:AsyncPostBackTrigger /> <asp:PostBackTrigger /> </Triggers> </asp:UpdatePanel>

主要属性： 1，ChildrenAsTriggers : 内容模板内的子控件的回发是否更新本模板(和UpdateMode的conditional有关) 2，UpdateMode : 内容模板的更新模式，有always和conditional俩种 always：每次ajax PostBack或者普通的PostBack都能引起panel的更新如果UpdatePanel设置为Always时，不能使用上面的ChildrenAsTriggers属性，强行使用会报错，是updatepanel默认的更新模式,和设置trigger触发器没有直接的关系。 conditional：只有满足如下某一条件时才更新panel的内容如果设置UpdateMode=”conditional” ChildrenAsTriggers=”false”时候，子控件不允许触发更新 1)，当panel中的某个控件引发PostBack时 2), 当Panel指定的某个Trigger被引发时 3，RenderMode：局部更新控件的呈现形式，俩中，Block(局部更新在客户端以div形式展现)和Inline(局部更新以span的形式展现在客户端) 子元素： 1,contentTemplate: 局部更新控件的内容模板，可以在其中添加任何控件 2，Triggers: 局部更新的触发器，包括俩中：异步回发(AsyncPostBackTrigger) 用来实现局部更新。普通回发(PostBackTrigger)和普通的一养，不管是否使用了局部更新控件，都会引起页面的全部更新。下面是几个简单的例子： 1,updatepanel的updatemode设置为always 代码如下: <%@ Page Language=”C#” AutoEventWireup=”true” CodeFile=”Default2.aspx.cs” Inherits=”Default2″ %> <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“> <html xmlns=”http://www.w3.org/1999/xhtml“> <head runat=”server”> <title>无标题页</title> </head> <body> <form id=”form1″ runat=”server”> <div> </div> <asp:ScriptManager ID=”ScriptManager1″ runat=”server”> </asp:ScriptManager> <asp:UpdatePanel ID=”UpdatePanel1″ runat=”server” UpdateMode=”Always”> <ContentTemplate> <% =DateTime.Now.ToString()%> <asp:Button ID=”Button1″ runat=”server” Text=”UpdatePanelButton” /> </ContentTemplate> </asp:UpdatePanel> <asp:Button ID=”Button2″ runat=”server” Text=”Button” /> </form> </body> </html>

不管哪个按钮，都会触发更新，只不过外面的按钮postback的时候页面显示回发而已！ 1,updatepanel的updatemode设置为conditional( ChildrenTriggers=”false” 就是updatepanel中事件不触发更新) 代码如下: <%@ Page Language=”C#” AutoEventWireup=”true” CodeFile=”Default2.aspx.cs” Inherits=”Default2″ %> <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“> <html xmlns=”http://www.w3.org/1999/xhtml“> <head runat=”server”> <title>无标题页</title> </head> <body> <form id=”form1″ runat=”server”> <div> </div> <asp:ScriptManager ID=”ScriptManager1″ runat=”server”> </asp:ScriptManager> <asp:UpdatePanel ID=”UpdatePanel1″ runat=”server” UpdateMode=”Conditional” ChildrenAsTriggers=”false”> <ContentTemplate> <% =DateTime.Now.ToString()%> <asp:Button ID=”Button1″ runat=”server” Text=”UpdatePanelButton” /> </ContentTemplate> </asp:UpdatePanel> <asp:Button ID=”Button2″ runat=”server” Text=”Button” /> </form> </body> </html>

下面介绍下updatePanel的触发器Trigger 了解数据库的人应该对触发器这个概念比较清楚，Trigger对于UpdatePanel来说也是很关键的开始简单介绍了UpdatePanel的俩中触发器asyncPostBackTrigger和PostBackTrigger的作用这里用例子大概在稍微深入地介绍下： 1,普通回调触发器(PostBackTrigger) PostBackTrigger主要针对UpdatePanel模板内的子控件，因为当子控件被触发时。它只会更新模版内的数据，模板外的控件不会发生变化.当需要更新全局内容的时候就可以通过PostBackTrigger触发器来实现页面的全部回调。下面是简单例子：代码如下: <%@ Page Language=”C#” AutoEventWireup=”true” CodeFile=”Default2.aspx.cs” Inherits=”Default2″ %> <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“> <html xmlns=”http://www.w3.org/1999/xhtml“> <head runat=”server”> <title>无标题页</title> </head> <body> <form id=”form1″ runat=”server”> <div> </div> <asp:ScriptManager ID=”ScriptManager1″ runat=”server”> </asp:ScriptManager> <asp:UpdatePanel ID=”UpdatePanel1″ runat=”server” UpdateMode=”Always”> <ContentTemplate> <% =DateTime.Now.ToString()%> <asp:Button ID=”Button1″ runat=”server” Text=”UpdatePanelButton” /> </ContentTemplate> <Triggers> <!–下面的注释掉，点击updatePanel内的button则只更新Panel内的时间，取消注释责全部更新–> <!– <asp:PostBackTrigger ControlID=”Button1″/>–> </Triggers> </asp:UpdatePanel> <br /> <% =DateTime.Now.ToString()%> <asp:Button ID=”Button2″ runat=”server” Text=”Button” /> </form> </body> </html>

2，异步回调触发器(AsyncPostBackTrigger) 是实现局部更新的关键，在触发器内定义引起回发的控件和事件例：代码如下: <%@ Page Language=”C#” AutoEventWireup=”true” CodeFile=”Default2.aspx.cs” Inherits=”Default2″ %> <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“> <html xmlns=”http://www.w3.org/1999/xhtml“> <head runat=”server”> <title>无标题页</title> </head> <body> <form id=”form1″ runat=”server”> <asp:ScriptManager ID=”ScriptManager1″ runat=”server”> </asp:ScriptManager> <asp:UpdatePanel ID=”UpdatePanel1″ runat=”server” UpdateMode=”Always”> <ContentTemplate> <% =DateTime.Now.ToString()%> </ContentTemplate> <Triggers> <asp:AsyncPostBackTrigger ControlID=”Button2″ EventName=”Click” /> </Triggers> </asp:UpdatePanel> <br /> <% =DateTime.Now.ToString()%> <asp:Button ID=”Button2″ runat=”server” Text=”Button” /> </form> </body> </html>

运行了发现点击button2的时候只更新了 updatepanel内部的时间上面的例子也可以动态更新UpdatePanel的一些源代码：具体例子就不写了下面大概写点主要代码：代码如下: protected void Page_Load(object sender, EventArgs e) { //获取更新控件儿 UpdatePanel mapanel = UpdatePanel1; //设置触发模式 mapanel.UpdateMode = UpdatePanelUpdateMode.Conditional; //显示时间 Label1.Text = DateTime.Now.ToString(); //添加触发 AsyncPostBackTrigger tri = new AsyncPostBackTrigger(); tri.ControlID = “Button2”; tri.EventName = “Click”; mapanel.Triggers.Add(tri); } 先记录这些~还望多多大虾们多多指教

发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/163516.html原文链接：https://javaforall.cn

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

如有侵权请联系 cloudcommunity@tencent.com 删除

asp