Asp.net mvc 4 带有KNOCKOUT.JS的级联下拉列表&；ASP.NETMVC4

我将学习本教程：

这个项目提供了一个迷人的作品。 可从以下网址下载：

问题是-我不知道如何更改视图，以便显示一个以上的城市选择框，并且其内容根据所选状态进行更改

在controller中为城市和操作编写一个模型，以便通过状态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>

选择国家：@Html.DropDownList（“ddlCountry”，ViewBag.Country作为选择列表，“选择…”，新建{onchange=“FetchStates（）；”）


选择状态：

函数CascadingDDLViewModel（）{
this.states=ko.observearray（[]）；
}
var objVM=new CascadingDDLViewModel（）；
ko.应用绑定（objVM）；
函数FetchStates（）{
var countryCode=$（“#ddlCountry”）.val（）；
$.getJSON（“/Home/GetStates/”+countryCode，null，函数（数据）{
状态（数据）；
});
}

非常感谢您的帮助。

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

选择国家：@Html.DropDownList（“ddlCountry”，ViewBag.Country作为选择列表，“选择…”，新建{onchange=“FetchStates（）；”）


选择状态：


选择城市：

函数CascadingDDLViewModel（）{
this.states=ko.observearray（[]）；
this.cities=ko.observearray（[]）；
}
var objVM=new CascadingDDLViewModel（）；
ko.应用绑定（objVM）；
函数FetchStates（）{
var countryCode=$（“#ddlCountry”）.val（）；
$.getJSON（“/Home/GetStates/”+countryCode，null，函数（数据）{
状态（数据）；
});
函数FetchCities（）{
var stateId=$（“#ddlStates”）.val（）；
$.getJSON（“/Home/GetCities/”+stateId，null，函数（数据）{
城市（数据）；
});
}

选择国家：@Html.DropDownList（“ddlCountry”，ViewBag.Country作为选择列表，“选择…”，新建{onchange=“FetchStates（）；”）


选择状态：


选择城市：

函数CascadingDDLViewModel（）{
this.states=ko.observearray（[]）；
this.cities=ko.observearray（[]）；
this.selectedState=ko.observable（）；
}
var objVM=new CascadingDDLViewModel（）；
objVM.selectedResource.subscribe（函数（stateId）{
$.getJSON（“/Home/GetCities/”+stateId，null，函数（数据）{
城市（数据）；
});
});
ko.应用绑定（objVM）；
函数FetchStates（）{
var countryCode=$（“#ddlCountry”）.val（）；
$.getJSON（“/Home/GetStates/”+countryCode，null，函数（数据）{
状态（数据）；
objVM.cities.removeAll（）；
});

请提供一些解释，使其成为一个很好的答案。他使用了knockoutjs api subscribe，因此这是一个很好的解决方案

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