• 用Knockoutjs与Asp.net MVC实现级联下拉列表


        Knockout Js 另一个javascript库。 开源, 纯Javascript,小,无依赖,支持众多浏览器。在Asp.net MVC中我们来实现一个简单的级联下拉列表。 先看我们定义的Controller与Model:

        public class HomeController : Controller
        {
            public ActionResult Index()
            {
                ViewBag.Country = new SelectList(Country.GetCountryList(), "Code", "Name");
                return View();
            }
     
            public ActionResult GetStates(string id = "")
            {
                var stateList = State.GetStates()
                    .Where(s => s.CountryCode.ToLower() == id.ToLower());
     
                return this.Json(stateList, JsonRequestBehavior.AllowGet);
            }
        }
     
        public class Country
        {
            public string Code { get; set; }
            public string Name { get; set; }
     
            public static List<Country> GetCountryList()
            {
                return new List<Country>
                {
                    new Country { Code = "IN", Name = "India" },
                    new Country { Code = "US", Name = "United State" },
                    new Country { Code = "UK", Name = "United Kingdom" }
                };
            }
        }
     
        public class State
        {
            public string CountryCode { get; set; }
            public int StateId { get; set; }
            public string StateName { get; set; }
     
            public static List<State> GetStates()
            {
                int stateId = 0;
                return new List<State>
                {
                    new State { CountryCode = "CN", StateId = stateId++, StateName = "ShangHai" },
                    new State { CountryCode = "CN", StateId = stateId++, StateName = "BeiJing" },
                    new State { CountryCode = "CN", StateId = stateId++, StateName = "HongKong" },
                    new State { CountryCode = "US", StateId = stateId++, StateName = "New York" },
                    new State { CountryCode = "US", StateId = stateId++, StateName = "California" },
                    new State { CountryCode = "US", StateId = stateId++, StateName = "Washington" },
                    new State { CountryCode = "UK", StateId = stateId++, StateName = "London" },
                    new State { CountryCode = "UK", StateId = stateId++, StateName = "Scotland" },
                    new State { CountryCode = "UK", StateId = stateId++, StateName = "Britian" }
                };
            }
        }


    注意这里是为了演示,在MODEL填充的数据。GetStates用于Ajax请求的Action。在前端的cshtml中,类似这样的片段:

    <p>
        <b>Select Country :</b> @Html.DropDownList("ddlCountry", ViewBag.Country as SelectList, "Select...", new { onchange = "FetchStates();" })
    </p>
    <p data-bind="visible: states().length > 0">
        <b>Select State :</b>
        <select data-bind="options: states, optionsText: 'StateName', optionsValue: 'StateId', optionsCaption: 'Choose...'">
        </select>
    </p>


    上面使用visible的API,从这里可以看出用于控制是否显示。参考官方的Visible Binding 的 API文档。 接着是基于select标签options binding。 在View中Javascript定义我们的ViewModel :

    function CascadingDDLViewModel() {
        this.states = ko.observableArray([]);
    }
     
    var objVM = new CascadingDDLViewModel();
    ko.applyBindings(objVM);

    我们看到上面的代码中,我们创建ko.observableArray类型states属性的ViewModel.knockoutjs中的Observable类型自动通知当它的对象被更新。
    这里又借助的data-bind特性,之前文章中有提过它,用knockoutjs的Viewmodel来实现绑定DOM元素行为。无论ViewModel被更新,同时DOM元素也会被自动更新.

    function FetchStates() {
        var countryCode = $("#ddlCountry").val();
        $.getJSON("/Home/GetStates/" + countryCode, null, function (data) {
            objVM.states(data);
        });
    }


    当下拉列表改变时,我们使用jQuery.getJSON方法去获得数据。在请求成功后更新ViewModel,而不需要手动用Javascript做字符串操作来实现一个DropDownList.

    您可能感兴趣的文章:

    Jquery实现无刷新DropDownList联动
    Html 5中自定义data-*特性


    作者:Petter Liu
    出处:http://www.cnblogs.com/wintersun/
    本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。
    该文章也同时发布在我的独立博客中-Petter Liu Blog

  • 相关阅读:
    dragloader.js帮助你在页面原生滚动下实现Pull Request操作
    移动Web单页应用开发实践——实现Pull to Request(上/下拉请求操作)
    【转】移动Web单页应用开发实践——页面结构化
    前端网址收集!Amazing! 神奇!
    前端代码书写规范
    扫描工具 分析
    backtrack5渗透 笔记
    Sqlmap注入技巧集锦
    nmap 高级扫描用法
    小温谈数据库优化--数据设计篇(转)
  • 原文地址:https://www.cnblogs.com/wintersun/p/2582960.html
Copyright © 2020-2023  润新知