ASP.net中的AJAX学习记录之三 体会UpdateMode属性及使用UpdateTriggers

简介:
今天我主要学习了UpdateMode属性及使用UpdateTriggers,把书中所教授的内容用多个例子实践了一下,确实明白了许多。
   UpdateMode

      首先在上一篇也提到过这样一个理论:在谈论UpdatePanel控件的刷新时,当UpdatePanel控件中的子控件触发Async-Postback动作时,刷新的区域是“涵盖网页上的所以将 UpdateModevs提示的属性描述是“指明updatepanel是将在每次异步同发是刷新还是只在发生特定操作时刷新”)设为Always的UpdatePanel控件”,而不是单单只有触发Async-Postback的那个UpdatePanel控件。用我的话说, 就是一个页面上有可能有多个updatepanel控件,而每个updatepanel控件有一个共同的属性是UpdateMode, updateMode属性又有两个值:一个是Always,一个是Conditional。当页面每刷新一次,这样页面中的所有将updateMode属性设为Always的updatepanel也会跟着刷新,而这个页面中那些将updateMode属性设为Conditional的updatepanel会根据特定的操作条件来刷新,那么这个特定条件是用什么来设置的呢?答案是交由 Triggersvs提示的属性描述是“可以导致updatepanel更新的触发器的集合)或程序来控制该updatepanel控件的刷新。
 
   UpdateTriggers

 
     当一个updatepanel的刷新是根据一定的条件时,设置updateTriggers属性就显得很重要,只有updateTriggers中设定的控件发生Async-Postback动作时,这个updatepanel控件才会刷新。默认情况下,updatepanel控件的ChildrenAsTriggers属性值设为true,意味着位于此updatepanel控件中的子控件会自动成为updateTriggers的一部分,也就是说只要这些子控件发生Postback动作,这个Postback动作就将变成Async-Postback动作,完成后就会刷新此updatepanel中的内容。适当地利用updateMode及updateTriggers,可以对updatepanel控件的刷新做更细致的调整和更有效率的应用。上面这段话是我学习的那本书上的原话,用我的理解说呢,就是一个updatepanel自身的所有子控件都是Triggers集合当中的一员,除了自身的外,Triggers集合还可以添加其他非此updatepanel的控件,只要updatepanel1的Triggers集合中有的控件如:Button1发生了加入到Triggers集合中的Button1的Click事件时,就会带动updatepanel1中所有内容的更新,当然因为updatepanel1中的子控件也是Triggers集合中的一员,只是不必下如下图1中手动的添加到Triggers集合编辑器中,所以updatepanel1中子控件的发生了事件,也会带动updatepanel1刷新,大家明白了吗?
      实例体会UpdateMode属性及使用UpdateTriggers

 
      我们来回忆一下上一篇的最后一个例子,把它简化了去掉一些功能只留下这样的效果,即是将一个表加入到UpdatePanel中,会自动形成了绑定表的sqldatasouce和GridView,同时在UpdatePanel中加入了一个Button,但点击Button时,将GridView中的第3行处于编辑状态,因为Button在updatepanel内部,所以Button1_Click事件能带动updatepanel1的刷新,页面的局部刷新。   
     实例1:我们把Button1放到updatepanel1的外部,updatepanel的任何属性也不变,cs代码不改变,还是如下:
   protected void Button1_Click(object sender, EventArgs e)
    {
        //当用户点击Button1时,GridView1控件的第3行数据处于编辑状态。
        GridView1.EditIndex = 2;
        GridView1.DataBind();
    }
运行程序后,会发现点击Button1时,GridView1的第三行也能处于编辑状态,但是页面是整体刷新的(看出整体刷新的方法很简单就是有IE后退键有效了,同时听到了熟悉的唰的声音,页面也大范围的有动的感觉),从这个例子就说明了,updatepanel的updateMode属性在默认的情况下是Always,也就是会跟随整个页面刷新。
      实例2:现在我们做另一个例子就是Button1还是在updatepanel的外部,但是要的效果是页面局部刷新,这样我们就需要把放置GridView1的updatepanel的updateMode属性改成Conditional,同时用到Triggers集合编辑器了,下面图1是一个修改updatepanel1属性的截图,
       在updateTriggers集合编辑器中点击添加,新增一个Trigger触发器,在ControlID中应选择了带动此updatepanel刷新的控件的名字,在下拉菜单自然也会有页面上其他的控件,包括updatepanel中的子控件,我们选中Button1,在Triggers的EventName的下拉菜单中会出现Button控件的所有事件,我们选择Click事件,单击确定,结束配置。这个环节的操作, 是为了告诉updatepanel1当Button1发生Click事件时,它带动的页面Postback动作,将被视为Async-Postback动作,当此动作发至Server后,updatepanel1控件会判断送出此Async-Postback动作是否在它的(updatepanel1)Triggers设定中,再判断事件名称是否符合,两者都符合时,updatepanel1控件便会进行刷新动作。还是上面的cs代码,再次运行,我们就不会感受到整体页面的刷新了(IE的后退键是无效的)。   
       实例3: 现在我们再在这个页面中加入一个updatepanel2,在updatepanel2中加入一个label1,这个updatepanel2的updateMode属性值是默认的Always,不改变,我们的这个例子就是让大家体会出,当Button1点击时,它所引发的Postback对updatepanel1来说是Async-Postback动作,updatepanel1会刷新,但是因为updatepanel2的updateMode属性值是默认的Always,那么对updatepanel2来说这个刷新就是Postback刷新,也就是updatepanel2的刷新是会随updatepanel1的刷新的动作一并发生的,我们把label1的Text值是获取系统的当前时间这段代码写在整体页面的Postback{}中,就会发现每次点击Button1时,label1的Text是改变的,也就是页面整体的Postback是发生的,现在我们来观察一下整体页面是截图2:
1 < html  xmlns ="http://www.w3.org/1999/xhtml" > 
2 < head  runat ="server" > 
3         < title >无标题页 </title> 
4         < script  type ="text/javascript" > 
5         
6            function pageLoad() { 
7            } 
8         
9         </script> 
10 </head> 
11 < body > 
12         < form  id ="form1"  runat ="server" > 
13         < div > 
14                 < asp:ScriptManager  ID ="ScriptManager1"  runat ="server"  /> 
15         </div> 
16         < asp:UpdatePanel  ID ="UpdatePanel1"  runat ="server"  UpdateMode ="Conditional" > 
17                 < ContentTemplate > 
18                        <asp:GridView ID="GridView1" runat="server"    
19        AutoGenerateColumns="False"    
20        DataSourceID="SqlDataSource1" EmptyDataText="没有可显示的数据记录。" AllowPaging="True"    
21                                PageSize="5"> 
22                                 < Columns > 
23                                         < asp:CommandField  ShowEditButton ="True"  /> 
24                                        <asp:BoundField DataField="id" HeaderText="id" InsertVisible="False"    
25                                                ReadOnly="True" SortExpression="id" /> 
26                                        <asp:BoundField DataField="projectid" HeaderText="projectid"    
27                                                SortExpression="projectid" /> 
28                                        <asp:BoundField DataField="marketid" HeaderText="marketid"    
29                                                SortExpression="marketid" /> 
30                                        <asp:BoundField DataField="marketyear" HeaderText="marketyear"    
31                                                SortExpression="marketyear" /> 
32                                         < asp:BoundField  DataField ="cdxm"  HeaderText ="cdxm"  SortExpression ="cdxm"  /> 
33                                         < asp:BoundField  DataField ="cdje"  HeaderText ="cdje"  SortExpression ="cdje"  /> 
34                                 </Columns> 
35                         </asp:GridView> 
36                        <asp:SqlDataSource ID="SqlDataSource1" runat="server"    
37        ConnectionString=" < %$ ConnectionStrings:erp_dataConnectionString % >"    
38        ProviderName=" < %$ ConnectionStrings:ReportServerConnectionString1.ProviderName % >"    
39        SelectCommand="SELECT * FROM [cd]"> </asp:SqlDataSource> 
40                 </ContentTemplate> 
41                 < Triggers > 
42                         < asp:AsyncPostBackTrigger  ControlID ="Button1"  EventName ="Click"  /> 
43                 </Triggers> 
44         </asp:UpdatePanel> 
45         < p > 
46                <asp:Button ID="Button1" runat="server" onclick="Button1_Click"    
47                        Text="点击我第3行处于编辑状态" /> 
48         </p> 
49         < asp:UpdatePanel  ID ="UpdatePanel2"  runat ="server" > 
50                 < ContentTemplate > 
51                         < asp:Label  ID ="Label1"  runat ="server"  Text ="Label" > </asp:Label> 
52                 </ContentTemplate> 
53         </asp:UpdatePanel> 
54         </form> 
55 </body> 
56 </html>
InBlock.gif 1public partial  class UseTriggers : System.Web.UI.Page 
InBlock.gif 2{ 
InBlock.gif 3         protected  void Page_Load( object sender, EventArgs e) 
InBlock.gif 4        { 
InBlock.gif 5                 //获取当前时间 
InBlock.gif 6                Label1.Text = "我在updatepanel2里:"+ DateTime.Now.ToString(); 
InBlock.gif 7        } 
InBlock.gif 8         protected  void Button1_Click( object sender, EventArgs e) 
InBlock.gif 9        { 
InBlock.gif10                 //当点击第Button时,GridView1第3行进入编辑状态 
InBlock.gif11                GridView1.EditIndex = 2; 
InBlock.gif12                GridView1.DataBind(); 
InBlock.gif13        } 
InBlock.gif14 
InBlock.gif15}
我们每点击一次Button1,label1的值就会变化一次,但整体页面还是局部刷新。
     实例4:下面我们把updatepanel2的updateMode属性改成Conditional,但是在updatepanel2的Triggers中不加入任何控件触发器,目的是让大家体会出,当updatepanel2的updateMode属性改成Conditional时,Triggers中没有的控件发生事件后,除了updatepanel2自身控件发生事件引发updatepanel2刷新外,updatepanel2外的控件如果没有添加到Triggers中,这些控件的所引发的Postback动作,对updatepanel2的刷新是无效的,虽然label2也是放在Postback{}中,但是缺少了文中加下划线的操作是不符合updatepanel的Postback条件的,所以当点击Button1时,label1的系统时间是不会变动的,还是页面第一次被加载是的时间,整体的cs代码不变,效果图也不会体现出点击后时间不变的效果,所以我就没有再截图,大家一定要自己动手试一试,才能真实的体会出本篇博客所讲述的知识点。
本文转自叶子文文博客51CTO博客,原文链接http://blog.51cto.com/leafwf/185672如需转载请自行联系原作者

叶子文文
相关文章
|
API
.net core工具组件系列之Autofac—— 第二篇:Autofac的3种依赖注入方式(构造函数注入、属性注入和方法注入),以及在过滤器里面实现依赖注入
本篇文章接前一篇,建议可以先看前篇文章,再看本文,会有更好的效果。前一篇跳转链接:https://www.cnblogs.com/weskynet/p/15046999.html
410 0
.net core工具组件系列之Autofac—— 第二篇:Autofac的3种依赖注入方式(构造函数注入、属性注入和方法注入),以及在过滤器里面实现依赖注入
|
1月前
|
XML 开发框架 .NET
C# .NET面试系列八:ADO.NET、XML、HTTP、AJAX、WebService
## 第二部分:ADO.NET、XML、HTTP、AJAX、WebService #### 1. .NET 和 C# 有什么区别? .NET(通用语言运行时): ```c# 定义:.NET 是一个软件开发框架,提供了一个通用的运行时环境,用于在不同的编程语言中执行代码。 作用:它为多语言支持提供了一个统一的平台,允许不同的语言共享类库和其他资源。.NET 包括 Common Language Runtime (CLR)、基础类库(BCL)和其他工具。 ``` C#(C Sharp): ```c# 定义: C# 是一种由微软设计的面向对象的编程语言,专门为.NET 平台开发而创建。 作
174 2
|
4月前
|
XML JSON 前端开发
ajax框架格式,每个属性的作用是什么
ajax框架格式,每个属性的作用是什么
27 0
|
9月前
|
前端开发 JavaScript
Echarts实战案例代码(22):jquery使用ajax属性beforeSend实现预加载loading效果代替showLoading的解决方案
Echarts实战案例代码(22):jquery使用ajax属性beforeSend实现预加载loading效果代替showLoading的解决方案
73 0
|
5月前
|
开发框架 前端开发 .NET
用ajax和asp.net实现智能搜索功能
用ajax和asp.net实现智能搜索功能
43 0
|
9月前
|
前端开发
解决.NET Core Ajax请求后台传送参数过大请求失败问题
解决.NET Core Ajax请求后台传送参数过大请求失败问题
|
9月前
|
前端开发
ajax 通过move_uploaded_file函数上传图片获取$_FILES['file']对象的属性内容
ajax 通过move_uploaded_file函数上传图片获取$_FILES['file']对象的属性内容
38 0
|
10月前
|
开发框架 前端开发 JavaScript
【Asp.net】 Ajax小例子
【Asp.net】 Ajax小例子
68 0
|
开发框架 前端开发 JavaScript
ASP.Net Core中使用jquery-ajax-unobtrusive替换Ajax.BeginForm
ASP.Net Core中使用jquery-ajax-unobtrusive替换Ajax.BeginForm
154 0
|
XML JSON 数据格式
.NET中XML序列化和反序列化常用类和用来控制XML序列化的属性总结(XmlSerializer,XmlTypeAttribute,XmlElementAttribute,XmlAttributeAttribute,XmlArrayAttribute...)
.NET中XML序列化和反序列化常用类和用来控制XML序列化的属性总结(XmlSerializer,XmlTypeAttribute,XmlElementAttribute,XmlAttributeAttribute,XmlArrayAttribute...)
241 0

相关实验场景

更多