Cascading drop-down list using knockoutjs and Asp.net MVC

Knockout JS is another JavaScript library. Open-source, pure JavaScript, small, no dependency, supports many browsers. In Asp.net MVC, we can implement a simple cascade drop-down list. Let's first look at the controller and model we have defined:

    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" }

            };

        }

    }

Note that this is to demonstrate the data filled in the model. Getstates is the action used for Ajax requests. In the front-end cshtml, a segment similar to this is:

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

The above uses the visible API, from which you can see that it is used to control whether to display. Refer to the official visible binding API documentation. The following is based on the select tag options binding. In view, JavaScript defines our viewmodel:

function CascadingDDLViewModel() {

    this.states = ko.observableArray([]);

}

var objVM = new CascadingDDLViewModel();

ko.applyBindings(objVM);

 

We can see that in the above Code, the observable type in viewmodel. knockoutjs of the KO. observablearray Type States attribute is created to automatically notify the object when it is updated.

Here we also use the data-bind feature, which was mentioned in the previous article. We use the viewmodel of knockoutjs to bind DOM elements. Whether the viewmodel is updated or the DOM element is automatically updated.

function FetchStates() {

    var countryCode = $("#ddlCountry").val();

    $.getJSON("/Home/GetStates/" + countryCode, null, function (data) {

        objVM.states(data);

    });

}

When the drop-down list changes, we use jquery. getjson to obtain data. After the request is successful, update viewmodel without the need to manually perform string operations with JavaScript to implement a dropdownlist.

Articles you may be interested in:

Jquery achieves the linkage of refreshing dropdownlist

Custom Data-* features in HTML 5

 

Author: Petter Liu

Source: http://www.cnblogs.com/wintersun/

The copyright of this article is shared by the author and the blog Park. You are welcome to repost this article. However, you must retain this statement without the author's consent and provide a clear link to the original article on the article page. Otherwise, you will be held legally liable.

This article is also published in Petter Liu blog, my independent blog.