jquery - Kendo Dropdownlist 与 json 对象的级联

Question

我正在尝试执行一系列下拉菜单，其中国家/地区的更改将获取州并绑定(bind)到另一个显示州的下拉列表。 我检查了 kendoui 网站上提供的文档，其中记录了级联方式 使用它的事件(CascadeFrom等)，但我不想这样做。 因为它是两次数据库访问。首先加载页面后，它绑定(bind)国家(调用数据库并获取国家)，然后 国家变更后，它对各州具有约束力。

但我采用了不同的方式。我绑定(bind)国家下拉列表 在页面加载时，所以我保存了一次访问数据库以加载 页面加载后的国家/地区，但我想知道是否可以调用更改 按照以下方式选择国家下拉列表，然后通过 json 对象绑定(bind)国家。

这是在 View 页面中绑定(bind)成功的国家/地区下拉列表

 @(Html.Kendo().DropDownListFor(model => model.Country)

                                      .DataTextField("Text")

                                      .DataValueField("Value")

                                      .BindTo(Model.CountriesTemp)

                                      )

下面是国家列表，它将根据国家下拉列表的变化进行记录。

  @(Html.Kendo().DropDownListFor(model => model.State)
                                      .DataTextField("Text")
                                      .DataValueField("Value")
                                      .BindTo(Model.States))

对于通过页面加载绑定(bind)国家/地区和州，我已在 Controller 中完成此操作。

public class HomeController : Controller
    {
  public ActionResult Registration()
        {
            RegistrationModel Model = new RegistrationModel();

            Model.CountriesTemp = new SelectList(ObjService.GetCountries(), "CountryID", "Country_Name");
            Model.States = new SelectList(ObjService.GetStates(), "Id", "StateName");
    return View(Model);
        }

            public JsonResult GetStatesForCountry(string CountryId)
        {
            RegistrationService ObjService = new RegistrationService();
            var StatesList =ObjService.GetStatesForCountries(Convert.ToInt32(CountryId));
            return Json(new { JsonStates = StatesList });
        }  
}        

这是我的模型::

public SelectList CountriesTemp { get; set; }
 public SelectList States { get; set; }

我已经成功绑定(bind)了两个下拉菜单，现在我想进行级联，我在 View 页面中编写了下面的脚本:

$(document).ready(function () {
    $("#Country").change(function () {
        var val = $("#Country").val();
        $.post("/Home/GetStatesForCountry", { CountryId: val }, function (Response) {
            var States = $("#State").data("kendoDropDownList");

        });
    });
});

上面的 Controller 中已经定义了函数“GetStatesForCountry”，但我对如何使用返回的 json 对象并绑定(bind)显示“states”的 kendodropdownlist 感到困惑。

Answer 1

您需要获取状态下拉列表，然后设置从中返回的数据源，如下所示:

var dropdownlist = $("#State").data("kendoDropDownList");
dropdownlist.setDataSource(Response.JsonStates);

更多信息:

http://docs.telerik.com/kendo-ui/api/javascript/ui/dropdownlist#methods-setDataSource