UpdataPanel控件的使用及注意事项

来源：互联网发布：上杉升知乎编辑：程序博客网时间：2024/05/22 07:04

今天在做图和报表的时候想单击按钮实现报表和地图的转换，但是发现无论怎样都只会显示ReportViewer控件，存放百度地图的那个div标签不显示。最后发现是因为这两个标签是放在UpdatePanel控件的内部所以要设置其属性。以下为引用两位大神的文章：

使用详解：

一、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的时候页面显示回发而已！

2、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="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>

三、下面介绍下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"> <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>

运行了发现点击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);
}

此处转自：http://www.cnblogs.com/shangxia/articles/2281782.html

注意事项：

1.如果updatapanel控件的updatamode属性设置为always（默认），则页面上任何一处回送都会是updatapanel中的内容被更新，这包括updatapanel控件部的控件以及外部，当然也包括其它updatapanel控件内部控件所引发的异步回送 (所以页面上有多个updatapanel控件时，则应该把每一个updatapanel控件的updatamode设置为conditional，如此以来当某个updatapanel中控件引发异步回送的时候只更新该updatapanel,其它updatapanel不会更新)
2.如果updatapanel控件的updatamode属性设置为conditional，则下面每一种状况都使得updatapanel中的内容被更新
   （1）.updatapanel控件的触发器（trigger）引发了异步回送。
   （2）.调用updatapanel的updata方法。
   （3）.当updatapanel控件以嵌套的方式含于其它updatapanel控件中，而且父updatapanel控件被更新时。但是子updatapanel更新不会使父updatapanel更新，欲使父updatapanel更新则要使用触发器（trigger）或updata方法。
（4）.updatapanel控件内部的控件引发的异步回送（此时需把childrenastriggers设置true（默认））。
3.如果updatapanel控件的updatamode属性设置为conditional，childrenastriggers设置false（当updatapanel控件的updatamode属性设置为always时能设置childrenastriggers为false，否则执行页面时会引发异常）则updatapanel中的控件可以引发异步回送，但不会更新updatapanel控件的内容（注意：只能回送，但不能更新）。此时要是想能更新的话需要使用触发器（trigger）或updata方法。

此处转自：http://www.makaidong.com/IT%E5%8D%9A%E5%AE%A2%E5%9B%AD/16806.shtml

阅读全文

0 0