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

发布时间：2020-12-16 09:07:10 所属栏目：asp.Net 来源：网络整理

导读：较之面向最终消费者的网站，企业级Web应用对用户体验的要求要低一些。不过客户对“用户体验”的要求是“与日俱增”的，很多被“惯坏了”的用户已经不能忍受Postback带来的页面刷新，所以Ajax在企业级Web应用中得到了广泛的应用。企业级Web应用的一个特点是以

较之面向最终消费者的网站，企业级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: public class ContactsController : ApiController

   3:     private static List<Contact> contacts = new List<Contact>

   5:         new Contact{ Id = "001",FirstName = "San",LastName="Zhang",PhoneNo="123",EmailAddress="zhangsan@gmail.com"},

   7:     };

   9:     public IEnumerable<Contact> Get()

  11:         return contacts;

  13:?

  15:     {

  17:     }

  19:     void Put(Contact contact)

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

  23:     }

  25:     void Post(Contact contact)

  27:         Delete(contact.Id);

  29:     }

  31:     void Delete(string id)

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

  35:     }

  37:?

  39: {

  41:     string FirstName { get; set; }

  43:     string PhoneNo { get; set; }

  45: }

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

static void RegisterRoutes(RouteCollection routes)

   6:             name: "DefaultApi",

   9:         );

  11: }

按照注册的路由规则和Action方法名称与HTTP方法的默认影射机制，我们可以直接在浏览器中分别访问地址“/api/contacts”和“/api/contacts/001”得到所有联系人列表和ID为“001”的联系人信息。得到的结果如下图所示。

三、通过jQuery进行Ajax调用，利用Knockout.js进行数据绑定

我们通过ASP.NET MVC来构建Web应用，默认的HomeController定义如下，默认的Index操作仅仅是将默认的View呈现出来而已。

public ActionResult Index()

   6:     }

<!DOCTYPE html>

head   4:         title>@ViewBag.Title - My ASP.NET MVC Application</   5:         @Styles.Render("~/Content/css" )

1:?

   1: </script>

   3:     <body>

   5:          <table>

   7:                 <th>First Name</th>

   9:                 <th>Phone No.</th>

  11:                 <th></th>

  13:             <tbody>

  15:                 <tr>

  17:                     <td data-bind="text: LastName" />

  19:                     <td><input type="text" class="textbox long" data-bind="value: EmailAddress" /></td>

  21:                         <a href="#" data-bind="click: $root.updateContact">Update</a><a href="click: $root.deleteContact">Delete</a>

  23:                 </tr>

  25:                 <tr data-bind="with: addedContact">

  27:                     <td><input type="value: LastName"</td>

  29:                     <td><input type="value: EmailAddress"</td>

  31:                 </tr>

  33:         </table>

  35:     <script type="text/javascript" >

  37:             self = this;

  39:             self.addedContact = ko.observable();

  41:             self.loadContacts = function () {

  43:                     self.contacts(data);

  45:                     self.addedContact(emptyContact);

  47:                 });

  49:?

  52:                     return;

  54:                 $.ajax({

  56:                     data: self.addedContact(),

  59:                 });

  61:?

  64:                     url: "api/contacts/" + data.Id,1)" id="lnum65">  65:                     data: data,1)" id="lnum66">  66:                     type: "POST",1)" id="lnum67">  67:                     success: self.loadContacts

  69:             };

  71:             self.deleteContact = function (data) {

  73:                     url:   74:                     type: "DELETE",1)" id="lnum75">  75:                     success: self.loadContacts

  77:             };

  79:             self.validate =   80:                 if (data.FirstName && data.LastName && data.PhoneNo && data.EmailAddress) {

  82:                 }

  84:                 false;

  86:             self.loadContacts();

  88:         ko.applyBindings(new contactManagerModel());