Kendo Dropdownlist 与 json 对象的级联答案

【问题标题】：Cascading of Kendo Dropdownlist with json objectKendo Dropdownlist 与 json 对象的级联
【发布时间】：2014-09-22 09:18:10
【问题描述】：

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

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

这是在视图页面中成功绑定的国家/地区下拉列表

 @(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))

对于有页面加载的绑定国家和州，我已经在控制器中完成了这项工作。

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; }

我已经成功绑定了两个下拉列表，现在我想做级联，我在我的视图页面中编写了下面的脚本：

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

        });
    });
});

并且函数“GetStatesForCountry”已经在上面的控制器中定义，但我对如何使用返回的 json 对象并绑定显示“状态”的 kendodropdownlist 感到困惑。

【问题讨论】：

标签： jquery asp.net-mvc asp.net-mvc-4 kendo-ui kendo-asp.net-mvc

【解决方案1】：

您需要获取状态下拉列表然后设置从它返回的数据源如下：

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

【讨论】：

嗨。它已开始绑定国家/地区更改后出现的新数据（状态），但不幸的是它在所有选项中都显示为未定义。你对此也有什么想法吗？
我可以通过执行以下代码来做到这一点。 $.post("/Home/GetStatesForCountry", { CountryId: val }, function (Response) { //var States = $("#State").data("kendoDropDownList"); //States.setDataSource(Response. JsonStates); $("#State").kendoDropDownList({ dataTextField: "StateName", dataValueField: "Id", dataSource: Response.JsonStates }); });
@sweetie 不错，很抱歉现在才看到你的 cmets。 :)

【解决方案2】：

我可以通过使用下面的代码来做到这一点。以上回答作为参考。

$.post("/Home/GetStatesForCountry", { CountryId: val }, function (Response) {
            //var States = $("#State").data("kendoDropDownList");
            //States.setDataSource(Response.JsonStates);
            $("#State").kendoDropDownList({
                dataTextField: "StateName",
                dataValueField: "Id",
                dataSource: Response.JsonStates
            });

        });

【讨论】：