Question

我在更新详细信息屏幕上，我有一个国家/地区下拉列表。我想根据所选国家/地区预先填写州下拉列表。在初始页面加载中，我确实拥有所选的Country，Country Collection和Selected State，我只需要使用AJAX获取State Collection。

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请求获取状态列表时，Selected State值将被重置，列表中的第一个值将成为默认的选定值。我很困惑，为什么KO在我不更改时会更新我选择的State值？

但是如果我在AJAX Success回调中再次设置Selected State就可以了。

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>

级联下拉预填充MVC

1 个答案: