व्यापक KNOCKOUT.JS और ASP.NET MVC के साथ ड्रॉप डाउन 4

Question

मैं इस ट्यूटोरियल अनुसरण कर रही हूं:

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

परियोजना एक आकर्षण की तरह काम करता है प्रदान की है। यह यहाँ से डाउनलोड किया जा सकता है: http://files.dotnetexpertguide.com/download.aspx?key=cascadingddlknockoutjs

सवाल है - मैं समझ नहीं देखें कैसे बदली जाए, तो एक और शहर चुनें बॉक्स प्रकट होता है और राज्य के लिए अपनी सामग्री में परिवर्तन के अनुसार चयन किया?

शहर के लिए एक और मॉडल लिखना और राज्य आईडी द्वारा शहरों को लाने के लिए नियंत्रक में कार्रवाई बहुत सीधी है, लेकिन मुझे समझ में नहीं आता कि दृश्य और जेएस कोड कैसे बदलना है, यह काम करता है।

तो दृश्य के लिए कोड:

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

किसी भी मदद की बहुत सराहना की है।

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>