ASP.NET MVC4中調用WEB API的四個方法

使用jQuery 調用WEB API

接下來，咱們在Index控制器中新創建一個視圖，以下圖：

接下來就能夠根據實際須要，決定在頁面中顯示customer表中的多少列，最後的頁面顯示以下：

當頁面加載時，使用GET()方法去調出customer表的全部數據，而當使用INSERT,UPDATE,DELETE功能時，是經過jQuery去調用web api的。下面咱們學習下經過jQuery去調用WEB API。

首先，咱們設計每一行的HTML代碼，以下：

<table id="customerTable" border="0" cellpadding="3">
<tr>
<th>Customer ID</th>
<th>Company Name</th>
<th>Contact Name</th>
<th>Country</th>
<th>Actions</th>
</tr>
<tr>
<td><input type="text" id="txtCustomerId" size="5"/></td>
<td><input type="text" id="txtCompanyName" /></td>
<td><input type="text" id="txtContactName" /></td>
<td><input type="text" id="txtCountry" /></td>
<td><input type="button" name="btnInsert" value="Insert" /></td>
</tr>
</table>

首先要引入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方法須要的是兩個參數。

而後經過jQuery的$.ajax方法進行調用web api，注意這裏的type指定爲put方法，而且注意編碼爲UTF-8，而後在回調方法success中，再此使用$.getJSON方法，得到更新後的最新用戶列表。

而Insert，Delete的方法代碼以下：

function OnInsert(evt) {
    var customerId = $("#txtCustomerId").val();
    var companyName = $("#txtCompanyName").val();
    var contactName = $("#txtContactName").val();
    var country = $("#txtCountry").val();
    var data = '{"obj":{"CustomerID":"' + customerId + '","CompanyName":"' + companyName +
'","ContactName":"' + contactName + '","Country":"' + country + '"}}';
    $.ajax({
        type: 'POST',
        url: '/api/customers/',
        data: data,
        contentType: "application/json; charset=utf-8",
        dataType: 'json',
        success: function (results) {
            $("#txtCustomerId").val('');
            $("#txtCompanyName").val('');
            $("#txtContactName").val('');
            $("#txtCountry").val('');
            $.getJSON("api/customers", LoadCustomers);
            alert('Customer Added !');
        }
    })
}
function OnDelete(evt) {
    var customerId = $(this).parent().parent().children().get(0).innerHTML;
    var data = '{"id":"' + customerId + '"}';
    var row = $(this).parent().parent();
    $.ajax({
        type: 'DELETE',
        url: '/api/customers/',
        data: data,
        contentType: "application/json; charset=utf-8",
        dataType: 'json',
        success: function (results) {
            $.getJSON("api/customers", LoadCustomers);
            alert('Customer Deleted!');
        }
    })
}

讀者要注意的是，在實際應用中，可使用含有GET,PUT,DELETE前綴的方法名，好比

GetXXXX(), PutXXXX(), PostXXXX()都是能夠的，XXX是自定義的名稱，WEB API框架依然會調用對應的GET,PUT和POST方法。

最後運行後，效果以下圖：

 

 

 

網站開發_網站製做_網站維護_網店製做_網店安裝_商城製做_手機軟件_企業網站_辦公軟件_QQ:471226865
點點更健康