在ASP.NET MVC中使用Knockout实践08,使用foreach绑定集合
本篇体验使用 foreach
绑定一个Product集合。
首先使用构造创建一个View Model。
var Product = function(data) {this.name = ko.observable(data.name);this.category = ko.observable(data.category);};
由于是从服务端返回json数据,待会服务端返回Products集合的时候,可以构建一个key为name和category的json格式。
而foreach需要绑定的是集合,我们还需要创建一个View Model,该View Model有一个集合属性。
var RealVM = function(products) {var productsArr = [];for (var i = 0; i < products.length; i++) {var product = new Product(products[i]);productsArr.push(product);}this.products = ko.observableArray(productsArr);};
接着,向服务端发送异步请求,返回的Prduct集合作为RealVM构造函数的实参。
$.getJSON('@Url.Action("GetProducts","Home")', function(data) {var vm = new RealVM(data);ko.applyBindings(vm);});
前端完整代码如下:
@{ViewBag.Title = "Index";Layout = "~/Views/Shared/_Layout.cshtml";}<table><thead><tr><th>名称</th><th>类别</th></tr></thead><tbody data-bind="foreach:products"><tr><td data-bind="text: name"></td><td data-bind="text: category"></td></tr></tbody></table>@section scripts{<script src="~/Scripts/knockout-3.2.0.js"></script><script src="~/Scripts/knockout.validation.js"></script><script src="~/Scripts/zh-CN.js"></script><script type="text/javascript">//使用构造函数定义View Model,用data作为参数var Product = function(data) {this.name = ko.observable(data.name);this.category = ko.observable(data.category);};var RealVM = function(products) {var productsArr = [];for (var i = 0; i < products.length; i++) {var product = new Product(products[i]);productsArr.push(product);}this.products = ko.observableArray(productsArr);};//页面加载完毕向服务端发送异步请求$(function () {$.getJSON('@Url.Action("GetProducts","Home")', function(data) {var vm = new RealVM(data);ko.applyBindings(vm);});});</script>}
HomeController相关代码为:
static readonly IProductRepository repository = new ProductRepository();public JsonResult GetProducts(){var allProducts = repository.GetAll();var result = from p in allProductsselect new {name = p.Name, category = p.Category};return Json(result, JsonRequestBehavior.AllowGet);}
总结:使用foreach绑定需要一个提供集合属性的View Model,通过ko.observableArray()让集合属性具有Observable。
在ASP.NET MVC中使用Knockout实践08,使用foreach绑定集合的更多相关文章
- 在ASP.NET MVC中使用Knockout实践09,自定义绑定
Knockout真正强大之处在于绑定机制,通过data-bind属性值体现绑定,不仅可以绑定值,还可以绑定事件,甚至可以自定义绑定. 从一个例子看Knockou的绑定机制 假设想给一个button元素 ...
- 在ASP.NET MVC中使用Knockout实践01,绑定Json对象
本篇体验在ASP.NET MVC下使用Knockout,将使用EF Code First创建数据库.最后让Knockout绑定一个Json对象. 创建一个领域模型. namespace MvcAppl ...
- 在ASP.NET MVC中使用Knockout实践07,自定义验证信息的位置与内容
在前两篇中,体验了Knockout的基本验证和自定义验证.本篇自定义验证信息的显示位置与内容. 自定义验证信息的显示位置 通常,Knockout的验证信息紧跟在input后面,通过validation ...
- 在ASP.NET MVC中使用Knockout实践06,自定义验证、异步验证
在上一篇中体验了Knockout.Validation的基本验证,本篇体验自定义验证和异步验证. 自定义验证规则 ko.validation有一个rules属性,专门用来存放验证规则,它是一个键值对集 ...
- 在ASP.NET MVC中使用Knockout实践05,基本验证
本篇体验View Model验证.Knockout的subscribe方法能为View Model成员注册验证规则. @{ ViewBag.Title = "Index"; Lay ...
- 在ASP.NET MVC中使用Knockout实践04,控制View Model的json格式内容
通常,需要把View Model转换成json格式传给服务端.但在很多情况下,View Model既会包含字段,还会包含方法,我们只希望把字段相关的键值对传给服务端. 先把上一篇的Product转换成 ...
- 在ASP.NET MVC中使用Knockout实践03,巧用data参数
使用Knockout,当通过构造函数创建View Model的时候,构造函数的参数个数很可能是不确定的,于是就有了这样的一个解决方案:向构造函数传递一个object类型的参数data. <inp ...
- 在ASP.NET MVC中使用Knockout实践02,组合View Model成员、Select绑定、通过构造器创建View Model,扩展View Model方法
本篇体验使用ko.computed(fn)计算.组合View Model成员.Select元素的绑定.使用构造器创建View Model.通过View Model的原型(Prototype)为View ...
- [摘]在ASP.NET MVC中使用DropDownList
在ASP.NET MVC中,尽管我们可以直接在页面中编写HTML控件,并绑定控件的属性,但更方便的办法还是使用HtmlHelper中的辅助方法.在View中,包含一个类型为HtmlHelper的属性H ...
随机推荐
- mysql5.7主从复制--在线变更复制类型【转】
这里说一下关于如何在线变更复制类型(日志复制到全局事物复制),参考课程:mysql5.7复制实战 先决条件 (1)集群中所有的服务器版本均高于5.7.6(2)集群中所有的服务器gtid_mod ...
- rank over partition by
高级函数,分组排序 over: 在什么条件之上. partition by e.deptno: 按部门编号划分(分区). order by e.sal desc: 按工资从高到低排序(使用rank() ...
- (mysql)触发器、事件、事务、函数
1.事务操作原理:事务开启之后Start transaction,所有的操作都会临时保存到事务日志.只有在得到commit才会关闭,否则清空:2.设置回滚点: savepoint 回滚点名字: 回到 ...
- Java中抽象类概述
抽象类 1.抽象类的定义 抽象类是为子类提供一个规范,这就必须联系到继承: 抽象类的制定就是让子类继承的: public abstract 类名{ //类体 //抽象方法 修饰符 abstract ...
- https-配置使用HTTPS的ASP.NET Web应用
有关HTTPS.SSL以及SSL证书的工作原理,参见 <HTTPS-HTTPS原理> <HTTPS-SSL证书> <HTTPS-攻击实例与防御> 本文将演示如何在I ...
- Java编程的逻辑 (42) - 排序二叉树
本系列文章经补充和完善,已修订整理成书<Java编程的逻辑>,由机械工业出版社华章分社出版,于2018年1月上市热销,读者好评如潮!各大网店和书店有售,欢迎购买,京东自营链接:http:/ ...
- oracle中 connect by prior 递归查询
Oracle中start with...connect by prior子句用法 connect by 是结构化查询中用到的,其基本语法是: select ... from tablename sta ...
- 如何简单区分Web前后端与MVC
MVC是开发所有软件所必须涉及的基本几个划分 M主要负责数据与模型,V主要负责显示C主要负责交互与业务所以不管是前端还是后端,都是有MVC的.MVC是一个对于软件简单的抽象,不管是M还是V,还是C都是 ...
- Kmeans 聚类 及其python实现
主要参考 K-means 聚类算法及 python 代码实现 还有 <机器学习实战> 这本书,当然前面那个链接的也是参考这本书,懂原理,会用就行了. 1.概述 K-means ...
- 2018年东北农业大学春季校赛 C-wyh的商机
一天,你们wyh学长和你们zhl学长玩一个游戏,这个游戏规则是这样的 给你n个城市,保证这n个城市之间都只有一条道路可以到达. 有一件物品,在所有城市中都是一样的,但是由于各个城市的经济发展不同,导致 ...