ASP.NET Web API和JQ創(chuàng)建簡單Web應(yīng)用
看了dudu的《HttpClient + ASP.NET Web API, WCF之外的另一個(gè)選擇》一文，想起多很久之前體現(xiàn)ASP.NET Web API而創(chuàng)建的一個(gè)Demo。這是一個(gè)只涉及到簡單CRUD操作的Web應(yīng)用，業(yè)務(wù)邏輯以Web API的形式定義并以服務(wù)的形式發(fā)布出來，前臺(tái)通過jQuery處理用戶交互并調(diào)用后臺(tái)服務(wù)。[源代碼從這里下載]
一、一個(gè)簡單的基于CRUD的Web應(yīng)用
這個(gè)簡單的Demo應(yīng)用用于模擬“聯(lián)系人管理”。當(dāng)頁面加載的時(shí)候，所有的聯(lián)系人列表被列出來。在同一個(gè)頁面中，我們可以添加一個(gè)新的聯(lián)系人，也可以修改和刪除現(xiàn)有聯(lián)系人信息。整個(gè)應(yīng)用***的頁面在瀏覽器中的呈現(xiàn)效果如下圖所示。
#p#
二、通過ASP.NET Web API提供服務(wù)
我們來簡單介紹作為Web API形式發(fā)布的聯(lián)系人管理服務(wù)的定義，先來看看用于表示聯(lián)系人的Contact類型的定義。
- public class Contact
- {
- public string Id { get; set; }
- public string FirstName { get; set; }
- public string LastName { get; set; }
- public string PhoneNo { get; set; }
- public string EmailAddress { get; set; }
- }
“聯(lián)系人服務(wù)”以具有如下定義的ContactController的形式定義，它是ApiController的子類。簡單起見，我們采用靜態(tài)字段作為對(duì)聯(lián)系人信息的存儲(chǔ)。ContactController定義了Get、Put、Post和Delete用于進(jìn)行對(duì)聯(lián)系人的獲取、添加、修改和刪除操作。我想對(duì)Web API不了解的人會(huì)感概，為了什么采用常用的四個(gè)HTTP方法作為操作的名稱，因?yàn)樗鼈冊(cè)谀J(rèn)的情況下就可以映射為HTTP請(qǐng)求的方法。
- public class ContactController : ApiController
- {
- private static List<Contact> contacts = new List<Contact>
- {
- new Contact{ Id="001", FirstName = "San", LastName="Zhang", PhoneNo="123", EmailAddress="zhangsan@gmail.com"},
- new Contact{ Id="002",FirstName = "Si", LastName="Li", PhoneNo="456", EmailAddress="lisi@gmail.com"}
- };
- public IEnumerable<Contact> Get()
- {
- return contacts;
- }
- public Contact Get(string id)
- {
- return contacts.FirstOrDefault(c => c.Id == id);
- }
- public void Put(Contact contact)
- {
- if (string.IsNullOrEmpty(contact.Id))
- {
- contact.Id = Guid.NewGuid().ToString();
- }
- contacts.Add(contact);
- }
- public void Post(Contact contact)
- {
- Delete(contact.Id);
- contacts.Add(contact);
- }
- public void Delete(string id)
- {
- Contact contact = contacts.FirstOrDefault(c => c.Id == id);
- contacts.Remove(contact);
- }
和ASP.NET MVC Web應(yīng)用一樣，我們同樣采用URL路由機(jī)制來實(shí)現(xiàn)請(qǐng)求地址與目標(biāo)Controller和Action的映射，而針對(duì)API默認(rèn)注冊(cè)的路有如下所示。
- public class MvcApplication : System.Web.HttpApplication
- {
- //...
- public static void RegisterRoutes(RouteCollection routes)
- {
- //...
- routes.MapHttpRoute(
- name: "DefaultApi",
- routeTemplate: "api/{controller}/{id}",
- defaults: new { id = RouteParameter.Optional }
- );
按照注冊(cè)的路由規(guī)則和Action方法名稱與HTTP方法的默認(rèn)影射機(jī)制，我們可以直接在瀏覽器中分別訪問地址“/api/contact”和“/api/contact/001”得到所有聯(lián)系人列表和ID為“001”的聯(lián)系人信息。得到的結(jié)果如下圖所示。
#p#
三、通過JQuery消費(fèi)服務(wù)
我們通過ASP.NET MVC來構(gòu)建Web應(yīng)用，默認(rèn)的HomeController定義如下，默認(rèn)的Index操作僅僅是將默認(rèn)的View呈現(xiàn)出來而已。
- public class HomeController : Controller
- {
- public ActionResult Index()
- {
- return View();
- }
- }
View中對(duì)用戶操作的相應(yīng)和對(duì)后臺(tái)服務(wù)的調(diào)用都通過JQuery來完成，整個(gè)View的定義如下所示。
- <script type="text/javascript">
- $(function () {
- loadAllContacts();
- }
- )
- function loadAllContacts() {
- $.ajax({
- url : "api/contact",
- type : "GET",
- dataType: "json",
- success : function (data) { renderContactList(data) }
- }
- );
- }
- function renderContactList(contacts) {
- var html = "<table>";
- html += "<tr><th>First Name</th><th>Last Name</th><th>Phone No.</th><th>Email Address</th><th></th></tr>";
- for (i = 0; i < contacts.length; i++) {
- html += "<tr><td>" + contacts[i].FirstName + "</td><td>"
- + contacts[i].LastName + "</td><td>" + contacts[i].PhoneNo + "</td><td>"
- + "<input type=\"text\" class=\"textbox long\" id=\"" + contacts[i].Id + "\" value =\"" + contacts[i].EmailAddress + "\"/>" + "</td><td>"
- + "<a href=\"#\" onclick = \"updateContact('" + contacts[i].Id + "')\">Update</a> "
- + "<a href=\"#\" onclick = \"deleteContact('" + contacts[i].Id + "')\">Delete</a>" + "</td></tr>";
- }
- html += "<tr><td>" + "<input id=\"firstName\" type=\"text\" class=\"textbox\"/>" + "</td><td>"
- + "<input id=\"lastName\" type=\"text\" class=\"textbox\"/>" + "</td><td>"
- + "<input id=\"phoneNo\" type=\"text\" class=\"textbox\"/>" + "</td><td>"
- + "<input id=\"emailAddress\" type=\"text\" class=\"textbox long\"/>" + "</td><td>"
- + "<a href=\"#\" id=\"add\" onclick=\"addContact();\">Create</a> " + "</td></tr>";
- html += "</table>";
- $("#contacts").html(html);
- $("table tr:odd").addClass("oddRow");
- }
- function deleteContact(id) {
- $.ajax({
- url : "api/contact/" + id,
- type : "DELETE",
- success : function () { loadAllContacts();}
- });
- }
- function updateContact(id) {
- var emailAddress = $("#" +id).attr("value");
- $.ajax({
- url : "api/contact/" + id,
- type : "GET",
- success : function (contact) {
- contact.EmailAddress = emailAddress;
- update(contact);
- }
- });
- }
- function update(contact) {
- $.ajax({
- url : "api/contact/",
- type : "POST",
- data : contact,
- contentType : "application/json",
- success : function () { loadAllContacts(); }
- });
- }
- function addContact() {
- var contact = new Object();
- contact.FirstName = $("#firstName").attr("value");
- contact.LastName = $("#lastName").attr("value");
- contact.PhoneNo = $("#phoneNo").attr("value");
- contact.EmailAddress = $("#emailAddress").attr("value");
- $.ajax({
- url : "api/contact/",
- type : "PUT",
- data : contact,
- contentType : "application/json",
- success : function () { loadAllContacts(); }
- });
- }
- </script>
- <div id="contacts"></div>
原文鏈接：http://www.cnblogs.com/artech/archive/2012/05/14/web-api-demo.html
