WCF Data Services实例:ASP.net AJAX访问

本文参考 Code.msdn的例子,在此基础上实现了一个参考例子,代码放在了:

http://dskit.codeplex.com

如果想在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>

以上的代码效果在下图的上部分。

clip_image002

上图是包含:表格显示、查询、主从表三种场景的演示,可见MS AJAX的客户端脚本库功能很强大。

当面的表格显示如果定制可以使用CSS控制,当然也有很多的框架库,如Jquery中的jqGrid

clip_image004

如果和Asp.net集成,可以使用jqMvcGrid

posted @ 2010-10-25 09:12  2012  阅读(953)  评论(0编辑  收藏  举报