专栏首页大内老A通过Knockout.js + ASP.NET Web API构建一个简单的CRUD应用

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

较之面向最终消费者的网站,企业级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
   2: {
   3:     private static 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:     public void Put(Contact contact)
  20:     {
  21:         contact.Id = Guid.NewGuid().ToString();
  22:         contacts.Add(contact);
  23:     }
  24:  
  25:     public void Post(Contact contact)
  26:     {
  27:         Delete(contact.Id);
  28:         contacts.Add(contact);
  29:     }
  30:  
  31:     public void Delete(string id)
  32:     {
  33:         Contact contact = contacts.FirstOrDefault(c => c.Id == id);
  34:         contacts.Remove(contact);
  35:     }
  36: }
  37:  
  38: public class Contact
  39: {
  40:     public string Id { get; set; }
  41:     public string FirstName { get; set; }
  42:     public string LastName { get; set; }
  43:     public string PhoneNo { get; set; }
  44:     public string EmailAddress { get; set; }
  45: }

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

   1: public class RouteConfig
   2: {
   3:     public static void RegisterRoutes(RouteCollection routes)
   4:     {
   5:         routes.MapHttpRoute(
   6:             name: "DefaultApi",
   7:             routeTemplate: "api/{controller}/{id}",
   8:             defaults: new { id = RouteParameter.Optional }
   9:         );
  10:     }
  11: }

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

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

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

   1: public class HomeController : Controller
   2: {
   3:     public ActionResult Index()
   4:     {
   5:         return View();
   6:     }
   7: }

下面是整个View的定义。我们采用jQuery进行Ajax调用ApiController进行联系人的获取、添加、修改和删除,数据和命令(添加、修改和删除)的绑定是通过Knockout.js来完成的。

   1: <!DOCTYPE html>
   2: <html lang="en">
   3:     <head>
   4:         <title>@ViewBag.Title - My ASP.NET MVC Application</title>
   5:         @Styles.Render("~/Content/css" )
   6:         <script type="text/javascript" src="../../Scripts/jquery-1.6.2.min.js"></script>
   1:  
   2:         <script type="text/javascript" src="../../Scripts/knockout-2.0.0.js">
   1: </script>       
   2:     </head>
   3:     <body>
   4:     <div id="contacts">
   5:          <table>
   6:             <tr>
   7:                 <th>First Name</th>
   8:                 <th>Last Name</th>
   9:                 <th>Phone No.</th>
  10:                 <th>Email Address</th>
  11:                 <th></th>
  12:             </tr>
  13:             <tbody>
  14:                 <!-- ko foreach: contacts -->
  15:                 <tr>
  16:                     <td data-bind="text: FirstName" />
  17:                     <td data-bind="text: LastName" />
  18:                     <td data-bind="text: PhoneNo" />
  19:                     <td><input type="text" class="textbox long" data-bind="value: EmailAddress" /></td>
  20:                     <td>
  21:                         <a href="#" data-bind="click: $root.updateContact">Update</a><a href="#" data-bind="click: $root.deleteContact">Delete</a>
  22:                     </td>
  23:                 </tr>
  24:                 <!-- /ko -->
  25:                 <tr data-bind="with: addedContact">
  26:                     <td><input type="text" class="textbox" data-bind="value: FirstName"</td>
  27:                     <td><input type="text" class="textbox" data-bind="value: LastName"</td>
  28:                     <td><input type="text" class="textbox" data-bind="value: PhoneNo"</td>
  29:                     <td><input type="text" class="textbox long" data-bind="value: EmailAddress"</td>
  30:                     <td><a href="#" data-bind="click: $root.addContact">Add</a></td>
  31:                 </tr>
  32:             </tbody>
  33:         </table>
  34:     </div>
  35:     <script type="text/javascript" >
  36:         function contactManagerModel() {
  37:             self = this;
  38:             self.contacts = ko.observableArray();
  39:             self.addedContact = ko.observable();
  40:  
  41:             self.loadContacts = function () {
  42:                 $.get("/api/contacts", null, function (data) {
  43:                     self.contacts(data);
  44:                     var emptyContact = { Id: "-1", FirstName: "", LastName: "", PhoneNo: "", EmailAddress: "" };
  45:                     self.addedContact(emptyContact);
  46:                     $("table tr:odd").addClass("oddRow");
  47:                 });
  48:             };
  49:  
  50:             self.addContact = function (data) {
  51:                 if (!self.validate(data)) {
  52:                     return;
  53:                 }
  54:                 $.ajax({
  55:                     url: "api/contacts/",
  56:                     data: self.addedContact(),
  57:                     type: "PUT",
  58:                     success: self.loadContacts
  59:                 });
  60:             };
  61:  
  62:             self.updateContact = function (data) {
  63:                 $.ajax({
  64:                     url: "api/contacts/" + data.Id,
  65:                     data: data,
  66:                     type: "POST",
  67:                     success: self.loadContacts
  68:                 });                        
  69:             };
  70:  
  71:             self.deleteContact = function (data) {
  72:                 $.ajax({
  73:                     url: "api/contacts/" + data.Id,
  74:                     type: "DELETE",
  75:                     success: self.loadContacts
  76:                 });
  77:             };
  78:  
  79:             self.validate = function (data) {
  80:                 if (data.FirstName && data.LastName && data.PhoneNo && data.EmailAddress) {
  81:                     return true;
  82:                 }
  83:                 alert("Please provide complete contact information!");
  84:                 return false;
  85:             }
  86:             self.loadContacts();
  87:         }
  88:         ko.applyBindings(new contactManagerModel());
  89:     
</script>
   7:     </body>
   8: </html>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Asp.Net WebAPI核心对象解析(三)

       对于.NET的分布式应用开发,可以供我们选择的技术和框架比较多,例如webservice,.net remoting,MSMQ,WCF等等技术。对于这些技...

    彭泽0902
  • 使用RazorEngine对ASP.NET MVC的Views进行UnitTest

    有的时候我们需要对Razor最后生产的文本(HTML OR XML OR..)进行单元测试。 使用Nuget安装RazorEngine。 新建一个ASP.NET...

    kklldog
  • ASP.NET SignalR2持久连接层解析

        越是到年底越是感觉浑身无力,看着啥也不想动,只期盼着年终奖的到来以此来给自己打一针强心剂。估摸着大多数人都跟我一样犯着这样浑身无力的病,感觉今年算是没挣...

    彭泽0902
  • ASP.NET的session操作方法总结

        在开发ASP.NET程序时,需要对相关数据进行缓存,缓存较多的主要是用户的身份信息,现提供几个对session操作较为常用的方法: 1.添加sess...

    彭泽0902
  • ASP.NET MVC Autofac依赖注入的一点小心得(包含特性注入)

    前言 IOC的重要性 大家都清楚..便利也都知道..新的ASP.NET Core也大量使用了这种手法.. 一直憋着没写ASP.NET Core的文章..还是怕误...

    GuZhenYin
  • Asp.Net WebApi核心对象解析(一)

        生活需要自己慢慢去体验和思考,对于知识也是如此。匆匆忙忙的生活,让人不知道自己一天到晚都在干些什么,似乎每天都在忙,但又好似不知道自己到底在忙些什...

    彭泽0902
  • Asp.net Core中SignalR Core预览版的一些新特性前瞻,附源码(消息订阅与发送二进制数据)

    前言 一晃一个月又过去了,上个月有个比较大的项目要验收上线.所以忙的脚不沾地.现在终于可以忙里偷闲,写一篇关于SignalR Core的文章了. 先介绍一下Si...

    GuZhenYin
  • ASP.NET MVC 6路由技术

    在我们跳转到自定义路由之前,我们必须先了解下MVC6基于MVC5的基本变化。 ASP.NET MVC6将所有必要的启动服务,定义和配置的应用程序依赖关系放在一个...

    Techeek
  • 采用Opserver来监控你的ASP.NET项目系列(二、监控SQL Server与Asp.Net项目)

    前言 之前有过2篇关于如何监控ASP.NET core项目的文章,有兴趣的也可以看看. 今天我们主要来介绍一下,如何使用Opserver监控我们的SQL Ser...

    GuZhenYin
  • 开源免费的.NET图像即时处理的组件ImageProcessor

       承接以前的组件系列,这个组件系列旨在介绍.NET相关的组件,让大家可以在项目中有一个更好的选择组件的介绍绝对不是一篇文章可以叙述完的,因为一个组件是经过开...

    彭泽0902

扫码关注云+社区

领取腾讯云代金券