昨天我继续学习了《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>
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行
服务器端代码
1
using System.Web.UI;
2
using System.Web.UI.HtmlControls;
3
using System.Web.UI.WebControls;
4
using System.Web.UI.WebControls.WebParts;
5
using System.Xml.Linq;
6
7
public partial
class _Default : System.Web.UI.Page
8 {
9
protected
void Page_Load(
object sender, EventArgs e)
10 {
11
12 }
13
protected
void Button1_Click(
object sender, EventArgs e)
14 {
15 Button1.Text =
"我是内部的Button"+ DateTime.Now.ToString();
16 }
17
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" 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>
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事件。
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;
13
14public partial
class _Default : System.Web.UI.Page
15{
16
protected
void Page_Load(
object sender, EventArgs e)
17 {
18
19 }
20
protected
void Button1_Click(
object sender, EventArgs e)
21 {
22 Button1.Text =
"我是内部的Button" + DateTime.Now.ToString();
23 }
24
protected
void Button2_Click(
object sender, EventArgs e)
25 {
26 Button2.Text =
"我是外部的Button" + DateTime.Now.ToString();
27 }
28
protected
void Button3_Click(
object sender, EventArgs e)
29 {
30
//当用户点击Button3时，GridView1控件的第3行数据处于编辑状态。
31 GridView1.EditIndex = 2;
32 GridView1.DataBind();
33 }
34
protected
void GridView1_RowEditing(
object sender, GridViewEditEventArgs e)
35 {
36
//当用户点击GridView1中第一列的编辑按钮时，在进入编辑状态前使用线程停止3秒。
37 System.Threading.Thread.Sleep(3000);
38 }
39
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如需转载请自行联系原作者
叶子文文
