Asp.net中的AJAX学习记录之二体会AJAX页面刷新的不同（初体验）-白红宇

昨天我继续学习了《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行

服务器端代码

using System.Web.UI;

using System.Web.UI.HtmlControls;

using System.Web.UI.WebControls;

using System.Web.UI.WebControls.WebParts;

using System.Xml.Linq;

public partial

class _Default : System.Web.UI.Page

8 {

protected

void Page_Load(

object sender, EventArgs e)

10 {

12 }

protected

void Button1_Click(

object sender, EventArgs e)

14 {

15 Button1.Text =

"我是内部的Button"+ DateTime.Now.ToString();

16 }

protected

void Button2_Click(

object sender, EventArgs e)

18 {

19 Button2.Text =

"我是外部的Button" + DateTime.Now.ToString();

20 }

这是一个通过点击两个按钮来观察页面刷新状态的例子，一定要动手自己亲自试试呀！这样你才能真的体会出不同，你会发现放在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" οnclick=

"Button1_Click" />

6 </ContentTemplate>

7 </asp:UpdatePanel>

8 <asp:Button ID=

"Button2" runat=

"server" Text=

"Button"

9 οnclick=

"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]"

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" οnclick=

"Button3_Click"

59 Text=

"点击我GridView1中的第3行将处于编辑状态" />

60 </ContentTemplate>

61 </asp:UpdatePanel>

编写Button3的Click事件和GridView的RowEditing事件。

1using System;

2using System.Collections;

3using System.Configuration;

4using System.Data;

5using System.Linq;

6using System.Web;

7using System.Web.Security;

8using System.Web.UI;

9using System.Web.UI.HtmlControls;

10using System.Web.UI.WebControls;

11using System.Web.UI.WebControls.WebParts;

12using System.Xml.Linq;

14public partial

class _Default : System.Web.UI.Page

15{

protected

void Page_Load(

object sender, EventArgs e)

17 {

19 }

protected

void Button1_Click(

object sender, EventArgs e)

21 {

22 Button1.Text =

"我是内部的Button" + DateTime.Now.ToString();

23 }

protected

void Button2_Click(

object sender, EventArgs e)

25 {

26 Button2.Text =

"我是外部的Button" + DateTime.Now.ToString();

27 }

protected

void Button3_Click(

object sender, EventArgs e)

29 {

//当用户点击Button3时，GridView1控件的第3行数据处于编辑状态。

31 GridView1.EditIndex = 2;

32 GridView1.DataBind();

33 }

protected

void GridView1_RowEditing(

object sender, GridViewEditEventArgs e)

35 {

//当用户点击GridView1中第一列的编辑按钮时，在进入编辑状态前使用线程停止3秒。

37 System.Threading.Thread.Sleep(3000);

38 }

40}

需要注意的是，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如需转载请自行联系原作者

叶子文文