我正在关注本教程：
http://www.dotnetexpertguide.com/2012/06/cascading-dropdown-knockoutjs-aspnet.html
该项目提供的工作就像一个魅力.
它可以从这里下载：
http://files.dotnetexpertguide.com/download.aspx?key=cascadingddlknockoutjs
问题是 – 我无法弄清楚如何更改视图,以便再显示一个城市选择框,其内容会根据所选的状态而变化？
为城市编写另一个模型,并在控制器中按状态ID获取城市的操作非常简单,但我不明白如何更改View和JS代码以使其有效.
那么View的代码：
<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>
非常感谢任何帮助.
解决方法
<p>
<b>Select Country :</b> @Html.DropDownList("ddlCountry",new { onchange = "FetchStates();" })
</p>
<p data-bind="visible: states().length > 0">
<b>Select State :</b> <select id="ddlStates" data-bind="options: states,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,function (data) {
objVM.states(data);
});
function FetchCities() {
var stateId = $("#ddlStates").val();
$.getJSON("/Home/GetCities/" + stateId,function (data) {
objVM.cities(data);
});
}
</script>
