ASP.NET4.0 Ajax 实例--DataView模板编程1

2010-04-21 作者：warensoft 来源：warensoft的blog

ASP.NET4.0中从本质上来讲变化最大的就要算是ASP.NET Ajax技术，这两年来MS一直在不断提高和完善ASP.NET Ajax的功能，变化最大的就是从UpdatePanel模式演化到客户端JS编码模式。在ASP.NET4.0中集成的Ajax框架，基本上可以让程序脱离第三方的Ajax组件，来实现较为完美的RIA应用程序。

在ASP.NET4.0中集成的Ajax功能大体上包括以下几点：

集成JQUERY

客户端数据库操作

客户端模板（客户端的网格）

更为丰富的Ajax控件

客户端的数据读写，基本上就是利用WCF实现，开发人员可以直接从JS中调用WCF再利用C#来实现，或者利用JS调用ADO.NET Data Service直接操作数据库。这些功能已经在前面的Blog中进行了说明，感兴趣的读者可以参考：

http://http://www.zjjv.com//blogs.com/warensoft/archive/2010/03/07/1680305.html（ASP.NET Ajax实例—Javascript直接调用服务器C#代码）

http://http://www.zjjv.com//blogs.com/warensoft/archive/2010/03/16/1686774.html（ASP.NET Ajax4.0+ADO.NET DataService 实现JS对数据操作）

本文重点为大家说明如何使用Template技术实现客户端DataView。

使用过ASP.NET的程序员一定对GridView十分有感觉，这个控件可以很快的实现在其他网页技术中较为麻烦的网格操作，再加上UpdatePanel，简直就是无敌了。但是这种DataView+UpdatePanel的MS Ajax模式也存在不少缺点：

布局模式比较死板

虽然页面不刷新，但是每一次更新的时候，即使改变一个字母，仍然要将整个GridView的Table从服务器上返回到Client的浏览器中，这是一点很显然违背了Ajax的基本思想---哪儿变了，就更新哪儿.

在ASP.NET4.0中我们可以使用客户端的DataView来代替GridView，利用JS和HTML来精确控制数据的更新，以此来提高系统运行速度和用户体验。模板编程的主要功能包括：

用户客户端代码代替GridView

利用客户端代码实现主-从模式功能

数据的双向绑定

下面，我们对这三点进行说明：

系统要求：

VS2010

ASP.NET Ajax Client Library，可以去CodePlex上下载最新版本，网址：http://http://www.zjjv.com///releases/view/35895，也可以通过CDN方式进行远程引用，本文能过CDN方式引用。

利用客户端代码代替GridView

我们来实现一个用户数据查找的功能

1.1在网站中添加一个Ajax Enabled WCF Service：

1.2修改WCF的代码MyService.cs，代码如下所示：

注意这里的返回值是一个List< CustomerInfo >的表，其中CustomerInfo是数据协议，是用来封装每一个Customer信息的数据结构。另外，规定，当传入的参数为空串时，返回所有的数据。

1.3修改Default.ASPX，首先添加一个ScriptManager，并添加WCF服务的引用，代码如下：

添加WCF引用的目的是在运行的时候可以生成JS代理类。

1.4添加几个必要的CSS样式，代码如下所示：

1.5添加DataView以及用于输入用户名的文本框，HTML代码如下所示：

上面代码中，名为“dvUsers”的DIV就是我们要的DataView，实际上客户端的DataView并没有什么固定的标签，使用任何的HTML标签都可以，并且我们要做的是利用HTML编写好网格中的一行（一个模板），在运行的时候Ajax框会自动利用服务器取回来的内容将这个DataView填充，并且自动重复。

?另外ID为colCustomerID的DIV绑定到了CustomerID字段上，{binding CustomerID}就是用来绑定的，当然这里使用的是双向绑定。在后面的Blog中会对绑定方式作进一步说明。

1.6修改ScriptManager，添加最新版本Ajax Client Library的CDN引用。代码如下：

这里请注意所引用的MicrosoftAjax.js，在其后面一定要标记Name属性值为MicrosoftAjax.js，目的是使用新版本的JS文件覆盖原有集成的文件。

1.7添加加载时的是JS代码，如下所示：

代码说明：

1.8?现在就可以运行网页了，页面加载的时候会把所有用户的数据都显示出来。

1.9为网页中的Button添加一个JS的Click事件，修改Button的HTML代码，如下所示：

点击Button1时就从Text1中将用户名取出，然后将这个用户当作参数进行查询。

1.10完整的HTML代码如下所示：