自从Microsoft与jQuery合作以来,ASP.NET AJAX与jQuery就被定位为两个互补的AJAX库。既然jQuery 已经实现了如此多轻量级的AJAX特性,自然ASP.NET AJAX会继续专注于富客户端所需的一些重量级特性。
在ASP.NET AJAX 4.0 Preview 3里面,开发人员能够接触到的两个重要的新特性就是ADO.NET Data Service Client Library以及ASP.NET AJAX Template。对于熟悉ASP.NET服务器端开发但不熟悉客户端开 发的人来说,你可以简单地把这两个特性理解为存在于客户端的DataSource以及ListView,只要把数据通 过ADO.NET Data Service输出到前端,你就可以如同使用DataSource和ListView的组合一样在客户端开发 数据驱动的应用程序了。
在这篇文章里,我们将来看看如何使用ADO.NET Data Service Client Library,将ADO.NET Data Service暴露的REST数据接口直接拿到客户端JavaScript代码中去调用。文章中所用到的示例代码在文章 末尾,然后参考里面的AdoNetDataServiceDemo.aspx。
服务器端准备工作
在我们接下来要讲到的示例当中,我们会用到一个SQL Server 2005 Express Edition的数据库,里面 有一张名为OscarWinners的表,记录的是本年度奥斯卡获奖名单,字段包括AwardID、Award、Winner、 Film。然后我们为这张表创建ADO.NET Entity Model,接着再为它生成的实体类创建ADO.NET Data Service。这些都是在Visual Studio 2008中点几下鼠标就能完成的操作,就不再详细解释了。在ADO.NET Data Service的InitializeService()方法内,我们仅仅给它提供一个最宽松的规则:
config.SetEntitySetAccessRule("*", EntitySetRights.All);
到这里,我们就把服务器端的要做的工作都准备好了。打开你创建的ADO.NET Data Service地址,看 看是否输出了正确的Atom格式数据。如果没有,请检查一下你机器上的WCF是否已经正确安装和配置好了 。确保服务器端的准备工作都做好了,然后再进入客户端的开发工作。
连接Data Service
在客户端使用ADO.NET Data Service,我们需要接触到的类只有一个,那就是 Sys.Data.AdoNetServiceProxy。首先,我们要连接到ADO.NET Data Service,也就是使用ADO.NET Data Service的URL来实例化此类:
var dataService = new Sys.Data.AdoNetServiceProxy("WebDataService.svc");
然后,我们就可以利用dataService来调用ADO.NET Data Service进行CRUD操作了。
CRUD操作
所有的CRUD操作都在Sys.Data.AdoNetServiceProxy对象上执行,方法分别名为query()、insert()、 update()、remove()。在我们的示例当中,会用到query()和update()方法,另外两个方法是用起来和 update()很类似,就不再详细说明了。
查询操作
dataService.query("OscarWinners", function(result, context, operation) {
/* display result */
}, errorHandler);
使用上述语句,我们查询出了OscarWinners表中的所有数据。随后的第一个回调函数会在查询成功时 被调用,因此我们可以在其中编写拼接HTML以显示结果的逻辑,具体的代码请参考下载中的 AdoNetDataServiceDemo.aspx。第二个回调函数会在查询失败时被调用,我们可以编写一个统一的错误处 理函数,名为errorHandler,然后将它传递给此参数。
如果需要传递复杂的查询参数,使用ADO.NET Data Service的格式就可以了,这可以在MSDN上查到。 例如说查询Slumdog Millionaire这部电影夺取了多少个奥斯卡奖项,然后把奖项按照名称排序输出,可 以这样子写:
dataService.query("OscarWinners?$filter=Film eq 'Slumdog Millionaire'&$orderby=Award", function(result, context, operation) {
/* display result */
}, errorHandler);