asp.net UpdatePanel的简单用法

2022-10-22,,,,

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);
}
先记录这些~还望多多大虾们多多指教

《asp.net UpdatePanel的简单用法.doc》

下载本文的Word格式文档,以方便收藏与打印。