7步实现GridView控件"ajax"化

 本文英文原版与代码下载：
http://mattberseth.com/blog/2007/05/7_simple_steps_to_ajaxenable_y.html

7步实现GridView控件"ajax"化

第一步：下载安装官方ASP.NET Ajax Framework

微软不久前发布了.Net 2.0 Ajax framework(以前叫Atlas)。你可以到http://ajax.asp.net/上去下载

第二步：下载并安装ajax control toolkit

该工具包含系列community developed controls控件，它们对现有的控件进行了扩展(绝大部分为客户端).下载的为一个zip压缩文件，其包含了一个showcase website， 里面的交互页面可以处理不同的控件，下载地址为http://ajax.asp.net/ajaxtoolkit/

第三步：向web.config添加Ajax条目

                                                                                                   图1

这一步稍微有点麻烦，在使用Ajax特性之前我们必须向web.config添加一些条目。我发现最容易的方法是使用web.config的一个模板，再向其添加应用程序必需的设置.要获得web.config的模板，你可以导航到ASP.NET Ajax Framework的安装目录(就我的机器而言，它在C:/Program Files/Microsoft ASP.NET/ASP.NET 2.0 AJAX Extensions/v1.0.61025文件夹里)，将里面的web.config做为你的模板.另外，如果你是构建一个全新的网站，你可以运用ASP.NET Ajax-Enabled Web Site模板来创建.它将自动向web.config添加必需的设置.

第四步:向你的web site添加一个AjaxControlToolkit.dll的引用

1.在工具箱里单击右键选“Add Tab”创建一个新的选项卡，命名为‘Ajax Toolkit’

2.在'Ajax Toolkit'里右键单击，选'Choose Items …'项

3.导航到你下载的Ajax Control Toolkit的解压缩文件的SampleWebSite/bin目录下，选择AjaxControlToolkit.dll文件.

第五步：添加GridView控件

现在你只需要添加一个GridView控件，在我们的案例里我们只有一个单一的页面，调用northwind数据库来查看Order信息.

第六步：向页面添加Ajax.NET components

Ajax framework需要所有使用Ajax的页面都包含一个ScriptManager控件，从工具箱里将其拖到页面上.

                                                                                                 图2

最后，局部页面绘制(也就是GridView控件里的数据不用通过整体页面进行绘制)。在开始局部页面绘制前，Ajax framework需要知道2条信息：

1.页面的哪部分需要局部绘制(比如我们的GridView控件)
2.导致该部分再绘制的事件

我们将你要刷新的内容放置在UpdatePanel控件的ContentTemplate里，我们也要告知UpdatePanel什么触发了刷新.在我们的例子里，点击btnFindOrder将导致GridView重新绘制，所以我们要告知UpdatePanel，当btnFindOrder的‘Click’服务器端事件触发时，将导致GridView重新绘制.

第七步：Add an animation extender

现在已经可以了，但是如果使用UpdatePanelAnimationExtender的话会更好.上述方法有个问题，当后台向服务器检索Order信息时，用户无法知道发生了什么事。在某些时候这没有问题，但如果操作时间比较长，超过几秒钟的时间话，我们最后给用户某些视觉方面的提示，正在发生什么事情.(你运行本例子时，可在BtnFindOrders_Click事件里调用Thread.Sleep方法试试看).

我们可以使用AjaxControlToolkit提供的UpdatePanelAnimationExtender 来解决这个问题.我们设置它做如下的事情：

1.当操作进行时使btnFindOrder按钮失效

2.当查询进行时使GridView控件“淡出”(Fade out)

为此，我们要：

1.将UpdatePanelAnimatorExtender控件拖到页面

2.将其TargetControlID设置为我们稍早创建的UpdatePanel控件的ID值(本例为udpOrderDetails)，

就这样，你的页面现在便实现ajax了