KingKong Bruce記事: ASP.NET Web API 心得筆記 (7) CRUD, Paging, Querying, Authorization 之 jQuery

我們在【ASP.NET Web API 心得筆記 (3) CRUD 操作之後端程式】裡完成了整個 CURD 在 ASP.NET Web API 上的討論，但前端網頁要如何呼叫使用 GET, POST, PUT, DELETE 這些資源呢？接下來我們就來討論 CRUD …等在前端網頁如何透過 jQuery 來呼叫使用這些資源。

以下都是純 jQuery 程式碼，也就是說，你可以在任何網頁裡使用它，PHP、JSP、ASP、ASP.NET、ASP.NET MVC … 這樣分離的更清楚，前端開發人員，不用開 Visual Studio，不用會 ASP.NET / ASP.NET MVC，只需要了解你 Web API 的 URI 資源如何取得與使用。

這也表現出另一個 Web API 的優點，RESTful 就是一組透過 URI 來取得與設定資源，以前，或許你會寫 Web Service，WCF，但如果想在單純的 HTML 網頁裡呼叫使用，或在沒有 Visual Studio 工具幫忙下要去使用，還真有些困難。現在，Web API 把問題單純化，你想怎麼用就怎麼用，或更進一步，你想在那裡用就在那裡用。

取得資源

這是最簡單的，一般會有取得全部資料與取得單一資料，這部份我們在「ASP.NET Web API 心得筆記 (1)」已經提供實作程式碼，整理如下：

$(function(){
    // 傳送 AJAX 請求
    $.getJSON("/api/Products/",
    function (data) {
        // 成功, data 會包含所有產品列表
        $.each(data, function (key, val) {
            // 處理回傳資料   
        });
    });
});

function find() {
    // 取的輸入的id
    var id = $('#prodId').val();

    // 傳送 AJAX 請求
    $.getJSON("/api/products/" + id,
    function (data) {
        // 成功, 處理回傳資料
    })
    .fail( // 失敗
    function (jqXHR, textStatus, err) {
        // 顯示錯誤訊息
    });
}

刪除資源

要刪除一筆資料，通常會傳入一個參數，此參數通常是資料庫裡的主鍵(Primary Key)，這裡我們假設主鍵就是 id：

$(function() {
    // 頁面上 delete 按鍵加上 click 事件
    $("a.delete").live('click', function () {
        // 取得 id 值，即PK
        var id = $(this).data('contact-id');

        $.ajax({
            url: "/api/contacts/" + id,
            type: 'DELETE', // 重點
            cache: false,
            statusCode: {
                200: function(data) {
                    // 刪除成功，將 UI 上此筆資料刪除
                    );
                }
            }
        });

        return false;
    });
});

注意【type: 'DELETE'】，這樣 jQuery 就會幫我們送出 HTTP DELETE 請求給 Web API，而 Web API 收到 DELETE 請求，會去找 "Delete..." 開頭的 Action 執行刪除動作。

新增與更新資源

新增資料步驟上大致上：

取得表單
取得要傳送的欄位資料並整理為 Object
把 Object 轉換為 JSON 格式
透過 jQuery 的 ajax 幫忙傳送資料

$(function () {
    // 取得表單
    var form = $('#newContactForm');
    // 當 form 觸發 submit 時
    form.submit(function () {
        // 取得欄位資料，整理為 Object
        // 以"心得1"資料結構為例
        var contact = { Id: 0, Name: $('#name').val(), Price: $('#price').val() };
        // Object to JSON
        var json = JSON.stringify(contact);

        $.ajax({
            url: '/api/contacts',
            cache: false,
            type: 'POST', // 重點
            data: json,
            contentType: 'application/json; charset=utf-8',
            statusCode: {
                201 /*Created*/: function (data) {
                    // 新增成功
                }
            }
        });

        return false;
    });
});

要注意的地方有二處。

注意 ajax 裡的【type: 'POST'】，jQuery 會幫我們送出 HTTP POST 請求給 Web API，Web API 收到 POST 請求會去找 "Post..." 開頭的 Action 執行。注意 statusCode 的狀態碼是【201 /*Created*/】，而不是只有【201】。

更新只需把【type: 'PUT'】，其他步驟程式大同小異，這裡有篇【PUT and DELETE with jQuery】把 POST 與 PUT 的 AJAX 寫成擴充函式，有興趣可以去複製來用。

分頁與排序

在【ASP.NET Web API 心得筆記 (5) 分頁和查詢(Paging and Querying)】提到 Web API 的分頁與查詢：

一般使用 LINQ 的分頁與查詢：

$(function () {
    // 當按鍵觸發 click 事件
    $("#getContactsPaging").click(function () {
        // 取得每頁 size
        var pageSize = $('#pageSize').val();
        // 取得第幾頁
        var pageIndex = $('#pageIndex').val();

        // 資源
        var url = "/api/contacts?pageSize=" + pageSize + '&pageIndex=' + pageIndex;

        $.getJSON(url, function (data) {
            // 處理取得的 JSON 資料
        });
        
        return false;
    });
});

這邊我們補上 Web API 的使用 LINQ 的範例程式碼：

''' <summary>
''' 取得連絡人分頁後資料
''' </summary>
''' <param name="pageSize">每頁幾筆</param>
''' <param name="PageIndex">第幾頁</param>
Function GetContacts(pageSize As Integer, PageIndex As Integer) As IEnumerable(Of Contact)
    Return _repository.GetAllContact.Skip(PageIndex * pageSize).Take(pageSize)
End Function

使用 Web API 所支援 OData 方式：

$(function () {
    // 當按鍵觸發 click 事件
    $("#getcontactsQueryable").click(function () {
        // 取得每頁 size
        var pageSize = $('#pageSize').val();
 // 取得第幾頁
        var pageIndex = $('#pageIndex').val();

 // 資源
 // $top : OData 參數，取得前 n 筆
 // &skip : OData 參數，跳過前 n 筆
        var url = "/api/comments?$top=" + pageSize + '&$skip=' + (pageIndex * pageSize);

        $.getJSON(url, function (data) {
         // 處理取得的 JSON 資料
        });

        return false;
    });
});

認證(Authorization)處理

你是否發現，Web API 好像沒有什麼安全性，只要我們知道了 URI 及規則後，好像誰都可以使用，要知道 URI 及規則也不是難事，現在瀏覽器的除錯工具都很方便。如果我們希望只有認證過(登入)的使用者/頁面，才能來使用 Web API 服務，也是簡單，只需加上 Authorize 屬性即可。

Imports System.Web.Http
Imports System.Net.Http
Imports System.Net

<Authorize()>
Public Class ContactsController
    Inherits ApiController

 ' ... 略 ...
End Class

前端 jQuery 呼叫時，必須加上狀態碼 401 的處理：

$(function () {
    $("#getContactsFormsAuth").click(function () {
        $.ajax({ url: "/api/contacts",
            accepts: "application/json",
            cache: false,
            statusCode: {
                200: function(data) {
                    viewModel.comments(data);
                },
                401: function(jqXHR, textStatus, errorThrown) {
                    self.location = '/Account/Login/';
                }
            }
        });
    });
});

重點在必須加上【401: function(jqXHR, textStatus, errorThrown)】這一段處理，當認證不通過會產生 401 狀態碼，當回應是 401 狀態碼就轉址至登入頁面。

KingKong Bruce記事

網頁

ASP.NET Web API 心得筆記 (7) CRUD, Paging, Querying, Authorization 之 jQuery

取得資源

刪除資源

新增與更新資源

分頁與排序

認證(Authorization)處理

沒有留言:

張貼留言