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

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

为城市再写一个模型并在控制器中按州 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>