通過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消費服務

一、一個簡單的基於CRUD的Web應用

這個簡單的Demo應用用於模擬“聯系人管理”。當頁面加載的時候，所有的聯系人列表被列出來。在同一個頁面中，我們可以添加一個新的聯系人，也可以修改和刪除現有聯系人信息。整個應用唯一的頁面在瀏覽器中的呈現效果如下圖所示。

二、通過ASP.NET Web API提供服務

我們來簡單介紹作為Web API形式發布的聯系人管理服務的定義，先來看看用於表示聯系人的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; }
}

“聯系人服務”以具有如下定義的ContactController的形式定義，它是ApiController的子類。簡單起見，我們采用靜態字段作為對聯系人信息的存儲。ContactController定義了Get、Put、Post和Delete用於進行對聯系人的獲取、添加、修改和刪除操作。我想對Web API不了解的人會感概，為了什么采用常用的四個HTTP方法作為操作的名稱，因為它們在默認的情況下就可以映射為HTTP請求的方法。

public class ContactController : ApiController
{
    private static List<Contact> contacts = new List<Contact>
    {
        new Contact{ Id="001", FirstName = "San", LastName="Zhang", PhoneNo="123", EmailAddress="[e-mail]"},
        new Contact{ Id="002",FirstName = "Si", LastName="Li", PhoneNo="456", EmailAddress="[e-mail]"}
    };

    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應用一樣，我們同樣采用URL路由機制來實現請求地址與目標Controller和Action的映射，而針對API默認注冊的路有如下所示。

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 }
        );
}

按照注冊的路由規則和Action方法名稱與HTTP方法的默認影射機制，我們可以直接在瀏覽器中分別訪問地址“/api/contact”和“/api/contact/001”得到所有聯系人列表和ID為“001”的聯系人信息。得到的結果如下圖所示。

三、通過JQuery消費服務

我們通過ASP.NET MVC來構建Web應用，默認的HomeController定義如下，默認的Index操作僅僅是將默認的View呈現出來而已。

public class HomeController : Controller
{
    public ActionResult Index()
    {
        return View();
    }
}

View中對用戶操作的相應和對后台服務的調用都通過JQuery來完成，整個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> &nbsp;&nbsp;&nbsp;&nbsp;"
   
   
   
                             + "<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>