ASP.NET MVC使用Knockout获取数组元素索引的2种方法

在遍历数组、集合的时候，通常要获取元素的索引，本篇体验使用Knockout获取索引的2种方法。

假设有这样的一个模型：

namespace UseIndex.Models
{
    public class Student
    {
        public int Id { get; set; }
        public string Name { get; set; }
    }
}

在HomeController中，先模拟一个Student的集合，在投影出Name属性的集合，最后以Json返回给前台视图。

using System.Collections.Generic;
using System.Linq;
using System.Web.Mvc;
using UseIndex.Models;

namespace UseIndex.Controllers
{
    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            return View();
        }

        public JsonResult GetStudentNames()
        {
            var students = new List<Student>()
            {
                new Student(){Id = 1, Name = "小明"},
                new Student(){Id = 2, Name = "啸天"}
            };

            var names = from student in students
                select new {student.Name};
            return Json(names, JsonRequestBehavior.AllowGet);
        }

    }
}

在Home/Index.cshtml中：

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <script src="~/Scripts/jquery-1.8.2.min.js"></script>
    <script src="~/Scripts/knockout-2.2.0.js"></script>
    <script type="text/javascript">
        $(function() {
            var vm = new ViewModel();
            ko.applyBindings(vm);
            vm.init();
        });

        function ViewModel() {
            var self = this;

            self.items = ko.observableArray([]);

            self.showItemIndex = function(item, event) {
                var context = ko.contextFor(event.target); //获取绑定元素的上下文;event.target绑定View Model的DOM元素
                var index = context.$index();
                alert("当前索引是：" + index);
            };

            self.init = function() {
                $.getJSON('@Url.Action("GetStudentNames","Home")', function(data) {
                    var arr = [];
                    for (var i = 0; i < data.length; i++) {
                        arr[i] = data[i].Name;
                    }
                    self.items(arr);
                });
            };
        }
    </script>
    <style type="text/css">
        //样式略
    </style>
</head>
<body>
    <div>
        <table>
            <thead>
                <tr>
                    <th>索引</th>
                    <th>编号</th>
                    <th>名称</th>
                    <th>在View Model中的索引</th>
                </tr>
            </thead>
            <tbody data-bind="foreach: items">
                <tr>
                    <td data-bind="text: $index"></td>
                    <td data-bind="text: $index() + 1"></td>
                    <td data-bind="text: $data"></td>
                    <td><a href="#" rel="external nofollow"  data-bind="click: $root.showItemIndex">点击显示索引</a></td>
                </tr>
            </tbody>
        </table>
    </div>
</body>
</html>

以上，$data是指当前集合元素。$root是指根context中的ViewModel。

运行：

总结

获取集合或数组元素的索引有2种方式：
1、通过data-bind="text: $index"或data-bind="text: $index() + 1"
2、在View Model中通过方法来获得：先获取到上下文，再context.$index()

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，谢谢大家对我们的支持。如果你想了解更多相关内容请查看下面相关链接

赞 (0)

相关推荐

  • ASP.NET MVC为用户创建专属文件夹

    ASP.NET MVC为用户创建专属文件夹

    假设需要为用户创建专属文件夹,文件夹名为用户名,并且需要根据用户类型在不同的文件夹下创建目标文件夹. 在F盘创建"Users"文件夹,在其中创建"Gold"文件夹,用来归类"金牌会员",创建"Silver",用来归类"银牌会员". 关于用户的Model. using System.ComponentModel.DataAnnotations; namespace MvcApplication1.Models

  • ASP.NET MVC实现路由功能

    ASP.NET MVC实现路由功能

    1.定义路由.路由规则 public static void RegisterRoutes(RouteCollection routes) { routes.IgnoreRoute("{resource}.axd/{*pathInfo}"); routes.MapRoute( name: "Default", url: "{controller}/{action}/{id}", defaults: new { controller = "

  • ASP.NET MVC把表格导出到Excel

    有关Model: namespace MvcApplication1.Models { public class Coach { public int Id { get; set; } public string Name { get; set; } } } HomeController中,借助GridView控件把内容导出到Excel: using System.Collections.Generic; using System.IO; using System.Linq; using Sys

  • ASP.NET MVC创建XML文件并实现元素增删改

    如果创建如下的XML: <?xml version="1.0" encoding="utf-8" standalone="yes"?> <Students> <Student Id="1"> <Name>darren</Name> </Student> </Students> 创建XML文件 在HomeController中,在根目录下创建ne

  • ASP.NET MVC实现文件下载

    思路 点击一个链接,把该文件的Id传递给控制器方法,遍历文件夹所有文件,根据ID找到对应文件,并返回FileResult类型. 与文件相关的Model: namespace MvcApplication1.Models { public class FileForDownload { public int Id { get; set; } public string Name { get; set; } public string Path { get; set; } } } 文件帮助类 写一个

  • ASP.NET MVC打印表格并实现部分视图表格打印

    ASP.NET MVC打印表格并实现部分视图表格打印

    假设在一个页面上有众多内容,而我们只想把该页面上的表格内容打印出来,window.print()方法会把整个页面的内容打印出来,如何做到只打印表格内容呢? 既然window.print()只会打印整页的内容,何不把表格放在一个部分视图中,在部分视图中再调用window.print()方法. Model很简单: public class Student { public int Id { get; set; } public string Name { get; set; } public dec

  • ASP.NET MVC实现多选下拉框保存并显示

    ASP.NET MVC实现多选下拉框保存并显示

    在"ASP.NET MVC实现多选下拉框"中,主要是多选下拉框的显示,而实际情况通常是:选择多个选项提交后,需要在编辑页把所有选中的项显示出来. 模拟这样的一个场景:一个车迷可能有多个自己喜欢的汽车品牌. 关于车迷的Model: namespace MvcApplication1.Models { public class CarFan { public int Id { get; set; } public string Name { get; set; } public strin

  • ASP.NET MVC使用JCrop上传并裁剪图片

    ASP.NET MVC使用JCrop上传并裁剪图片

    JCrop用来裁剪图片,本篇想体验的是: 在视图页上传图片: 上传成功,跳转到另外一个编辑视图页,使用JCrop对该图片裁剪,并保存图片到指定文件夹: 裁剪成功后,在主视图页显示裁剪图片: 当然,实际项目中最有可能的做法是:在本页上传.裁剪并保存. 思路 在上传图片视图页,把图片上传保存到一个临时文件夹Upload 在编辑裁剪视图页,点击"裁剪"按钮,把JCrop能提供的参数,比如宽度.高度.离顶部距离,离底部距离,离左右端距离等封装成类,传递给控制器方法 控制器方法根据接收到的参数,

  • ASP.NET MVC使用jQuery Template实现批量更新

    思路 引用jQuery Template所需要的js文件:jquery.tmpl.min.js 在<script type="text/x-jquery-tmpl" id="movieTemplate"></script>中生成模版内容,里面包含占位符 点击添加按钮的时候,把模版内容追加到界面上,并给占位符赋值 jQuery Template的内容大致是这样: <script type="text/x-jquery-tmpl&

  • ASP.NET MVC下拉框中显示枚举项

    ASP.NET MVC下拉框中显示枚举项

    本篇将通过3种方式,把枚举项上的自定义属性填充到下拉框:1.通过控制器返回List<SelectListItem>类型给前台视图2.通过为枚举类型属性打上UIHint属性让模版显示枚举项3.通过自定义元数据提供器DataAnnotationsModelMetadataProvider让模版显示枚举项 我们经常会把类型为Int16的属性通过枚举来获得.比如: public class SomeClass { public int16 Status{get;set;} } 对应的枚举: publi

随机推荐