418
通過ASP.NET Web API + JQuery創建一個簡單的Web應用
看了dudu的《HttpClient + ASP.NET Web API, WCF之外的另一個選擇》一文，想起多很久之前體現ASP.NET Web API而創建的一個Demo。這是一個隻涉及到簡單CRUD操作的Web應用，業務邏輯以Web API的形式定義並以服務的形式發布出來，前台通過jQuery處理用戶交互並調用後台服務。[源代碼從這裏下載]
目錄
一、一個簡單的基於CRUD
二、通過ASP.NET Web API提供服務
三、通過JQuery消費服務
這個簡單的Demo應用用於模擬“聯係人管理”。當頁麵加載的時候，所有的聯係人列表被列出來。在同一個頁麵中，我們可以添加一個新的聯係人，也可以修改和刪除現有聯係人信息。整個應用唯一的頁麵在瀏覽器中的呈現效果如下圖所示。
我們來簡單介紹作為Web API形式發布的聯係人管理服務的定義，先來看看用於表示聯係人的Contact類型的定義。
1: public class Contact
2: {
3: public string Id { get; set; }
4: public string FirstName { get; set; }
5: public string LastName { get; set; }
6: public string PhoneNo { get; set; }
7: public string EmailAddress { get; set; }
8: }
“聯係人服務”以具有如下定義的ContactController的形式定義，它是ApiController的子類。簡單起見，我們采用靜態字段作為對聯係人信息的存儲。ContactController定義了Get、Put、Post和Delete用於進行對聯係人的獲取、添加、修改和刪除操作。我想對Web API不了解的人會感概，為了什麼采用常用的四個HTTP方法作為操作的名稱，因為它們在默認的情況下就可以映射為HTTP請求的方法。
1: public class ContactController : 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: if (string.IsNullOrEmpty(contact.Id))
22: {
23: contact.Id = Guid.NewGuid().ToString();
24: }
25: contacts.Add(contact);
26: }
27:
28: public void Post(Contact contact)
29: {
30: Delete(contact.Id);
31: contacts.Add(contact);
32: }
33:
34: public void Delete(string id)
35: {
36: Contact contact = contacts.FirstOrDefault(c => c.Id == id);
37: contacts.Remove(contact);
38: }
39: }
和ASP.NET MVC Web應用一樣，我們同樣采用URL路由機製來實現請求地址與目標Controller和Action的映射，而針對API默認注冊的路有如下所示。
1: public class MvcApplication : System.Web.HttpApplication
2: {
3: //...
4: public static void RegisterRoutes(RouteCollection routes)
5: {
6: //...
7: routes.MapHttpRoute(
8: name: "DefaultApi",
9: routeTemplate: "api/{controller}/{id}",
10: defaults: new { id = RouteParameter.Optional }
11: );
12: }
按照注冊的路由規則和Action方法名稱與HTTP方法的默認影射機製，我們可以直接在瀏覽器中分別訪問地址“/api/contact”和“/api/contact/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來完成，整個View的定義如下所示。
1: <script type="text/javascript">
1:
2: $(function () {
3: loadAllContacts();
4: }
5: )
6:
7: function loadAllContacts() {
8: $.ajax({
9: url : "api/contact",
10: type : "GET",
11: dataType: "json",
12: success : function (data) { renderContactList(data) }
13: }
14: );
15: }
16:
17: function renderContactList(contacts) {
18: var html = "<table>";
19: html += "<tr><th>First Name</th><th>Last Name</th><th>Phone No.</th><th>Email Address</th><th></th></tr>";
20: for (i = 0; i < contacts.length; i++) {
21: html += "<tr><td>" + contacts[i].FirstName + "</td><td>"
22: + contacts[i].LastName + "</td><td>" + contacts[i].PhoneNo + "</td><td>"
23: + "<input type=\"text\" class=\"textbox long\" id=\"" + contacts[i].Id + "\" value =\"" + contacts[i].EmailAddress + "\"/>" + "</td><td>"
24: + "<a href=\"#\" onclick = \"updateContact('" + contacts[i].Id + "')\">Update</a> "
25: + "<a href=\"#\" onclick = \"deleteContact('" + contacts[i].Id + "')\">Delete</a>" + "</td></tr>";
26: }
27: html += "<tr><td>" + "<input id=\"firstName\" type=\"text\" class=\"textbox\"/>" + "</td><td>"
28: + "<input id=\"lastName\" type=\"text\" class=\"textbox\"/>" + "</td><td>"
29: + "<input id=\"phoneNo\" type=\"text\" class=\"textbox\"/>" + "</td><td>"
30: + "<input id=\"emailAddress\" type=\"text\" class=\"textbox long\"/>" + "</td><td>"
31: + "<a href=\"#\" id=\"add\" onclick=\"addContact();\">Create</a> " + "</td></tr>";
32: html += "</table>";
33: $("#contacts").html(html);
34: $("table tr:odd").addClass("oddRow");
35: }
36:
37: function deleteContact(id) {
38: $.ajax({
39: url : "api/contact/" + id,
40: type : "DELETE",
41: success : function () { loadAllContacts();}
42: });
43: }
44:
45: function updateContact(id) {
46: var emailAddress = $("#" +id).attr("value");
47: $.ajax({
48: url : "api/contact/" + id,
49: type : "GET",
50: success : function (contact) {
51: contact.EmailAddress = emailAddress;
52: update(contact);
53: }
54: });
55: }
56:
57: function update(contact) {
58: $.ajax({
59: url : "api/contact/",
60: type : "POST",
61: data : contact,
62: contentType : "application/json",
63: success : function () { loadAllContacts(); }
64: });
65: }
66:
67: function addContact() {
68: var contact = new Object();
69: contact.FirstName = $("#firstName").attr("value");
70: contact.LastName = $("#lastName").attr("value");
71: contact.PhoneNo = $("#phoneNo").attr("value");
72: contact.EmailAddress = $("#emailAddress").attr("value");
73: $.ajax({
74: url : "api/contact/",
75: type : "PUT",
76: data : contact,
77: contentType : "application/json",
78: success : function () { loadAllContacts(); }
79: });
80: }
</script>
2: <div id="contacts"></div>
作者：蔣金楠
微信公眾賬號：大內老A
微博：www.weibo.com/artech
如果你想及時得到個人撰寫文章以及著作的消息推送，或者想看看個人推薦的技術資料，可以掃描左邊二維碼（或者長按識別二維碼）關注個人公眾號（原來公眾帳號蔣金楠的自媒體將會停用）。
本文版權歸作者和博客園共有，歡迎轉載，但未經作者同意必須保留此段聲明，且在文章頁麵明顯位置給出原文連接，否則保留追究法律責任的權利。
微信公眾賬號：大內老A
微博：www.weibo.com/artech
如果你想及時得到個人撰寫文章以及著作的消息推送，或者想看看個人推薦的技術資料，可以掃描左邊二維碼（或者長按識別二維碼）關注個人公眾號（原來公眾帳號蔣金楠的自媒體將會停用）。
本文版權歸作者和博客園共有，歡迎轉載，但未經作者同意必須保留此段聲明，且在文章頁麵明顯位置給出原文連接，否則保留追究法律責任的權利。
最後更新：2017-10-26 11:34:25