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了
Trackback: http://tb.blog.csdn.net/TrackBack.aspx?PostId=1781404