캐스 케이 딩은 4

Question

나는이 자습서 다음입니다 KNOCKOUT.JS 및 ASP.NET MVC와 드롭 다운 :

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

이 프로젝트는 마법처럼 작품을 제공했다. 그것은 여기에서 다운로드 할 수 있습니다 : http://files.dotnetexpertguide.com/download.aspx?key=cascadingddlknockoutjs

질문은 - 나는 주에 또 하나 개의 도시를 선택 상자가 나타납니다와 컨텐츠 변경 따른 선택, 그래서보기를 변경하는 방법을 알아낼 수 없습니다?

State Id에서 도시를 가져 오는 컨트롤러에서 도시와 동작에 대한 하나 이상의 모델을 작성하는 것은 꽤 간단하지만보기 및 JS 코드를 변경하는 방법을 이해하지 못합니다.

그래서보기에 대한 코드는 :

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