本文参考 Code.msdn的例子，在此基础上实现了一个参考例子，代码放在了：
如果想在Asp.net MVC应用以JavaScript中访问WCF Data Service服务,以下是使用Microsoft AJAX Library库进行处理的例子
var dataContext;
var queryObject, queryObject1;
Sys.require([Sys.components.dataView, Sys.components.adoNetDataContext]);
//DOM加载完成后执行
Sys.onReady(function () {
dataContext = Sys.create.adoNetDataContext(
{
serviceUri: "/Services/NorthwindService.svc",
mergeOption: Sys.Data.MergeOption.appendOnly
});
dataContext.initialize();
queryObject = new Sys.Data.AdoNetQueryBuilder("Customers");
queryObject.set_orderby("ContactName"); //$orderby
queryObject.set_filter("City eq " + "'London'"); // $filter
queryObject.set_expand("Orders"); //$expand
queryObject1 = new Sys.Data.AdoNetQueryBuilder("Customers");
queryObject1.set_filter("startswith(CompanyName, 'A')");
});
<body xmlns:dataview="javascript:Sys.UI.DataView" xmlns:sys="javascript:Sys">
<table> <tr class="tableHeader"> <td> ID </td> <td> Name </td> <td> Contact </td> <td> # Orders </td> </tr> <tbody sys:attach="dataview" class="sys-template" dataview:dataprovider="{{ dataContext }}" dataview:fetchoperation="{{ queryObject.toString() }}" dataview:autofetch="true"> <tr> <td> {{ CustomerID }} </td> <td> {{ CompanyName }} </td> <td> {{ ContactName }} </td> <td> {{ Orders.length }} </td> </tr> </tbody> </table>
以上的代码效果在下图的上部分。
上图是包含：表格显示、查询、主从表三种场景的演示，可见MS AJAX的客户端脚本库功能很强大。
当面的表格显示如果定制可以使用CSS控制，当然也有很多的框架库，如Jquery中的jqGrid
如果和Asp.net集成，可以使用jqMvcGrid