本文参考 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