Cascading drop using KNOCKOUT.JS and ASP.NET MVC 4

Question

I follow this guide:

http://www.dotnetexpertguide.com/2012/06/cascading-dropdown-knockoutjs-aspnet.html

The provided project works like a charm. It can be downloaded here: http://files.dotnetexpertguide.com/download.aspx?key=cascadingddlknockoutjs

The question is, I can’t understand how to change the view, so that another window for choosing a city appears and its contents change according to the selected state?

Writing another model for the city and actions in the controller to get the cities by state identifier is pretty straight forward, but I don’t understand how to change the view code and JS to make it work.

So the code to represent:

<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> <script type='text/javascript'> function CascadingDDLViewModel() { this.states = ko.observableArray([]); } var objVM = new CascadingDDLViewModel(); ko.applyBindings(objVM); function FetchStates() { var countryCode = $("#ddlCountry").val(); $.getJSON("/Home/GetStates/" + countryCode, null, function (data) { objVM.states(data); }); } </script> 

Any help is greatly appreciated.

Answer 1

 <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 id="ddlStates" data-bind="options: states, optionsText: 'StateName', optionsValue: 'StateId', optionsCaption: 'Choose...'"></select> </p> <p data-bind="visible: cities().length > 0"> <b>Select City :</b> <select data-bind="options: cities, optionsText: 'CityName', optionsValue: 'CityId', optionsCaption: 'Choose...'"></select> </p> <script type='text/javascript'> function CascadingDDLViewModel() { this.states = ko.observableArray([]); this.cities = ko.observableArray([]); } var objVM = new CascadingDDLViewModel(); ko.applyBindings(objVM); function FetchStates() { var countryCode = $("#ddlCountry").val(); $.getJSON("/Home/GetStates/" + countryCode, null, function (data) { objVM.states(data); }); function FetchCities() { var stateId = $("#ddlStates").val(); $.getJSON("/Home/GetCities/" + stateId, null, function (data) { objVM.cities(data); }); } </script> 

Answer 2

 <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 id="ddlStates" data-bind="value: selectedState,options: states, optionsText: 'StateName', optionsValue: 'StateId', optionsCaption: 'Choose...'"></select> </p> <p data-bind="visible: cities().length > 0"> <b>Select City :</b> <select data-bind="options: cities, optionsText: 'CityName', optionsValue: 'CityId', optionsCaption: 'Choose...'"></select> </p> <script type='text/javascript'> function CascadingDDLViewModel() { this.states = ko.observableArray([]); this.cities = ko.observableArray([]); this.selectedState = ko.observable(); } var objVM = new CascadingDDLViewModel(); objVM.selectedResource.subscribe(function (stateId) { $.getJSON("/Home/GetCities/" + stateId, null, function (data) { objVM.cities(data); }); }); ko.applyBindings(objVM); function FetchStates() { var countryCode = $("#ddlCountry").val(); $.getJSON("/Home/GetStates/" + countryCode, null, function (data) { objVM.states(data); objVM.cities.removeAll(); }); </script>