級聯下拉預填充敲除MVC

Question

我在“更新詳細信息”屏幕上，並且具有“國家/地區”和“國家/地區”下拉列表。我想根據所選國家/地區預先填充“國家/地區”下拉列表。 在初始頁面加載中，我確實具有選定的“國家/地區，國家/地區集合”和“選定的州/地區”，我需要做的就是使用AJAX來獲取州/地區集合。

Country List: <select id="CountryDropdownList" data-bind="options: viewModel.CountryCollection,optionsText:'CountryName',optionsValue:'CountryName',value:viewModel.SelectedCountry"></select>
State List: <select id="StateDropdownList" data-bind="options: viewModel.StateCollection,optionsText:'StateName',optionsValue:'StateName',value:viewModel.SelectedState"></select>



 <script>
        var viewModel = ko.mapping.fromJS(@Html.Raw(Newtonsoft.Json.JsonConvert.SerializeObject(Model)));
        console.log(viewModel.SelectedState()); //State3 the initial value

        viewModel.SelectedCountry.subscribe(function (newSelectedCountry) {
            alert(newSelectedCountry);
            console.log(viewModel.SelectedState()); //undefined why?
            $.ajax({
                url: 'Home/GetStateList?Country=' + newSelectedCountry,
                success: function (data) {
                    viewModel.StateCollection(ko.mapping.fromJS(data)());
                    console.log(viewModel.SelectedState());  //state0 why?

                }
            })
        });


        ko.applyBindings(viewModel);
        $(function () {
            viewModel.SelectedCountry.valueHasMutated();
        })

    </script>

但是，當我嘗試通過AJAX請求獲取狀態列表時，“選定狀態”值將重置，並且列表中的第一個值成為默認的選定值。 我很困惑，為什么當我完全不更改選定的State值時，KO會更新嗎？

但是，如果我在AJAX成功回調中再次設置“選定狀態”，則可以正常工作

viewModel.SelectedCountry.subscribe(function (newSelectedCountry) {
            alert(newSelectedCountry);

            $.ajax({
                url: 'Home/GetStateList?Country=' + newSelectedCountry,
                success: function (data) {
                    viewModel.StateCollection(ko.mapping.fromJS(data.StateCollection)());
                    viewModel.SelectedState(data.SelectedState);

                }
            })
        });

我正在尋找這種奇怪行為的原因。

Answer 1

我已經嘗試按照您的指示簡化代碼，現在我認為這可能有助於您指出問題。

<script>
        var viewModel = ko.mapping.fromJS(@Html.Raw(Newtonsoft.Json.JsonConvert.SerializeObject(Model)));
        console.log(viewModel.SelectedState()); // o/p state3

        $.ajax({
            url: 'Home/GetStateList?Country=' + viewModel.SelectedCountry(),
            success: function (data) {
                viewModel.StateCollection(ko.mapping.fromJS(data)());
                console.log(viewModel.SelectedState()); // o/p state0
            }
        })
        ko.applyBindings(viewModel);

    </script>