在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 allProducts

                select new {name = p.Name, category = p.Category};

            return Json(result, JsonRequestBehavior.AllowGet);

        }