通过Knockout.js + ASP.NET Web API构建一个简单的CRUD应用
2015-09-21 23:04
736 查看
REFERENCE FROM : /article/1308165.html
较之面向最终消费者的网站,企业级Web应用对用户体验的要求要低一些。不过客户对“用户体验”的要求是“与日俱增”的,很多被“惯坏了”的用户已经不能忍受Postback带来的页面刷新,所以Ajax在企业级Web应用中得到了广泛的应用。企业级Web应用的一个特点是以“数据处理”为主,所以“面向绑定”的Knockout.js 是一个不错的选择。ASP.NET Web API,作为.NET平台最好的REST服务开发平台(主要与WCF相比),则可以以服务的形式提供对数据的后台处理。
这个简单的Demo应用用于模拟“联系人管理”。当页面加载的时候,所有的联系人列表被列出来。在同一个页面中,我们可以添加一个新的联系人,也可以修改和删除现有联系人信息。整个应用唯一的页面在浏览器中的呈现效果如下图所示。
[/code]
[/code]
和ASP.NET MVC Web应用一样,我们同样采用URL路由机制来实现请求地址与目标Controller和Action的映射,而针对API默认注册的路有如下所示(这里调用的方法是MapHttpRoute而不是MapRoute)。
[/code]
[/code]
按照注册的路由规则和Action方法名称与HTTP方法的默认影射机制,我们可以直接在浏览器中分别访问地址“/api/contacts”和“/api/contacts/001”得到所有联系人列表和ID为“001”的联系人信息。得到的结果如下图所示。
[/code]
[/code]
下面是整个View的定义。我们采用jQuery进行Ajax调用ApiController进行联系人的获取、添加、修改和删除,数据和命令(添加、修改和删除)的绑定是通过Knockout.js来完成的。
[/code]
[/code]
较之面向最终消费者的网站,企业级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作为前缀进行匹配。[code] [code]
[/code]
[/code]
和ASP.NET MVC Web应用一样,我们同样采用URL路由机制来实现请求地址与目标Controller和Action的映射,而针对API默认注册的路有如下所示(这里调用的方法是MapHttpRoute而不是MapRoute)。
[code] [code]
[/code]
[/code]
按照注册的路由规则和Action方法名称与HTTP方法的默认影射机制,我们可以直接在浏览器中分别访问地址“/api/contacts”和“/api/contacts/001”得到所有联系人列表和ID为“001”的联系人信息。得到的结果如下图所示。
三、通过jQuery进行Ajax调用,利用Knockout.js进行数据绑定
我们通过ASP.NET MVC来构建Web应用,默认的HomeController定义如下,默认的Index操作仅仅是将默认的View呈现出来而已。[code] [code]
[/code]
[/code]
下面是整个View的定义。我们采用jQuery进行Ajax调用ApiController进行联系人的获取、添加、修改和删除,数据和命令(添加、修改和删除)的绑定是通过Knockout.js来完成的。
[code] [code]
6: <script type="text/javascript" src="../../Scripts/jquery-1.6.2.min.js"></script>
[/code]
[/code]
相关文章推荐
- Asp.Net MVC实现优酷(youku)Web的上传
- asp.net table表格表头及列固定实现
- »Spring 之AOP AspectJ切入点语法详解(最全了,不需要再去其他地找了)
- asp.net 一般处理程序session 为 null
- Asp.net 去掉html中的标记.txt
- ASP.NET图片处理三类经典问题
- ASP.NET MVC4系列页面缓存、缓存依赖SQL(真实项目注意细节)
- ASP.NET MVC SignalR(1):背景
- ASP.NET MVC SignalR
- 使用USBASP给Arduino烧写bootloader教程
- asp.net中的窗体身份验证(最简单篇)
- AspectJ AOP学习基础
- ASP.NET MVC5网站开发管理列表、回复及删除(十三)
- ASP强制刷新网页和判断文件地址实例代码
- asp.net后台导出excel的方法:使用response导出excel
- ASP中实现分页显示的七种方法
- ASP.NET MVC 4json之JsonResult
- asp.net(C#)时间相减 得到天数、小时、分钟、秒差
- ASP.NET内置对象
- 【转载】ASP.Net 中DataTextField和DataValueField