Asp.net中的AJAX学习记录之二 体会AJAX页面刷新的不同(初体验)

  1. 云栖社区>
  2. 博客>
  3. 正文

Asp.net中的AJAX学习记录之二 体会AJAX页面刷新的不同(初体验)

科技探索者 2017-11-20 18:50:00 浏览720
展开阅读全文
   昨天我继续学习了《ASP.net AJAX与silverlight 实战手册》中的第二章,将学习记录和体会总结下来,希望用自己的语言能把AJAX刷新的不同表达清楚。
一.新建网站:
        我的IDE的VS2008专业版,自带AJAX开发组件,新建网站时,不会出现专门的如2005中的“ASP.net AJAX-Enabled Web Site”模板,可以按照通常的习惯建立一个“ASP.net 网站”模板,打开的默认页面是没有任何控件的,如果这个页面你要使用AJAX控件,就先在页面上放置(拖放到页面上)ScriptManager控件,但是当你点击“添加新项”后会出现如图1的选择"AJAX web窗体"后,会出现自带ScriptManager控件的页面如图1Default.aspx,如果你用的IDE是VS2005,选择“ASP.net AJAX-Enabled Web Site”模板后,默认产生的Default.aspx页面就会自动的放置一个ScriptManager控件如图1Default.aspx,每个欲使用ASp.net AJAX技术的网页里都需要放置这个控件。那么这个ScriptManager控件是干什么的呢?
        ScriptManager控件:主要的作用在于将ASP.net AJAX Client Framework 放置到该页面中,这样UpdatePanel及UpdateProgress等ASP.net AJAX控件都需要这组JavaScript函数库方能正常运作,ScriptManager控件提供了许多属性供设计师调校,这些属性现在比较难理解,我把他放在后面学习理解,现在对ASP.net AJAX Client Framework 的理解也是比较片面的,还是写出来让读者也能大体的了解一下,这本书有专门的章节对ASP.net AJAX Client Framework 进行讲解。
       ASP.net AJAX Client Framework :除了能够解决JavaScript中面向对象的技巧外(也就是学习记录一中提到的不用写一行js代码),同时还提供了跨浏览器的支持机制,此机制可以协助设计师撰写出跨浏览器的网页。
二.页面布置实例1.
        在Default.aspx页面中放置一个UpdatePanel控件,这个控件从外观上看与panel控件一样,也可以在UpdatePanel中放入大多数的asp.net控件,然后我们找一个有数据的表,我用的是Area表,一个融资明细表,下面用到了一个与以往不同的填充GridView控件表数据的方法,就是利用VS的特性直接将表从服务器资源管理器中将Area表拖到Default.aspx页面UpdatePanel控件外,如图1最左边第三个表Area,然后不做任何操作,页面就会自动的出现一个sqldatasouce控件和GridView控件,同时这两个控件已经绑定好,同时填充了Area表的数据,如图GridView1的上部是UpdatePanel1:
     这种特性是数据源控件的最简单的使用方法,不用编写一行代码,我们可以选取你想对GridView开启的功能,如图2所示启用分页、排序、编辑、删除、选定内容,也可以用往常的方式对GridView进行列编辑甚至编辑模板,但是这种直接拖拉的方式,对表的填充是没有限制的和条件的,如果你想有限制,继续配置sqldatasouce数据源控件中的sql语句,除了这种方法我们也可以按照传统的方式绑定数据源,或是使用DateTable作为数据源填充GridView1(我现在正在准备一个GridView控件使用的系列,将会具体讲解),就这个例子来看,我们主要是想体会AJAX的刷新问题,就不具体讲解GridView了,现在我们先不启用GridView1中的任何一种属性功能,做接下来的工作,我们再放一个Button1在UpdatePanel控件内部图3第6行,再放一个Button2在UpdatePanel控件外部图3第9行
1    <div> 
2                 <asp:ScriptManager ID="ScriptManager1" runat="server" /> 
3         </div> 
4         <asp:UpdatePanel ID="UpdatePanel1" runat="server"> 
5                 <ContentTemplate> 
6                         <asp:Button ID="Button1" runat="server" Text="Button" /> 
7                 </ContentTemplate> 
8         </asp:UpdatePanel> 
9                         <asp:Button ID="Button2" runat="server" Text="Button"     /> 
10        <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False"    
11                 DataKeyNames="id" DataSourceID="SqlDataSource1" EmptyDataText="没有可显示的数据记录。"> 
12                <Columns> 
 同时在这两个Button的Click事件中编写如下代码:图4第15、19行
 服务器端代码
InBlock.gif 1 using System.Web.UI; 
InBlock.gif 2 using System.Web.UI.HtmlControls; 
InBlock.gif 3 using System.Web.UI.WebControls; 
InBlock.gif 4 using System.Web.UI.WebControls.WebParts; 
InBlock.gif 5 using System.Xml.Linq; 
InBlock.gif 6    
InBlock.gif 7 public partial class _Default : System.Web.UI.Page    
InBlock.gif 8 { 
InBlock.gif 9         protected void Page_Load(object sender, EventArgs e) 
InBlock.gif10         { 
InBlock.gif11    
InBlock.gif12         } 
InBlock.gif13         protected void Button1_Click(object sender, EventArgs e) 
InBlock.gif14         { 
InBlock.gif15                 Button1.Text ="我是内部的Button"+ DateTime.Now.ToString(); 
InBlock.gif16         } 
InBlock.gif17         protected void Button2_Click(object sender, EventArgs e) 
InBlock.gif18         { 
InBlock.gif19                 Button2.Text = "我是外部的Button" + DateTime.Now.ToString(); 
InBlock.gif20         }
        这是一个通过点击两个按钮来观察页面刷新状态的例子,一定要动手自己亲自试试呀!这样你才能真的体会出不同,你会发现放在UpdatePanel外部的Button2被点击的时候,对比GridView1中的表格数据,网页有非常明显的刷新的动作,而UpdatePanel内部的Button1被点击的时,没有明显的刷新,而且如果你是先点击内部Button1时观察一下IE的后退按钮是无效的如图5,而当你点击Button2时,会出现后退按钮有效如图6,而且后退回去到当次Button2被点击的前网页如图5,这就很明显的说明了放置在UpdatePanel内部的控件是局部刷新,而外部的会带动整个页面的刷新。
      我们来看一下工作原理:在用户点击UpdatePanel控件里面的Button1时,页面会进行一次postback动作,不同于传统的ASP.net页面的Postback动作,UpdatePanel中的控件的Postback动作成为Async-Postback,也就是非同步的Postback。这种类型的Postback动作不会导致整个网页刷新,而仅仅是刷新此控件所在的UpdatePanel控件及页面上的所有将UpdateMode属性设为Always的UpdatePanel控件内的内容(页面上不止一个UpdatePanel时),相对于传统的刷新整个网页的动作,async-postback的动作不容易被用户察觉。对用户而言,如果画面上的这些UpdatePanel控件所涵盖的区域较大时,也只会察觉到这些区域内的网页似乎有种停滞感,而不是如以往般,整个网页会变成全白然后再显示。
 三.  扩展实例1,学习Async-Postback的特性:
     接下来,我们再来放入Default.aspx页面一个UpdatePanel2控件,将原本的GridView1和sqldatasouce1移到这个UpdatePanel2中,接着再放入到UpdatePanel2中一个Button3,或者你可以像我一样直接在客户端手动的加入UpdatePanel2,如图7中第3、4和第6、7行就是一个UpdatePanel控件的源代码,把UpdatePanel2的开始3、4写在图3第10行,结束6、7写在Button3的结束标记的后面如图7的60行,启动GridView1的编辑、删除功能,会在数据表的前面自动的加入一列。源代码如下:
1                <asp:ScriptManager ID="ScriptManager1" runat="server" /> 
2        </div> 
3        <asp:UpdatePanel ID="UpdatePanel1" runat="server"
4                <ContentTemplate> 
5                        <asp:Button ID="Button1" runat="server" Text="Button" onclick="Button1_Click" /> 
6                </ContentTemplate> 
7        </asp:UpdatePanel> 
8                        <asp:Button ID="Button2" runat="server" Text="Button"    
9                onclick="Button2_Click" /> 
10                 <asp:UpdatePanel ID="UpdatePanel2" runat="server"
11                         <ContentTemplate> 
12                                 <asp:GridView ID="GridView1" runat="server"    
13        AutoGenerateColumns="False" DataKeyNames="id" DataSourceID="SqlDataSource1"    
14        EmptyDataText="没有可显示的数据记录。" onrowediting="GridView_RowEditing"
15                                         <Columns> 
16                                                 <asp:CommandField ShowDeleteButton="True" ShowEditButton="True" /> 
17                                                 <asp:BoundField DataField="id" HeaderText="id"    
18                        ReadOnly="True" SortExpression="id" /> 
19                                                 <asp:BoundField DataField="areaname"    
20                        HeaderText="areaname" SortExpression="areaname" /> 
21                                                 <asp:BoundField DataField="areamoney"    
22                        HeaderText="areamoney" SortExpression="areamoney" /> 
23                                                 <asp:BoundField DataField="areatime"    
24                        HeaderText="areatime" SortExpression="areatime" /> 
25                                                 <asp:BoundField DataField="areaovertime"    
26                        HeaderText="areaovertime" SortExpression="areaovertime" /> 
27                                                 <asp:BoundField DataField="arearule"    
28                        HeaderText="arearule" SortExpression="arearule" /> 
29                                         </Columns> 
30                                 </asp:GridView> 
31                                 <asp:SqlDataSource ID="SqlDataSource1" runat="server"    
32        ConnectionString="<%$ ConnectionStrings:erp_dataConnectionString %>"    
33        DeleteCommand="DELETE FROM [Area] WHERE [id] = @id"    
34        InsertCommand="INSERT INTO [Area] ([areaname], [areamoney], [areatime], [areaovertime], [arearule]) VALUES (@areaname, @areamoney, @areatime, @areaovertime, @arearule)"    
35        ProviderName="<%$ ConnectionStrings:erp_dataConnectionString.ProviderName %>"    
36        SelectCommand="SELECT [id], [areaname], [areamoney], [areatime], [areaovertime], [arearule] FROM [Area]"    
37         
38                                         UpdateCommand="UPDATE [Area] SET [areaname] = @areaname, [areamoney] = @areamoney, [areatime] = @areatime, [areaovertime] = @areaovertime, [arearule] = @arearule WHERE [id] = @id"
39                                         <DeleteParameters> 
40                                                 <asp:Parameter Name="id" Type="Int32" /> 
41                                         </DeleteParameters> 
42                                         <InsertParameters> 
43                                                 <asp:Parameter Name="areaname" Type="String" /> 
44                                                 <asp:Parameter Name="areamoney" Type="String" /> 
45                                                 <asp:Parameter Name="areatime" Type="String" /> 
46                                                 <asp:Parameter Name="areaovertime" Type="String" /> 
47                                                 <asp:Parameter Name="arearule" Type="String" /> 
48                                         </InsertParameters> 
49                                         <UpdateParameters> 
50                                                 <asp:Parameter Name="areaname" Type="String" /> 
51                                                 <asp:Parameter Name="areamoney" Type="String" /> 
52                                                 <asp:Parameter Name="areatime" Type="String" /> 
53                                                 <asp:Parameter Name="areaovertime" Type="String" /> 
54                                                 <asp:Parameter Name="arearule" Type="String" /> 
55                                                 <asp:Parameter Name="id" Type="Int32" /> 
56                                         </UpdateParameters> 
57                                 </asp:SqlDataSource> 
58                                 <asp:Button ID="Button3" runat="server" onclick="Button3_Click"    
59                                         Text="点击我GridView1中的第3行将处于编辑状态" /> 
60                         </ContentTemplate> 
61        </asp:UpdatePanel>
编写Button3的Click事件和GridView的RowEditing事件。
InBlock.gif 1using System; 
InBlock.gif 2using System.Collections; 
InBlock.gif 3using System.Configuration; 
InBlock.gif 4using System.Data; 
InBlock.gif 5using System.Linq; 
InBlock.gif 6using System.Web; 
InBlock.gif 7using System.Web.Security; 
InBlock.gif 8using System.Web.UI; 
InBlock.gif 9using System.Web.UI.HtmlControls; 
InBlock.gif10using System.Web.UI.WebControls; 
InBlock.gif11using System.Web.UI.WebControls.WebParts; 
InBlock.gif12using System.Xml.Linq; 
InBlock.gif13 
InBlock.gif14public partial class _Default : System.Web.UI.Page 
InBlock.gif15{ 
InBlock.gif16        protected void Page_Load(object sender, EventArgs e) 
InBlock.gif17        { 
InBlock.gif18 
InBlock.gif19        } 
InBlock.gif20        protected void Button1_Click(object sender, EventArgs e) 
InBlock.gif21        { 
InBlock.gif22                Button1.Text = "我是内部的Button" + DateTime.Now.ToString(); 
InBlock.gif23        } 
InBlock.gif24        protected void Button2_Click(object sender, EventArgs e) 
InBlock.gif25        { 
InBlock.gif26                Button2.Text = "我是外部的Button" + DateTime.Now.ToString(); 
InBlock.gif27        } 
InBlock.gif28        protected void Button3_Click(object sender, EventArgs e) 
InBlock.gif29        { 
InBlock.gif30                //当用户点击Button3时,GridView1控件的第3行数据处于编辑状态。 
InBlock.gif31                GridView1.EditIndex = 2; 
InBlock.gif32                GridView1.DataBind(); 
InBlock.gif33        } 
InBlock.gif34        protected void GridView1_RowEditing(object sender, GridViewEditEventArgs e) 
InBlock.gif35        {    
InBlock.gif36                //当用户点击GridView1中第一列的编辑按钮时,在进入编辑状态前使用线程停止3秒。 
InBlock.gif37                System.Threading.Thread.Sleep(3000); 
InBlock.gif38        } 
InBlock.gif39        
InBlock.gif40} 
     需要注意的是,RowEditing事件不会被Button3的Click事件中EditIndex属性激发,现在运行一下这个界面,先点击GridView1中的任意一行的编辑(只点击一行),在3秒后,你所单击的那行才会进入编辑状态,这是由图8中的第37行所控制的,如果你点击第一行后,在“0.1秒的时间内”(台词)再点击第二行,就会出现这样的情况,3秒过去后只有第二行处于编辑状态,而第一行没有任何变化,这个情况也是我们加入Button3想演示的效果,下面我们来试一下这个操作:先点击第一行的编辑,此时网页会因Async-Postback动作的关系,出现停滞状态,请立刻点击Button3,此时我们会发现第3行马上进入到了编辑状态,而等待了6秒后,第一行也是没有进入的编辑状态,如图9
这个例子告诉我们什么了呢?
    当UpdatePanel控件中有一个Async-Postback动作的发生时,而后端需要较多的时间来处理这个动作时(如线程停止3秒),页面会出现停滞状态,但此时所有页面上的所有控件仍处于“可操作状态”,若用户于此期间操作网页上的控件而触发了另一个Async-Postback动作时,虽然前一个Async-Postback动作仍会“正常的完成”,不过此Async-Postback后的动作将会被放弃,也就是原本第一次发生Async-Postback后所会传的UpdatePanel控件之“更新信息会被放弃掉”,也就是无法回执到页面上,页面体现就会显示为无效操作,这有可能会引发一些问题,后面的章节会详细的讨论。
    通过这两个例子,我体会出了笔者想表达的意思,希望看过我这篇博客的你,也能明白我想表达的意思。
本文转自叶子文文博客51CTO博客,原文链接http://blog.51cto.com/leafwf/185676如需转载请自行联系原作者

叶子文文

网友评论

登录后评论
0/500
评论
科技探索者
+ 关注