ADO.NET Data service在前边已经谈了2 个部分，分别讲解了如何在server side构建一个ADO.NET Data Service和如何在Client Side消费Service，但是Data Service开发组仍然为我们提供了一个可以用AJAX Client library来消费Data Service的途径（您可以在CodePlex上下载到DataService Ajax Library，解压开后是一个名为DataServie.js的文件）。对于前边两部分不太熟悉的朋友可以参考：
· Using ADO.NET Data Service – Server Side
· Using ADO.NET Data Service – Consuming
在这篇里我们将会一起来熟悉一下如何来执行数据查询和相关操作。
1. RETRIEVE – ADO.NET Data Service AJAX Client Library
ADO.NE Data Service AJAX Client Library是CodePlex上提供的对于客户端消费ADO.NET Data Service的JS类库。实际上执行的功能和上一章中我们讨论的在服务器端执行CRUD是相似的，只是换成了用AJAX的方式来执行而已，而且另一个区别是传递的数据都是JSON格式。
应用起来很简单，只需要引用DataService.js文件即可。
|
<div> <asp:ScriptManager ID="ScriptManager1" runat="server"> <Scripts> <asp:ScriptReference Path="~/Library/DataService.js" /> </Scripts> </asp:ScriptManager> <p>Filter the customers: <input type="text" id="txtFilter" style="width:120px" /><input type="button" value="Search" onclick="search();" /></p> <div id="Result"></div> </div> |
在pageLoad事件中我们希望查询出所有的Employees数据。
|
var northwindService = new Sys.Data.DataService("NorthwindService.svc"); northwindService.query("/Employees", cbSuccess, cbFailure); |
/Employees表示查询的URL，这里的所有操作都是通过URI来进行操作的。cbSuccess和cbFailure分别表示执行查询时成功或者失败分别对应的回调函数。通常cbSuccess函数是需要来做认真处理的，因为你得到的数据通过什么样的方式展现需要在这里控制。抛开任何模板不谈（当然你可以参考下一篇文章AJAX4.0中对模板的支持中找到新的答案。在另外一篇jQuery和jTemplate构造客户端分页中你也可以找到一些灵感==即便我们会在后边用到），我们想通过表格来展现数据：
|
function cbSuccess(result, context, operation) { BuildTable(result); }
function BuildTable(msg) { var table = '<table><thead><tr class="title"><th>EmployeeID</th><th>Title</th>'; table += '<th>Name</th><th>Work Title</th><th>BirthDate</th><th>Country</th><th>City</th><th>Address</th></tr></thead><tbody>'; var i = 0;
for (var post in msg) { var row; if (i % 2 == 0) { row = '<tr>'; } else { row = '<tr class="odd">'; } row += '<td><a href="EmployeeView.aspx?EmployeeID=' + msg[post].EmployeeID + '">' + msg[post].EmployeeID + '</a></td>'; row += '<td>' + msg[post].TitleOfCourtesy + " " + i + '</td>'; row += '<td>' + msg[post].FirstName + ' ' + msg[post].LastName + '</td>'; row += '<td>' + msg[post].Title + '</td>'; row += '<td>' + msg[post].BirthDate.format("d") + '</td>'; row += '<td>' + msg[post].Country + '</td>'; row += '<td>' + msg[post].City + '</td>'; row += '<td>' + msg[post].Address + '</td>'; row += '</tr>';
table += row; i += 1; }
table += '</tbody></table>'; var result = document.getElementById("Result"); result.className = ""; result.innerHTML = table; } |
唯一需要解释的便是返回的数据是以JSON集合的形式来表示的。遍历每一个对象并通过枚举其属性值来组建我们的table阵列--看起来很原始，但它真正达到了我们想要的结果，不是吗？
这个查询看起来很简单，但你已经看到了如何去获取数据并显示。再稍微扩展一下吧，做个搜索框，当点击的时候得到所有以你输入的字母开头的名字的员工列表。唯一的变化就是URI的不同：
|
function search() { var filter = document.getElementById("txtFilter").value; var result = document.getElementById("Result"); result.innerHTML = ""; result.className = "loading";
var northwindService = new Sys.Data.DataService("NorthwindService.svc"); northwindService.query("/Employees?$filter=startswith(FirstName,'" + filter + "') eq true", cbSuccess, cbFailure); } |
2. RETRIEVE – Using jQuery
jQuery是个很受欢迎的组件，它会让你体会到编写javascript的美妙，因为Microsoft已经将此置入了ASP.NET 4.0中。更为重要的是，jQuery可以和AJAX配合使用而没有任何冲突。当然另一个利用jQuery的好处之一便是在jQuery和jTemplate构造客户端分页一文中提到的jTemplate，在AJAX4.0 未发布之前，或许这很好的帮助了我们。
引用jQuery的库文件就不用说了，最主要的是如何去发出请求。记得在第一片文章那个里我们说过对于ADO.NET Data Service的请求关键字有GET, Update, Delete等，分清楚这个很重要。以下代码演示了如何去执行一个RETRIEVE查询：
|
$(document).ready(function() { $('#Container').addClass("loading"); getValue(); });
function getValue() { $.ajax({ type: "GET", url: "http://localhost:5000/NorthwindService.svc/Employees?orderby=FirstName", contentType: "application/json; charset=utf-8", dataType: "json", success: function(msg) { // Render the resulting data, via template. ApplyTemplate(msg); }, error: function(xhr) { showError(xhr); } }); } |
请求成功的回调函数仍然是执行了ApplyTemplate(msg)函数：我们将显示模板定义在一个HTML文件中，在生成时jTemplate会通过数据和定义的标记来RENDER. （有问题请参考jQuery和jTemplate构造客户端分页一文）。
3. RETRIEVE – USING AJAX 4.0 (PREVIEW 3)
在AJAX 4.0 Preview 3中提供了对ADO.NET的支持和template的支持。这就像是替代了第一部分里便提供的AJAX Client Library一样，因为这里更为全面。AdoNetServiceProxy类是主要用来与ADO.NET Data Service通讯的类。MicrosoftAjaxAdoNet.js和MicrosoftAjaxTemplates.js需要引用到项目中—你可以从http://www.codeplex.com/aspnet/Wiki/View.aspx?title=AJAX&referringTitle=Home得到。
首先需要将AdoNetServiceProxy.js引入到项目中：
|
<body xmlns:sys="javascript:Sys" xmlns:dv="javascript:Sys.UI.DataView" sys:activate="*"> <asp:ScriptManager ID="ScriptManager1" runat="server"> <Scripts> <asp:ScriptReference Path="Library/MicrosoftAjaxAdoNet.js" /> <asp:ScriptReference Path="Library/MicrosoftAjaxTemplates.js" /> </Scripts> </asp:ScriptManager> |
接下来就可以执行query查询了。除了声明的类不同外（这里是AdoNetServiceProxy）其余的和第一部分中描述的方法类似。
|
function pageLoad() { setupDataService(); queryService(); } var dataService; function setupDataService() { dataService = new Sys.Data.AdoNetServiceProxy("NorthwindService.svc"); dataService.set_timeout(60000); dataService.set_defaultFailedCallback(onFailure); dataService.set_defaultSucceededCallback(onSuccess); } function onSuccess(result, userContext, operation) { var dataView = $find("employeeListView"); dataView.set_data(result);
$get("employeeTemplate").style.display = "block"; } function onFailure(result, userContext, operation) { $get("errorStatus").value = result.get_message() + ""r"tStatus Code: " + result.get_statusCode() + ""r"tTimed Out: " + result.get_timedOut(); } function queryService() { dataService.query("/Employees"); } |
但需要注意的是这里用到了客户端DataView。因为要使用Template功能来展现数据。如果你不想使用template，那么也可以将onSuccess中的方法调用设置为第一部分中的buildTable.
模板定义和jQuery的有些许不同，首先它定义在一个文件内，另外，扩展标记是使用{{}}而非$T。这里我们直接在定义模板时就驱动它自动执行查询来绑定。
|
<div id="employeeListView" sys:attach="dv" dv:itemtemplate="employeeTemplate" dv:itemplaceholder="detailPh"> <div id="detailPh"> No selected data </div> </div> <div> <table> <thead> <tr class="title"> <th>EmployeeID</th> <th>Title</th> <th>Name</th> <th>Work Title</th> <th>BirthDate</th> <th>Country</th> <th>City</th> <th>Address</th> </tr> </thead> <tbody id="employeeTemplate" sys:attach="dv" dv:datasource="{{ new Sys.Data.AdoNetDataSource() }}" dv:serviceuri="NorthwindService.svc" dv:query="Employees?$orderby=FirstName" style="display:none"> <tr> <td>{{EmployeeID}}</td> <td>{{TitleOfCourtesy}}</td> <td>{{FirstName}} {{LastName}}</td> <td>{{Title}}</td> <td>{{BirthDate}}</td> <td>{{Country}}</td> <td>{{City}}</td> <td>{{Address}}</td> </tr> </tbody> </table> </div> |
4. 操纵数据：
对于数据的操纵无外乎是针对AdoNetServiceProxy类的相关操作，除了数据是以JSON方式传递的外，看起来和在服务端消费数据服务没有太大的区别。直接上代码吧：
|
function pageLoad() { setupDataService(); queryService(); } var dataService;
function setupDataService() { dataService = new Sys.Data.AdoNetServiceProxy("NorthwindService.svc"); dataService.set_timeout(60000); dataService.set_defaultSucceededCallback(onSuccess); dataService.set_defaultFailedCallback(onFailure); }
function onFailure(result, userContext, operation) { alert(result.get_message() + ""r"tStatus Code: " + result.get_statusCode() + ""r"tTimed Out: " + result.get_timedOut()); }
function queryService() { var employeeId = <%= Request.QueryString["EmployeeID"] %>; dataService.query("/Employees?$filter=EmployeeID eq " + employeeId); }
function onSuccess(result, userContext, operation) { if (result[0] != null) { $get("employeeID").value = result[0].EmployeeID; $get("txtFirstName").value = result[0].FirstName; $get("txtLastName").value = result[0].LastName; $get("txtTitle").value = result[0].TitleOfCourtesy; $get("txtBirthDate").value = result[0].BirthDate.format("d"); $get("txtWorkTitle").value = result[0].Title; $get("txtCountry").value = result[0].Country; $get("txtCity").value = result[0].City; $get("txtAddress").value = result[0].Address; $get("txtNote").value = result[0].Note; } }
function onFailure(error, userContext, operation) { alert(error); }
function doUpdate() { var employee = { EmployeeID:$get("employeeId").value, FirstName:$get("txtFirstName").value, LastName:$get("txtLastName").value, TitleOfCourtesy:$get("txtTitle").value, BirthDate:$get("txtBirthDate").value, Title:$get("txtWorkTitle").value, Country:$get("txtCountry").value, City:$get("txtCity").value, Address:$get("txtAddress").value, Note:$get("txtNote").value }; dataService.update(employee, queryServiceUpdate); }
function insertEmployee() { var employee = { EmployeeID: 15, FirstName: $get("txtFirstName").value, LastName: $get("txtLastName").value, TitleOfCourtesy: $get("txtTitle").value, BirthDate: $get("txtBirthDate").value, Title: $get("txtWorkTitle").value, Country: $get("txtCountry").value, City: $get("txtCity").value, Address: $get("txtAddress").value }; dataService.insert(employee, "Employees", onInserSuccess); }
|
下一篇中我们会详细的介绍AJAX 4.0 Template的使用。
