較之面向最終消費者的網站,企業級Web應用對使用者體驗的要求要低一些。不過客戶對“使用者體驗”的要求是“與日俱增”的,很多被“慣壞了”的使用者已經不能忍受Postback帶來的頁面重新整理,是以Ajax在企業級Web應用中得到了廣泛的應用。企業級Web應用的一個特點是以“資料處理”為主,是以“面向綁定”的Knockout.js
是一個不錯的選擇。ASP.NET Web
API,作為.NET平台最好的REST服務開發平台(主要與WCF相比),則可以以服務的形式提供對資料的背景處理。
+ ASP.NET Web API建構了一個單純的對單一資料進行CRUD操作的應用,對于資料在界面上的呈現,我是通過jQuery
動态生成HTML的方式實作的。現在我們通過Knockout.js來進行資料綁定,你會發現我們代碼會變得很優雅。
這個簡單的Demo應用用于模拟“聯系人管理”。當頁面加載的時候,所有的聯系人清單被列出來。在同一個頁面中,我們可以添加一個新的聯系人,也可以修改和删除現有聯系人資訊。整個應用唯一的頁面在浏覽器中的呈現效果如下圖所示。

先來看看ApiController的定義。如下面的代碼片斷所示,我們定義了一個名為ContactsController的ApiController用于完成針對聯系人的CRUD操作,我們采用HTTP
Method(Get、Post、Put和Delete)對Action方法進行命名,因為在進行Action比對的時候會預設以Http
Method作為字首進行比對。
和ASP.NET MVC Web應用一樣,我們同樣采用URL路由機制來實作請求位址與目标Controller和Action的映射,而針對API預設注冊的路有如下所示(這裡調用的方法是MapHttpRoute而不是MapRoute)。
按照注冊的路由規則和Action方法名稱與HTTP方法的預設影射機制,我們可以直接在浏覽器中分别通路位址“/api/contacts”和“/api/contacts/001”得到所有聯系人清單和ID為“001”的聯系人資訊。得到的結果如下圖所示。
我們通過ASP.NET MVC來建構Web應用,預設的HomeController定義如下,預設的Index操作僅僅是将預設的View呈現出來而已。
下面是整個View的定義。我們采用jQuery進行Ajax調用ApiController進行聯系人的擷取、添加、修改和删除,資料和指令(添加、修改和删除)的綁定是通過Knockout.js來完成的。
</script>
作者:蔣金楠
微信公衆賬号:大内老A
如果你想及時得到個人撰寫文章以及著作的消息推送,或者想看看個人推薦的技術資料,可以掃描左邊二維碼(或者長按識别二維碼)關注個人公衆号(原來公衆帳号蔣金楠的自媒體将會停用)。
本文版權歸作者和部落格園共有,歡迎轉載,但未經作者同意必須保留此段聲明,且在文章頁面明顯位置給出原文連接配接,否則保留追究法律責任的權利。
<a href="http://www.cnblogs.com/artech/archive/2012/07/04/Knockout-web-api.html" target="_blank">原文連結</a>