asp.net UpdatePanel的简单用法

程序员文章站 2022-06-04 22:58:58

updatepanel控制页面的局部更新，这个更新功能依赖于scriptmanger控件的enablepartialrendering属性，如果这个属性设置为false局部...

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); 
} 

先记录这些~还望多多大虾们多多指教

上一篇： js中时间戳转为日期格式

下一篇：大闸蟹的什么地方不可以吃？

asp.net UpdatePanel的简单用法

MySQL中decimal类型用法的简单介绍

一个简单的ASP.NET验证码

C#中简单的拆箱操作用法实例分析

php通过rmdir删除目录的简单用法

简单掌握CSS3中resize属性的用法

简单了解Linux系统中rev命令与tac命令的用法

asp.net ajaxControlToolkit ValidatorCalloutExtender的简单用法

asp.net UpdatePanel的简单用法

详解安装mitmproxy以及遇到的坑和简单用法

C#之BackgroundWorker从简单入门到深入精通的用法总结