網頁

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 ServiceWCF,但如果想在單純的 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 執行刪除動作。


新增與更新資源

新增資料步驟上大致上:

  1. 取得表單
  2. 取得要傳送的欄位資料並整理為 Object
  3. 把 Object 轉換為 JSON 格式
  4. 透過 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 狀態碼就轉址至登入頁面。


沒有留言:

張貼留言

感謝您的留言,如果我的文章你喜歡或對你有幫助,按個「讚」或「分享」它,我會很高興的。