987
通過Knockout.js + ASP.NET Web API構建一個簡單的CRUD應用
較之麵向最終消費者的網站，企業級Web應用對用戶體驗的要求要低一些。不過客戶對“用戶體驗”的要求是“與日俱增”的，很多被“慣壞了”的用戶已經不能忍受Postback帶來的頁麵刷新，所以Ajax在企業級Web應用中得到了廣泛的應用。企業級Web應用的一個特點是以“數據處理”為主，所以“麵向綁定”的Knockout.js 是一個不錯的選擇。ASP.NET Web API，作為.NET平台最好的REST服務開發平台（主要與WCF相比），則可以以服務的形式提供對數據的後台處理。
一、一個簡單的基於CRUD的Web應用
在《通過ASP.NET Web API + JQuery創建一個簡單的Web應用》中，我采用jQuery + ASP.NET Web API構建了一個單純的對單一數據進行CRUD操作的應用，對於數據在界麵上的呈現，我是通過jQuery 動態生成HTML的方式實現的。現在我們通過Knockout.js來進行數據綁定，你會發現我們代碼會變得很優雅。
這個簡單的Demo應用用於模擬“聯係人管理”。當頁麵加載的時候，所有的聯係人列表被列出來。在同一個頁麵中，我們可以添加一個新的聯係人，也可以修改和刪除現有聯係人信息。整個應用唯一的頁麵在瀏覽器中的呈現效果如下圖所示。
先來看看ApiController的定義。如下麵的代碼片斷所示，我們定義了一個名為ContactsController的ApiController用於完成針對聯係人的CRUD操作，我們采用HTTP Method（Get、Post、Put和Delete）對Action方法進行命名，因為在進行Action匹配的時候會默認以Http Method作為前綴進行匹配。
1: public class ContactsController : ApiController
2: {
3: private static List<Contact> contacts = new List<Contact>
4: {
5: new Contact{ Id = "001", FirstName = "San", LastName="Zhang", PhoneNo="123", EmailAddress="zhangsan@gmail.com"},
6: new Contact{ Id = "002", FirstName = "Si", LastName="Li", PhoneNo="456", EmailAddress="lisi@gmail.com"}
7: };
8:
9: public IEnumerable<Contact> Get()
10: {
11: return contacts;
12: }
13:
14: public Contact Get(string id)
15: {
16: return contacts.FirstOrDefault(c => c.Id == id);
17: }
18:
19: public void Put(Contact contact)
20: {
21: contact.Id = Guid.NewGuid().ToString();
22: contacts.Add(contact);
23: }
24:
25: public void Post(Contact contact)
26: {
27: Delete(contact.Id);
28: contacts.Add(contact);
29: }
30:
31: public void Delete(string id)
32: {
33: Contact contact = contacts.FirstOrDefault(c => c.Id == id);
34: contacts.Remove(contact);
35: }
36: }
37:
38: public class Contact
39: {
40: public string Id { get; set; }
41: public string FirstName { get; set; }
42: public string LastName { get; set; }
43: public string PhoneNo { get; set; }
44: public string EmailAddress { get; set; }
45: }
和ASP.NET MVC Web應用一樣，我們同樣采用URL路由機製來實現請求地址與目標Controller和Action的映射，而針對API默認注冊的路有如下所示（這裏調用的方法是MapHttpRoute而不是MapRoute）。
1: public class RouteConfig
2: {
3: public static void RegisterRoutes(RouteCollection routes)
4: {
5: routes.MapHttpRoute(
6: name: "DefaultApi",
7: routeTemplate: "api/{controller}/{id}",
8: defaults: new { id = RouteParameter.Optional }
9: );
10: }
11: }
按照注冊的路由規則和Action方法名稱與HTTP方法的默認影射機製，我們可以直接在瀏覽器中分別訪問地址“/api/contacts”和“/api/contacts/001”得到所有聯係人列表和ID為“001”的聯係人信息。得到的結果如下圖所示。
我們通過ASP.NET MVC來構建Web應用，默認的HomeController定義如下，默認的Index操作僅僅是將默認的View呈現出來而已。
1: public class HomeController : Controller
2: {
3: public ActionResult Index()
4: {
5: return View();
6: }
7: }
下麵是整個View的定義。我們采用jQuery進行Ajax調用ApiController進行聯係人的獲取、添加、修改和刪除，數據和命令（添加、修改和刪除）的綁定是通過Knockout.js來完成的。
1: <!DOCTYPE html>
2: <html lang="en">
3: <head>
4: <title>@ViewBag.Title - My ASP.NET MVC Application</title>
5: @Styles.Render("~/Content/css" )
6: <script type="text/javascript" src="../../Scripts/jquery-1.6.2.min.js"></script>
1:
2: <script type="text/javascript" src="../../Scripts/knockout-2.0.0.js">
1: </script>
2: </head>
3: <body>
4: <div id="contacts">
5: <table>
6: <tr>
7: <th>First Name</th>
8: <th>Last Name</th>
9: <th>Phone No.</th>
10: <th>Email Address</th>
11: <th></th>
12: </tr>
13: <tbody>
14: <!-- ko foreach: contacts -->
15: <tr>
16: <td data-bind="text: FirstName" />
17: <td data-bind="text: LastName" />
18: <td data-bind="text: PhoneNo" />
19: <td><input type="text" class="textbox long" data-bind="value: EmailAddress" /></td>
20: <td>
21: <a href="#" data-bind="click: $root.updateContact">Update</a><a href="#" data-bind="click: $root.deleteContact">Delete</a>
22: </td>
23: </tr>
24: <!-- /ko -->
25: <tr data-bind="with: addedContact">
26: <td><input type="text" class="textbox" data-bind="value: FirstName"</td>
27: <td><input type="text" class="textbox" data-bind="value: LastName"</td>
28: <td><input type="text" class="textbox" data-bind="value: PhoneNo"</td>
29: <td><input type="text" class="textbox long" data-bind="value: EmailAddress"</td>
30: <td><a href="#" data-bind="click: $root.addContact">Add</a></td>
31: </tr>
32: </tbody>
33: </table>
34: </div>
35: <script type="text/javascript" >
36: function contactManagerModel() {
37: self = this;
38: self.contacts = ko.observableArray();
39: self.addedContact = ko.observable();
40:
41: self.loadContacts = function () {
42: $.get("/api/contacts", null, function (data) {
43: self.contacts(data);
44: var emptyContact = { Id: "-1", FirstName: "", LastName: "", PhoneNo: "", EmailAddress: "" };
45: self.addedContact(emptyContact);
46: $("table tr:odd").addClass("oddRow");
47: });
48: };
49:
50: self.addContact = function (data) {
51: if (!self.validate(data)) {
52: return;
53: }
54: $.ajax({
55: url: "api/contacts/",
56: data: self.addedContact(),
57: type: "PUT",
58: success: self.loadContacts
59: });
60: };
61:
62: self.updateContact = function (data) {
63: $.ajax({
64: url: "api/contacts/" + data.Id,
65: data: data,
66: type: "POST",
67: success: self.loadContacts
68: });
69: };
70:
71: self.deleteContact = function (data) {
72: $.ajax({
73: url: "api/contacts/" + data.Id,
74: type: "DELETE",
75: success: self.loadContacts
76: });
77: };
78:
79: self.validate = function (data) {
80: if (data.FirstName && data.LastName && data.PhoneNo && data.EmailAddress) {
81: return true;
82: }
83: alert("Please provide complete contact information!");
84: return false;
85: }
86: self.loadContacts();
87: }
88: ko.applyBindings(new contactManagerModel());
89:
</script>
7: </body>
8: </html>
作者：蔣金楠
微信公眾賬號：大內老A
微博：www.weibo.com/artech
如果你想及時得到個人撰寫文章以及著作的消息推送，或者想看看個人推薦的技術資料，可以掃描左邊二維碼（或者長按識別二維碼）關注個人公眾號（原來公眾帳號蔣金楠的自媒體將會停用）。
本文版權歸作者和博客園共有，歡迎轉載，但未經作者同意必須保留此段聲明，且在文章頁麵明顯位置給出原文連接，否則保留追究法律責任的權利。
微信公眾賬號：大內老A
微博：www.weibo.com/artech
如果你想及時得到個人撰寫文章以及著作的消息推送，或者想看看個人推薦的技術資料，可以掃描左邊二維碼（或者長按識別二維碼）關注個人公眾號（原來公眾帳號蔣金楠的自媒體將會停用）。
本文版權歸作者和博客園共有，歡迎轉載，但未經作者同意必須保留此段聲明，且在文章頁麵明顯位置給出原文連接，否則保留追究法律責任的權利。
最後更新：2017-10-25 17:04:21