通过Knockout.js + ASP.NET Web API构建一个简单的CRUD应

yibin 2015-02-09 建站源码 769

较之面向最终消费者的 站,企业级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应用用于模拟“联系人管理”。当页面加载的时候,所有的联系人列表被列出来。在同一个页面中,我们可以添加一个新的联系人,也可以修改和删除现有联系人信息。整个应用唯一的页面在浏览器中的呈现效果如下图所示。

二、通过ASP.NET Web API提供服务


先 来看看ApiController的定义。如下面的代码片断所示,我们定义了一个名为ContactsController的ApiController 用于完成针对联系人的CRUD操作,我们采用HTTP Method(Get、Post、Put和Delete)对Action方法进行命名,因为在进行Action匹配的时候会默认以Http Method作为前缀进行匹配。
   1:publicclass ContactsController : ApiController

   2: {

   3:privatestatic 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:publicvoid Put(Contact contact)

  20:     {

  21:         contact.Id = Guid.NewGuid().ToString();

  22:         contacts.Add(contact);

  23:     }

  24:  

  25:publicvoid Post(Contact contact)

  26:     {

  27:         Delete(contact.Id);

  28:         contacts.Add(contact);

  29:     }

  30:  

  31:publicvoid Delete(string id)

  32:     {

  33:         Contact contact = contacts.FirstOrDefault(c => c.Id == id);

  34:         contacts.Remove(contact);

  35:     }

  36: }

  37:  

  38:publicclass Contact

  39: {

  40:publicstring Id { get; set; }

  41:publicstring FirstName { get; set; }

  42:publicstring LastName { get; set; }

  43:publicstring PhoneNo { get; set; }

  44:publicstring EmailAddress { get; set; }

  45: }


和ASP.NET MVC Web应用一样,我们同样采用URL路由机制来实现请求地址与目标Controller和Action的映射,而针对API默认注册的路有如下所示(这里调用的方法是MapHttpRoute而不是MapRoute)。
   1:publicclass RouteConfig

   2: {

   3:publicstaticvoid RegisterRoutes(RouteCollection routes)

   4:     {

   5:         routes.MapHttpRoute(

   6:             name: "DefaultApi",

   7:             routeTemplate: "api/{controller}/{id}",

   8:             defaults: new { id = RouteParameter.Optional }

   9:         );

  10:     }


11: }

扫码添加微信

13013082126 扫描微信 建站咨询 优化咨询