Asp.net中UpdatePanel的用法详解

asp.net updatepanel 允许用户构建一个丰富的，以客户端为中心的应用程序，引用updatepanel控件，能够实现页面的部分刷新，一个包含scriptmanage和 updatepanel控件的页面自动具有页面部分刷新的功能，不需要写任何的客户端javascript代码。一个web页面只能包含一个 scriptmanage控件，但可以包含一个或多个updatepanel控件。

使用updatepanel控件实现页面的局部更新，需要包含一个scriptmanage控件，并且必须将scriptmanage控件的 enablepartialrendering属性设置为true，不过你不用担心，该属性的默认值就是true，所以，在默认情况下，只要添加了 scriptmanage控件，该页面就自动具有了局部更新的能力。

一、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="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的用法详解的文章就介绍到这了,更多相关asp.net updatepanel内容请搜索www.887551.com以前的文章或继续浏览下面的相关文章希望大家以后多多支持www.887551.com！

黄山市民网：https://www.huangshanshimin.com/