编 辑 新 闻
新闻类型:
编程天地
编程天地
摄影天地
海贝官方
文学
电脑技术
创业天地
旅游天地
健康生活
游戏动漫
法律法规
商品欣赏
汽车世界
净化工程
asp.net
JQ与JS
APP
asp.net
系统
数据库
UI
JAVA
新闻主题:
 
搜索
 
前台
商品编号:
发 表 人:
关键字:
用空格隔开
新闻内容:
(小于1200字时 <br 分页)
<p><span style="font-size:18px">asp.net UpdatePanel实现异步局部刷新</span></p><p><span style="font-size:18px">如有雷同,不胜荣欣,若转载,请注明</span></p><p><span style="font-size:18px">鉴于最近项目需要,研究了一下UpdatePanel控件的使用方法,现总结如下,可能有很多地方不足,还望大家斧正哦,此文的目的也是为了帮助UpdatePanel的初学者,也是为了给自己的学习之路留个脚印,以便自己查缺补漏,废话到此,下面直接开始</span><span style="font-size:18px"></span></p><p>UpdatePanel局部刷新的使用</p><p>ScriptManager和UpdatePanel控件联合使用可以实现页面异步局部更新的效果。其中的UpdatePanel就是设置页面中异 步局部更新区域,它必须依赖于ScriptManager存在,因为ScriptManger控件提供了客户端脚本生成与管理UpdatePanel的功能。</p><p>ScriptManager控件重要的属性:<br/> ScriptManager控件的EnablePartialRendering属性:true-表示实现页面的异步局部更新;false-表示实现全页面的刷新。此属性默认值为true<br/>UpdatePanel控件重要的属性:<br/> UpdatePanel控件的RenderMode属性:InLine,UpdatePanel控件被解析成HTML的<span>标记;Block,UpdatePanel控件被解析成HTML控件的<div>。<br/> UpdatePanel控件的UpdateMode属性:Always,UpdatePanel页面上任何一处发生的回发操作都会产生页局部更新;Conditional,只在特定的情况下才产生页面的回发,如执行UpdatePanel控件的update()方法或在指定的触发器的操作下,UpdatePanel控件的UpdateMode默认为"Always"。<br/> UpdatePanel控件的ChildAsTrigger属性:指示UpdatePanel内部控件引起的回发是否产生当前UpdatePanel控件的局部更新。如果UpdateMode设为Always的话,那ChildAsTrigger属性必须设为True,否则运行出错。</p><p>一、UpdatePanel内部的控件引起的回发,来更新当前UpdatePanel内部的控件内容:<br/> 1.向页面中加入ScriptManager、UpdatePanel控件和一个Label控件,ID="Label1"。<br/> 2.在UpdatePanel中加入一个Button、一个Label,ID="Label2"。<br/> 3.双击Button在事件处理程序中写入下列代码:Label2.Text = DateTime.Now.ToString();<br/> 4.在Page_Load事件中写入下列代码:Label1.Text = DateTime.Now.ToString();<br/> 5.运行页面,发现每次点击按钮都会产生异步局步刷新,只有Label2的内容发生更改,页面上的Label1时间没有发生更改。<br/> <br/> 代码如下:<br/> <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label><br/> <asp:ScriptManager ID="ScriptManager1" runat="server"><br/> </asp:ScriptManager><br/> <asp:UpdatePanel ID="UpdatePanel1" runat="server" ChildrenAsTriggers="True"><br/> <ContentTemplate><br/> <asp:Label ID="Label2" runat="server"></asp:Label><br/> <br /><br/> <asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Button" /><br/> </ContentTemplate><br/> </asp:UpdatePanel><br/> 后台代码:<br/> protected void Button1_Click(object sender, EventArgs e)<br/> {<br/> Label2.Text = DateTime.Now.ToString(); ;<br/> }<br/> protected void Page_Load(object sender, EventArgs e)<br/> {<br/> Label1.Text = DateTime.Now.ToString();<br/> } <br/> 注意:此时的ScriptManager的EnablePartialRendering属性应设为true(默认即为true)。UpdatePanel的UpdateMode属性应设为Always(默认即为Always)。ChildAsTrigger属性应设为true(默认即为true)。</p><p>二、UpdatePanel控件外部的控件引起的回发,来异步更新UpdatePanel内部的内容<br/> 虽然上面的方式能够实现很简单地异步局部更新的功能,但就性能方面考虑,我们应当只将数据确实会发生变化的控件摆放在UpdatePanel中,这就可能会出现引起回发的控件不在UpdatePanel内的情况。这个时候我们有两种方式实现这种效果。</p><p> A.在Page_Load方法中用ScriptManager1.RegisterAsyncPostBackControl()来注册一下要实现异步更新的控件。<br/> B.用触发器来实现。<br/> <br/> 1、ScriptManager1.RegisterAsyncPostBackControl()注册的控件可以实现对所有的UpdatePanel控件的异步更新。<br/> 如:ScriptManager1.RegisterAsyncPostBackControl(this.Button2);实现对Button2的注册,那此时Button2的回发就变成一个异步回发(页面不会刷新),它会导致页面上所有的UpdatePanel的内容的更新。<br/> 注意:此时的ScriptManager的EnablePartialRendering属性应设为true。UpdatePanel的UpdateMode属性应设为Always。</p><p> 2、ScriptManager1.RegisterAsyncPostBackControl()注册的控件可以实现针对特定UpdatePanel控件的异步更新。<br/> a.把页面上所有的UpdatePanel控件的UpdateMode设为Conditional。<br/> b.ScriptManager1.RegisterAsyncPostBackControl(this.Button2);实现对Button2的注册。<br/> c.在Button2控件的Click事件中后面加入后面的代码:UpdatePanel1.Update(); <br/> 这样Button2按钮只对UpdatePanel1控件实现的异步的局部刷新。<br/> 注意:这里的UpdatePanel的属性要设为Conditional,如果这里多个UpdatePanel控件都设置为Always的话,所有的UpdatePanel都不会出现刷新的效果。<br/> 如果将其中Button2事件代码UpdatePanel1.Update()对应的UpdatePanel设置为Conditional时,则多个UpdatePanel都会出现刷新的效果,要实现多个UpdatePanel中<br/> 其中一个实现更新效果的话,需要将UpdatePanel的UpdateMode都设置为Conditional才可以<br/> 3、触发器<br/> 如果页面上有多个UpdatePanel控件,如果要实现外部的控件的回发引发指定的UpdatePanel更新的话,那应当要为实现刷新的UpdatePanel控件建立一个触发器。<br/> a.选中要进行局部更新的UpdatePanel控件。 <br/> b.在其属性页中点击Triggers集合属性右边的小按钮。<br/> c.在弹出的对话框中的成员列表中添加一个AsyncPostBackTriggers成员。<br/> d.指定AsyncPostBackTriggers成员的ControlID和EventName,即引发异步回送的控件的ID和该控件的事件。<br/> 完成以上步骤后,切换到HTML页面就会出现下列代码:<br/> <asp:UpdatePanel ID="UpdatePanel2" runat="server" RenderMode="Inline" UpdateMode="Conditional"><br/> <ContentTemplate><br/> <asp:Label ID="Label3" runat="server" Text="Label"></asp:Label><br/> </ContentTemplate><br/> <Triggers><br/> <asp:AsyncPostBackTrigger ControlID="Button2" EventName="Click" /><br/> </Triggers><br/> </asp:UpdatePanel><br/> <asp:Button ID="Button2" runat="server" OnClick="Button2_Click" Text="ButtonOut" /><br/> e.b到d的步骤可以直接在html页面中UpdatePanel控件内<ContentTemplate></ContentTemplate>之后添加<br/> <Triggers><asp:AsyncPostBackTrigger ControlID="Button2" EventName="Click" /></Triggers>,和上面步骤产生的代码是一样的<br/> <br/> 这里需要大家注意的是:<br/> 把所有的UpdatePanel控件的UpdateMode设为"Conditional",这样才能够针对建有相关触发器的UpdatePanel更新。<br/> 一个UpdatePanel上可以建有多个触发器,实现在不同的情况下对该UpdatePanel控件内容的更新。示例如下:<br/> <Triggers><br/> <asp:AsyncPostBackTrigger ControlID="Button1" EventName="Click"/><br/> <asp:AsyncPostBackTrigger ControlID="Button2" EventName="Click"/><br/> <asp:PostBackTrigger ControlID="Button3" EventName="Click"/><br/> </Triggers><br/> <br/>三、两个UpdatePanel控件,其中一个UpdatePanel内的控件引发两个UpdatePanel控件的同时刷新。<br/> a.在页面上放入两个UpdatePanel和一个ScriptManager控件。<br/> b.在UpdatePanel1中加入一个标签Label1、一个按钮Button1 ,在UpdatePanel2中加入一个标签Label2。<br/> c.将UpdatePanel1和UpdatePanel2两个控件的的UpdateMode属性设为"Always"<br/> c.在Button1的Click事件中加入下面的代码:<br/> protected void Button1_Click(object sender, EventArgs e)<br/> {<br/> Label1.Text = DateTime.Now.ToString();<br/> Label2.Text = DateTime.Now.ToString();<br/> }<br/> d.或者只在Page_Load事件中填写如下代码即可<br/> protected void Page_Load(object sender, EventArgs e)<br/> {<br/> Label1.Text = DateTime.Now.ToString();<br/> Label2.Text = DateTime.Now.ToString();<br/> }<br/> <br/> <br/>四、两个UpdatePanel控件,其中一个UpdatePanel内的控件引发当前的UpdatePanel控件的刷新,而另一个不刷新。<br/> a.步骤和上面的(三)一样<br/> b.要把UpdatePanel1和UpdatePanel2两个控件的UpdateMode属性设为Conditional,这里需要注意,如果将一个设置为Conditional,一个设置为Always则两个都会刷新的<br/> <asp:ScriptManager ID="ScriptManager1" runat="server"><br/> </asp:ScriptManager><br/> <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional"><br/> <ContentTemplate><br/> <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label><br/> <br /><br/> <asp:Button ID="Button1" runat="server" OnClick="Button1_Click1" Text="更新两个UpdatePanel" /><br/> </ContentTemplate><br/> </asp:UpdatePanel><br/> <asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional"><br/> <ContentTemplate><br/> <asp:Label ID="Label2" runat="server" Text="Label"></asp:Label><br/> </ContentTemplate><br/> </asp:UpdatePanel><br/>五、两个UpdatePanel控件,其中一个UpdatePanel内的控件引发另一个UpdatePanel控件的刷新,而本身不刷新。<br/> a.步骤和上面的(四)一样(两个都设置为Conditional)之后,还需要<br/> b.把UpdatePanel1和UpdatePanel2的ChildrenAsTriggers属性设为false<br/> c.在UpdatePanel2控件中加入一个触发器,触发源设到UpdatePanel1控件内的Button1的Click事件上。<br/> <asp:ScriptManager ID="ScriptManager1" runat="server"><br/> </asp:ScriptManager><br/> <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional" ChildrenAsTriggers="False"><br/> <ContentTemplate><br/> <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label><br/> <br /><br/> <asp:Button ID="Button1" runat="server" OnClick="Button1_Click1" Text="只更新UpdatePane2" /><br/> </ContentTemplate><br/> </asp:UpdatePanel><br/> <asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional"><br/> <ContentTemplate><br/> <asp:Label ID="Label2" runat="server" Text="Label"></asp:Label><br/> </ContentTemplate><br/> <Triggers><br/> <asp:AsyncPostBackTrigger ControlID="Button1" EventName="Click" /><br/> </Triggers><br/> </asp:UpdatePanel></p><p>在开发过程中难免会用到UpdatePanel控件的一些复杂的使用。<br/>如:UpdatePanel控件的嵌套、在母版页中使用UpdatePanel、在用户控件中使用UpdatePanel以及在GridView中使用UpdatePanel等。<br/>其实这些操作也免不了对UpdatePanel控件的UpdateMode属性、ChildrenAsTrigger属性以及触发器的使用,下面是系统地说明。</p><p>一、两个嵌套的UpdatePanel控件,外部的UpdatePanel内的控件回发引发二者同时更新<br/> 在页面上放一个ScriptManager和UpdatePanel控件(UpdatePanel1),在UpdatePanel1中放入一个标签控件 (lb1)、一个按钮(Button1)和另一个UpdatePanel控件(UpdatePanel2),在UpdatePanel2控件中放一 个标签控件lb2。<br/> <asp:ScriptManager ID="ScriptManager1" runat="server"><br/> </asp:ScriptManager><br/> <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional"><br/> <ContentTemplate><br/> <asp:Label ID="lb1" runat="server"></asp:Label><br/> <asp:Button ID="Button1" runat="server" OnClick="Button1_Click2" Text="Button" /><br/> <asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional"><br/> <ContentTemplate><br/> <asp:Label ID="lb2" runat="server"></asp:Label><br/> </ContentTemplate><br/> </asp:UpdatePanel><br/> </ContentTemplate><br/> </asp:UpdatePanel><br/> 在Button1控件中的Click事件中加入下面的代码:<br/> protected void Button1_Click2(object sender, EventArgs e)<br/> {<br/> lblIn.Text = DateTime.Now.ToString();<br/> lblOut.Text = DateTime.Now.ToString();<br/> }<br/> 要实现外部UpdatePanel内控件的回发引起内部和外部两个UpdatePanel控件的同时刷新的话,需要把两个UpdatePanel控件的 UpdateMode都设为Conditional,这样外部UpdatePanel内的控件回发会自动引起内部UpdatePanel控件的刷新。<br/> 注意:外部UpdatePanel控件的ChildrenAsTrigger属性要设为True,两个UpdatePanel控件的UpdateMode要都设为 Conditional,如果UpdateMode设为Always的话也会出现两个UpdatePanel同时刷新的效果,这样会导致页面上其它的 UpdatePanel控件也发生刷新。<br/> <br/>二、两个嵌套的UpdatePanel控件,内部的UpdatePanel内的控件回发引发二者同时更新<br/> 在页面上放一个ScriptManager和UpdatePanel控件(UpdatePanel1),在UpdatePanel1中放入一个标签控件 (lb1)和另一个UpdatePanel控件(UpdatePanel2),在UpdatePanel2控件中放一个标签控件lb2和一个按 钮(Button1)。<br/> <asp:ScriptManager ID="ScriptManager1" runat="server"><br/> </asp:ScriptManager><br/> <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional"><br/> <ContentTemplate><br/> <asp:Label ID="lb1" runat="server" ></asp:Label><br/> <br /><br/> <asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional"><br/> <ContentTemplate><br/> <asp:Label ID="lb2" runat="server" ></asp:Label><br/> <asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Button" /><br/> </ContentTemplate><br/> </asp:UpdatePanel><br/> </ContentTemplate><br/> <Triggers><br/> <asp:AsyncPostBackTrigger ControlID="Button1" EventName="Click" /><br/> </Triggers><br/> </asp:UpdatePanel><br/> 在按钮的Click事件中和(一)中的一样。<br/> 注意:<br/> 把两个UpdatePanel控件的UpdateMode属性设为Conditional,要把内部控件ChildrenAsTrigger设为 True。但这样内部UpdatePanel内的控件只引发自身的刷新,不会引发外部的UpdatePanel控件的刷新,不会刷新外部的 UpdatePanel控件,因此我们还需要为外部UpdatePanel控件加入一个触发器,触发源指定为Button1控件的Click事件上。</p><p>三、两个嵌套的UpdatePanel控件,外部的UpdatePanel内的控件回发只引发内部控件的更新<br/> 在页面上放一个ScriptManager和UpdatePanel控件(UpdatePanel1),在UpdatePanel1中放入一个标签控件 (lb1)、一个按钮(Button1)和另一个UpdatePanel控件(UpdatePanel2),在UpdatePanel2控件中放一个标签控件lb2。<br/> <asp:ScriptManager ID="ScriptManager1" runat="server"><br/> </asp:ScriptManager><br/> <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional" ChildrenAsTriggers="False"><br/> <ContentTemplate><br/> <asp:Label ID="lb1" runat="server" ></asp:Label><br/> <asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Button" /><br /><br/> <asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional"><br/> <ContentTemplate><br/> <asp:Label ID="lb2" runat="server" ></asp:Label>&nbsp;<br/> </ContentTemplate><br/> <Triggers><br/> <asp:AsyncPostBackTrigger ControlID="Button1" EventName="Click" /><br/> </Triggers><br/> </asp:UpdatePanel><br/> </ContentTemplate><br/> </asp:UpdatePanel><br/> 在按钮的Click事件中和(一)中的一样。<br/> 注意:<br/> 要把两个UpdatePanel控件的UpdateMode设为Conditional,把外部UpdatePanel控件的 ChildrenAsTrigger设为false。这样两个UpdatePanel控件都不会刷新,所以还要为内部的UpdatePanel控件建立触 发器,触发源指向外部UpdatePanel中的的Button1的Click事件上。<br/> <br/>四、母版页中使用UpdatePanel控件<br/> 如果将ScriptManager控件添加在母版页上的话,那么各内容页面就没必要再添加ScriptManager控件了,只需添加UpdatePanel控件就可以了,因为母版页和内容页面将来生成的是一个页面的实例,而在一个页面上是不允许同时存在两个ScriptManager控件的。<br/> 如果ScriptManager控件没有添加在母版页上的话,那只能把ScriptManager控件添加在其中一个内容页面里。不要向每一个内容页面中添加ScriptManager控件。<br/> 1、内容页面中的UpdatePanel内的控件引起回发,只更新当前内容页面的内容。<br/> 此时按钮分别在各自的UpdatePanel控件内。<br/> 将两个内容页面内的两个UpdatePanel控件的UpdateMode设为Conditional,ChildrenAsTrigger设为True。<br/> 在按钮的Click事件中和(一)中的一样。<br/> 这样就出现各内容页的UpdatePanel内的按钮只对当前内容页起作用。<br/> 2、在母版页中的按钮引起回发,更新指定内容页的信息。 <br/> 此时有两个按钮:ButtonOut在母版页中,ButtonIn在内容页面1中。<br/> 当点击ButtonOut时,异步更新两个内容页面的信息。当点击ButtonIn时,异步更新母版面中的UpdatePanel1中的信息。<br/> 母版页HTML代码如下:<br/> <div><br/> 母版页<br/> 3、<asp:ScriptManager ID="ScriptManager1" runat="server"><br/> </asp:ScriptManager><br/> <asp:UpdatePanel ID="UpdatePanel1" runat="server" RenderMode="Inline" UpdateMode="Conditional"><br/> <ContentTemplate><br/> <asp:Label ID="lbl" runat="server" Text="Label"></asp:Label><br/> </ContentTemplate><br/> </asp:UpdatePanel><br/> <br /><br/> <asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="ButtonOut" /><br /></p><p> <table width=80%><br/> <tr><br/> <td><br/> <asp:contentplaceholder id="ContentPlaceHolder1" runat="server"><br/> </asp:contentplaceholder><br/> </td><br/> <td bgcolor=maroon><br/> <asp:ContentPlaceHolder ID="ContentPlaceHolder2" runat="server"><br/> </asp:ContentPlaceHolder><br/> </td><br/> </tr><br/> </table><br/> <br /><br/> 内容页面的HTML代码如下:<br/> <%@ Page Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="Child.aspx.cs" Inherits="Child" Title="UpdatePanel Test Page" %><br/> <%@ MasterType VirtualPath="~/MasterPage.master" %><br/> <asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server"><br/> <asp:UpdatePanel ID="UpdatePanel1" runat="server"><br/> <ContentTemplate><br/> <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label><br/> <asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="ButtonInner" /><br/> </ContentTemplate><br/> </asp:UpdatePanel><br/> </asp:Content></p><p> <asp:Content ID="Content2" runat="server" ContentPlaceHolderID="ContentPlaceHolder2"><br/> <asp:UpdatePanel ID="UpdatePanel2" runat="server"><br/> <ContentTemplate><br/> <asp:Label ID="Label2" runat="server" Text="Label"></asp:Label><br/> </ContentTemplate><br/> </asp:UpdatePanel><br/> </asp:Content></p><p> 母版页的CS代码如下:<br/> protected void Page_Load(object sender, EventArgs e)<br/> {<br/> ScriptManager1.RegisterAsyncPostBackControl(this.Button1);<br/> }<br/> protected void Button1_Click(object sender, EventArgs e)<br/> {<br/> Label lbl1 = (Label)this.ContentPlaceHolder1.FindControl("Label1");<br/> lbl1.Text = DateTime.Now.ToString();<br/> Label lbl2 = (Label)this.ContentPlaceHolder2.FindControl("Label2");<br/> lbl2.Text = DateTime.Now.ToString();<br/> }</p><p> public string BindTitle<br/> {<br/> get<br/> {<br/> return lbl.Text;<br/> }<br/> set<br/> {<br/> lbl.Text = value;<br/> }<br/> } <br/> Child孩子页面的CS代码如下:<br/> protected void Button1_Click(object sender, EventArgs e)<br/> {<br/> Label1.Text = Master.BindTitle;<br/> Master.BindTitle = "ContentPage1's Action";<br/> ((UpdatePanel)Master.FindControl("UpdatePanel1")).Update(); ;<br/> }</p><p>五、用户控件中使用UpdatePanel控件<br/> 如果父页面中存在ScriptManager控件,那用户控件的页面中不应再放入ScriptManager控件了,只在用户控件中加入UpdatePanel。 <br/> 其控件的回发与更新规律与使用方式与母版页一样。</p><p>自己查看资料然后总结,若发现不足之处,还请斧正,本人将非常感谢,希望共同学习,共同进步,谢谢。。。</p><p><span style="font-size:18px"></span> <br/></p><p><a href="http://blog.csdn.net/chenhongwu666/article/details/41392529/" _src="http://blog.csdn.net/chenhongwu666/article/details/41392529/">http://blog.csdn.net/chenhongwu666/article/details/41392529/</a> <br/></p>
操作:
跳过导航链接。
净化工程
洁净室
汽车世界
安全常识
汽车养护
品牌欣赏
商品欣赏
商品评测
高逼格
商品对比
法律法规
法律法规
民生政策
游戏动漫
动漫天地
游戏欣赏
Flash游戏
健康生活
杂文
职务分类
便民服务
影视天地
教育
生活常识
饮食文化
偏方药方
养生之道
圣经领悟
开心一笑
品牌黑白帮
妇婴
旅游天地
购物天堂
中国村镇
旅游景点
旅游咨询
创业天地
创业故事
公司管理
创业项目
工作技巧
展会
资料
电脑技术
维修
电脑知识
文学
人间万象
历史
古诗词
人生感悟
海贝官方
商品欣赏
招标信息
海贝新闻
招聘专栏
关于我们
行情动态
海贝娱乐
海贝项目
会员礼品
商品报价
特惠信息
摄影天地
古风古韵
花鸟鱼虫
秀美山河
静物拍摄
风土人情
节日祝福
城市风光
美女摄影
编程天地
JAVA
UI
数据库
系统
asp.net
APP
JQ与JS