如何使用动态数据源使模型保持最新？

Question

如果我从 API 获取 Country 和 State 数据，在更新 kendo 组合框的数据源后，我似乎无法保持与模型的链接。

假设有一种表格将在国际上使用。所以我们想提供一个 Country Combobox 和一个 State Combobox，然后按所选国家/地区过滤状态。如果用户选择一个国家，那么状态组合框就会更新。这很棒！但是，当我去提交的时候，模型中的stateid字段为空。

我已尝试手动更改数据源，但无法找到有关此类问题的更多信息。如果有人能指出我正确的方向，那将不胜感激。

数据模型：

class ExampleModel {
  [display(name='StateId')]
  int? stateId;
  [display(name='CountryId')]
  int? countryId
}

剃须刀：

<div id='country-wrapper'>
  @(Html.Kendo().ComboBoxFor(m => m.CountryId)
      .Filter("contains")
      .Placeholder("-- Select Country --")                                                                                              
      .DataTextField("Text")                                                                                              
      .DataValueField("Value")
      .BindTo(new SelectList(stateList, "CountryId", "CountryName", 1))
      .Suggest(true)
       .HtmlAttributes(new { @id = "CountryId",  onchange = " CountryChangeEvent(this); ComboChangeEvent(this);" 
  }));
</div>
<div id='state-wrapper'>
  @(Html.Kendo().ComboBoxFor(m => m.StateId)
      .Filter("contains")
      .Placeholder("-- Select State --")                                                                                              
      .DataTextField("Text")                                                                                              
      .DataValueField("Value")
      .BindTo(new SelectList(stateList, "StateId", "StateName"))
      .Suggest(true)
       .HtmlAttributes(new { @id = "StateId",  onchange = "ComboChangeEvent(this)" 
  }));
</div>

js：

  function CountryChangeEvent(elem) {
    var chosenId = $("#CountryId").data('kendoComboBox').value();

        if (!chosenId) return;

        $("#ProfileStateId").kendoComboBox({
            dataTextField: "Text",
            dataValueField: "Value",
            dataSource: {
                transport: {
                    read: {
                        // call this method in the controller and reset datasource
                        cache: false,
                        serverFiltering: true,
                        async: false,
                        dataType: "json",
                        url: '@Url.Action("GetStatesByCountryJson", "Home")?countryId=' + chosenId,
                    }
                }
            },
            filter: "contains",
            suggest: true
        });
        var combobox = $("#StateId").data('kendoComboBox');
        combobox.select(function (dataItem) {
            // clear the statecombobox
            return dataItem.Value === '';
        });
  }

预期

我希望在调用 CountryChangeEvent 函数时状态列表会发生变化。此外，当您提交表单时，StateId 值将存储在模型中。

实际

实际上它确实在视觉上改变了状态组合框。你可以看到所有的状态和过滤器。但是提交调试的时候可以看到模型中的StateId为null。

当前的解决方法/破解

我发现，如果我一开始就下载所有州（适用于所有国家），那么它会按预期工作。

Answer 1

我发现了另一种解决方法/破解方法，它比在加载时下载所有状态要好得多。我将控件从组合框更改为下拉列表，瞧​​，它现在可以工作了。

不知道为什么这不起作用，但我会关闭它，因为我的问题已经解决了，而且组合框对于这种问题来说真的是过分了。

如果您遇到此问题希望找到解决方案，请查看cascading dropdownlist 由 CarstenFranke 提供

应该更适合你。