7步实现GridView控件"ajax"化

1741人阅读 评论(0) 收藏 举报

 本文英文原版与代码下载:
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了

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:401936次
    • 积分:5419
    • 等级:
    • 排名:第4905名
    • 原创:14篇
    • 转载:89篇
    • 译文:85篇
    • 评论:140条