kaskadowych rozwijanego z KNOCKOUT.JS & ASP.NET MVC 4

Question

śledzę tego poradnika:

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

Projekt przewidywał prace podobny pewien urok. To można pobrać stąd: http://files.dotnetexpertguide.com/download.aspx?key=cascadingddlknockoutjs

Pytanie brzmi - nie mogę dowiedzieć się, jak zmienić widok, tak że pojawia się jeszcze jedna Miasto Wybierz pudełko i jego zawartość zmienia się w zależności od państwa wybrany?

Zapisanie jeszcze jednego modelu miasta i akcji w kontrolerze w celu pobrania miast według stanu Jest całkiem proste, ale nie rozumiem, jak zmienić widok i kod JS, aby działał.

Więc kod na Widok:

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

Każda pomoc jest bardzo ceniona.

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>