主页 > 知识库 > 网络编程 > ASP/.NET >

ASP.NET MVC4中调用WEB API的四个方法(一)(3)

来源: 作者: 发表于:2012-06-11 08:23  点击:
首先要引入jQuery类库: script src=../../Scripts/jquery-1.6.2.min.js type=text/javascript/script 然后在jQuery中,通过$.getJSON的方法,调用WEB API,代码如下: $(document).ready(function () { $.getJSON(


  首先要引入jQuery类库:


  <script src="../../Scripts/jquery-1.6.2.min.js" type="text/javascript"></script>


  然后在jQuery中,通过$.getJSON的方法,调用WEB API,代码如下:

  $(document).ready(function () {

  $.getJSON("api/customers", LoadCustomers);

  });

  熟悉jQuery的朋友肯定明白,$.getJson方法中第一个参数是调用服务的地址,第二个参数是回调方法,这个回调方法LoadCustomers中,将展示服务端web api返回的数据,代码如下:


function LoadCustomers(data) {
    $("#customerTable").find("tr:gt(1)").remove();
    $.each(data, function (key, val) {
        var tableRow = '<tr>' + 
                        '<td>' + val.CustomerID + '</td>' +
                        '<td><input type="text" value="' + val.CompanyName + '"/></td>' +
                        '<td><input type="text" value="' + val.ContactName + '"/></td>' +
                        '<td><input type="text" value="' + val.Country + '"/></td>' +
                        '<td><input type="button" name="btnUpdate" value="Update" /> 
                             <input type="button" name="btnDelete" value="Delete" /></td>' + 
                        '</tr>';
        $('#customerTable').append(tableRow);
    });
  
    $("input[name='btnInsert']").click(OnInsert);
    $("input[name='btnUpdate']").click(OnUpdate);
    $("input[name='btnDelete']").click(OnDelete);
}



  在上面的代码中,首先移除所有表格中的行(除了表头外),然后通过jQuery中的each方法,遍历web api返回给前端的数据,最后展现所有的数据行。然后在Insert,update,delete三个按钮中都绑定了相关的方法函数,下面先看update的代码:


 

  function OnUpdate(evt) {
    var cell;
    var customerId = $(this).parent().parent().children().get(0).innerHTML;
    cell = $(this).parent().parent().children().get(1);
    var companyName = $(cell).find('input').val();
    cell = $(this).parent().parent().children().get(2);
    var contactName = $(cell).find('input').val();
    cell = $(this).parent().parent().children().get(3);
    var country = $(cell).find('input').val();
  
    var data = '{"id":"' + customerId + '", "obj":{"CustomerID":"' + customerId + 
               '","CompanyName":"' + companyName + '","ContactName":"' + 
               contactName + '","Country":"' + country + '"}}';
  
    $.ajax({
        type: 'PUT',
        url: '/api/customers/',
        data: data,
        contentType: "application/json; charset=utf-8",
        dataType: 'json',
        success: function (results) {
            $.getJSON("api/customers", LoadCustomers);
            alert('Customer Updated !');
        }
    })
}



  在上面的代码中,首先从每行的各个文本框中获得要更新的值,然后组织成JSON数据,

  其数据格式为包含两项,其中一项包含customer的ID,另外一个是新的customer实体对象,因为WEB API的PUT方法需要的是两个参数。

  

有帮助
(0)
0%
没帮助
(0)
0%