Using ADO.NET Data Service – 客户端消费

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}}&nbsp;{{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的使用。