我們在【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 狀態碼就轉址至登入頁面。
沒有留言:
張貼留言
感謝您的留言，如果我的文章你喜歡或對你有幫助，按個「讚」或「分享」它，我會很高興的。