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条目
　　这一步稍微有点麻烦，在使用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控件，从工具箱里将其拖到页面上.
　　最后，局部页面绘制(也就是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了

本文转自
http://yilong111love.blog.163.com/blog/static/241742482008221320683/