【Web API系列教程】3.6 — 实战:处理数据(创建JavaScript客户端)
来源:互联网 发布:淘宝卖家商品采集软件 编辑:程序博客网 时间:2024/05/21 19:47
在本节,你将使用HTML、JavaScript和Knockout.js库为应用程序创建客户端。我们将按如下步骤建立客户端应用:
1, 展示books列表
2, 展示book详细信息
3, 添加一本新书
Knockout.js库使用了模型-视图-视图模型(MVVM)模式:
1, 模型是在业务域(在本例中是books和authors)中数据在服务器端的表现形式。
2, 视图是表示层(HTML)。
3, 视图模型是维持模型的JavaScript对象。视图模型是UI的代码抽象。它不具备HTML表现形式,相反,它表示抽象特征的视图,例如”书籍列表“。
视图被数据绑定到视图模型。视图模型的更新将自动反映在视图中。视图模型也从视图中获取事件,比如按钮的点击。
这个实现使得在你的app中修改布局和UI更加容易,因为你可以改变这些绑定而无须任何代码。例如,你可能以ul的方式展示一个项列表,那么可以将其改变成表。
添加Knockout库
在Visual Studio中,点击Tools目录,选择Library Package Manager。然后选择Package Manager Console。在Package Manager Console窗口,输入以下命令:
Install-Package knockoutjs
这条命令将Knockout文件添加到Scripts文件夹下。
创建视图模型
在Scripts文件夹下添加一个名为app.js的JavaScript文件。(在Solution Explorer中,右击Scripts文件夹,选择Add,然后选择JavaScript File。)粘贴以下代码:
var ViewModel = function () { var self = this; self.books = ko.observableArray(); self.error = ko.observable(); var booksUri = '/api/books/'; function ajaxHelper(uri, method, data) { self.error(''); // Clear error message return $.ajax({ type: method, url: uri, dataType: 'json', contentType: 'application/json', data: data ? JSON.stringify(data) : null }).fail(function (jqXHR, textStatus, errorThrown) { self.error(errorThrown); }); } function getAllBooks() { ajaxHelper(booksUri, 'GET').done(function (data) { self.books(data); }); } // Fetch the initial data. getAllBooks();};ko.applyBindings(new ViewModel());
在Knockout中,observable类启用了数据绑定。当observable的内容改变时,observable会通知所有的数据绑定控制器,所以它们能够去更新它们自身。(而observable类是一个observable的数组版本。)以此开始,我们的视图模型有了两个observable:
1, books维持books列表。
2, error包含如果AJAX调用失败时的错误信息
该getAllbooks方法产生AJAX调用以得到books列表。然后将其结果添加到books数组中。
而ko.applyBinding方法是Knockout库的一部分。它使用视图模型作为一个参数并建立数据绑定。
添加Script Bundle
Bundle是一个在ASP.NET 4.5中出现的新特性,它使得组合或包装多个文件进一个文件更加容易。Bundle减少了向服务器的请求,而这恰能改进页面加载时间。
打开App_Start文件夹下的BundleConfig.cs文件,添加如下代码到RegisterBundles方法。
public static void RegisterBundles(BundleCollection bundles){ // ... // New code: bundles.Add(new ScriptBundle("~/bundles/app").Include( "~/Scripts/knockout-{version}.js", "~/Scripts/app.js"));}
- 【Web API系列教程】3.6 — 实战:处理数据(创建JavaScript客户端)
- 【Web API系列教程】3.1 — 实战:处理数据(创建项目)
- 【Web API系列教程】3.5 — 实战:处理数据(创建数据传输对象)
- 【Web API系列教程】3.7 — 实战:处理数据(创建UI视图)
- 【Web API系列教程】3.4 — 实战:处理数据(处理实体关系)
- 【Web API系列教程】3.2 — 实战:处理数据(添加模型和控制器)
- 【Web API系列教程】3.3 — 实战:处理数据(建立数据库)
- 【Web API系列教程】3.8 — 实战:处理数据(显示条目细节)
- 【Web API系列教程】3.9 — 实战:处理数据(添加新条目到数据库)
- 【Web API系列教程】3.10 — 实战:处理数据(发布App到Azure App Service)
- 【Web API系列教程】1.3 — 实战:用ASP.NET Web API和Angular.js创建单页面应用程序(上)
- 【Web API系列教程】1.4 — 实战:用ASP.NET Web API和Angular.js创建单页面应用程序(下)
- 【WEB API项目实战干货系列】- API访问客户端(WebApiClient适用于MVC/WebForms/WinForm)(四)
- 使用ASP.NET Web Api构建基于REST风格的服务实战系列教程【三】——Web Api入门
- 使用ASP.NET Web Api构建基于REST风格的服务实战系列教程【外传】——Attribute Routing
- Python3教程Web开发实战梳理-day9(编写API)
- 使用ASP.NET Web Api构建基于REST风格的服务实战系列教程
- 使用ASP.NET Web Api构建基于REST风格的服务实战系列教程
- Swift kCGImageAlphaPremultipliedLast unresolved
- 用eclipse加载别人的工程,报错Target runtime com.genuitec.runtime.generic.jee60 is not defined
- 从RunningAppProcessInfo得到ApplicationInfo
- 日经春秋 20160227
- 关于地图学的几个基本概念
- 【Web API系列教程】3.6 — 实战:处理数据(创建JavaScript客户端)
- (GOF23设计模式)_装饰模式
- 深入理解JVM之JVM内存区域详解
- 【LeetCode】Word Break
- An error occurred when merging assemblies: ILMerge.Merge: ERROR!!: Duplicate type 'index' found in a
- JDK1.8 HashMap源码分析
- 初学spring mvc的几点心得
- MapWinGIS编程(一)
- xxx.hbm.hibernate 配置