Ajax就此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。

相关文章