级联的剑道下拉列表与JSON对象

问题描述：

我想做一个下拉的级联，其中国家的变化将获得状态并绑定到显示状态的另一个下拉列表。我已经检查了kendoui网站上的文档，他们在文档中记录了使用它的Events（CascadeFrom等）级联的方式，但我不想这样做。因为它是数据库的双重旅程。首先加载页面后，绑定国家（呼叫数据库和获取国家），然后它绑定国家更改后的状态。级联的剑道下拉列表与JSON对象

但我以不同的方式完成。我结合国家DROPDOWNLIST 在页面加载所以我救了一个行程页面加载后，即到数据库的用于装载国家，但我不知道如果我可以叫国家的变化以下列方式下拉列表，然后通过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对象和绑定显示“states”的kendodropdownlist感到困惑。

答

你需要得到国家下拉列表，然后设置为从它返回的数据源，如下所示：

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

进一步信息：

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

嗨。它已经开始约束国家变化后的新数据（状态），但不幸的是，它在所有选项中都显示为未定义。你也有这个想法吗？ – Sweetie 2014-09-23 04:51:26

我可以通过执行下面的代码来做到这一点。（国家代码：val），函数（响应）{var States = $（“＃State”）。data（“kendoDropDownList”）; //States.setDataSource（“/ Home/GetStatesForCountry” （Response.JsonStates）; $（“＃State”）。kendoDropDownList（{dataTextField：“StateName”， dataValueField：“Id”， dataSource：Response。JsonStates }）; }）; – Sweetie 2014-09-23 05:49:59

@sweetie不错的一个，抱歉刚刚看到你的意见。 :) – hutchonoid 2014-09-23 06:04:31

答

我能做到这通过使用下面的代码。以上答案仅供参考。

$.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对象

相关推荐