asp.net-mvc-4 - 使用 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

问题是 - 我不知道如何更改 View ，以便再出现一个城市选择框，其内容根据所选的州而变化？

在 Controller 中为城市和 Action 编写另一个模型以通过 State 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>

非常感谢任何帮助。

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>