Question

我正在尝试进行一系列下拉菜单，其中各国的变化将获得状态并绑定到显示州的另一个下拉列表。我查看了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感到困惑。

Answer 1

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

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

更多信息：

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

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

        });

用Json对象级联Kendo Dropdownlist

2 个答案: