6

私はこのチュートリアルに従っています：

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

このプロジェクトは魅力的な作品を提供しました。ここからダウンロードできます: http://files.dotnetexpertguide.com/download.aspx?key=cascadingddlknockoutjs

質問は、ビューを変更する方法がわからないので、もう 1 つの都市選択ボックスが表示され、選択した州に応じてその内容が変化するということです。

State Id で都市をフェッチするためにコントローラーで都市とアクションのモデルをもう 1 つ作成するのは非常に簡単ですが、View と 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>

どんな助けでも大歓迎です。

4

2 に答える 2

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="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>
于 2013-10-02T21:07:19.933 に答える