如何动态绑定kendo mvc ui下拉列表答案

【问题标题】：How to bind kendo mvc ui dropdownlist dynamically如何动态绑定kendo mvc ui下拉列表
【发布时间】：2012-11-01 10:22:01
【问题描述】：

我正在使用 Kendo UI mvc 开发 asp.net mvc。我有两个剑道下拉列表。一个用于诊所列表，另一个用于选定诊所的患者列表。但是使用级联下拉列表在诊所和患者之间没有直接关系。为此，我在下拉列表更改事件中使用了 ajax 调用并获取患者列表。这是我列出诊所的第一个下拉列表

 @(
  Html.Kendo().DropDownList()
  .Name("ddlClinics")
  .Events(e=>e.Change("ChangeClinic"))
  .BindTo(new SelectList((List<Account.Entities.Clinic>)ViewBag.lstClinic,
 "ClinicID", "ClinicName")))

这是我的第二个列表患者下拉列表

@(
 Html.Kendo().DropDownList()
.Name("ddlPatients")
.BindTo(new SelectList((List<Patient>)ViewBag.Patients, 
"PatId", "PatName"))))

我想在第一个下拉列表更改时将患者列表动态绑定到第二个下拉列表，

function ChangeClinic()
{
$.ajax({
url: '/Messages/GetPatient',
 type: 'Post',
 data: { email: '@User.Identity.Name' },
 cache: false,
 success: function (result) {
 var ddlPatients = $('#ddlPatients').data('kendoDropDownList');
 var main = [];
 $.each(result, function (k, v) {
 main.push({ "PatId": v.PatId, "PatName": v.PatName });
  });
  ddlPatients.dataTextField = "PatName";
  ddlPatients.dataValueField = "PatId";
  ddlPatients.dataSource.data(main);
  ddlPatients.reload();
 }
 });
}

我可以将列表绑定到下拉列表，但所有项目都显示为 'undefined'。所以请指导我。

【问题讨论】：

标签： asp.net-mvc kendo-ui

【解决方案1】：

据我所知，诊所和患者之间存在关系，因此您应该能够使用包装器中提供的 CascadeFrom("DropDownList1")。我们以类似的方式使用级联下拉列表来处理学区和学校之间的关系：

@(Html.Kendo().DropDownList()
            .Name("District")
            .HtmlAttributes(new { style = "width:300px;" })
            .BindTo(ViewBag.districts)
            .DataTextField("DistrictName")
            .DataValueField("DistrictID")
            .OptionLabel("Select District")
)
@(Html.Kendo().DropDownList()
            .Name("School")
            .HtmlAttributes(new { style = "width:300px;" })
            .CascadeFrom("District")
            .BindTo(ViewBag.schools)
            .DataTextField("SchoolName")
            .DataValueField("SchoolID")
            .OptionLabel("Select School")
)

【讨论】：

【解决方案2】：

如果你想在第一个 DropDown 值的基础上填充第二个 DropDown。 Telerik 提供，

.CascadeTo("DropDownList2")

有关详细信息，请参阅以下链接。

Cascading of Dropdown in Telerik dropdownlist

【讨论】：

【解决方案3】：

不要创建对数据源使用无用的数组：

success: function (result) {
 var ddlPatients = $('#ddlPatients').data('kendoDropDownList');
 var main = [];
 $.each(result, function (k, v) {
 main.push({ "text": v.PatId, "value": v.PatName });
  });

  ddlPatients.dataSource.data(main);
 }
 });

【讨论】：

【解决方案4】：

如果你不使用

.DataSource(source =>
                        {
                            source.Read(read =>
                            {
                                read.Action        ("FunctionName", "ControllerName").Data("filterDropdown1");
                            }).ServerFiltering(true);
                        })
.CascadeFrom("Dropdown1")

第二个下拉列表定义中的属性，并且您正在使用上面提到的定义。即：-

@(
 Html.Kendo().DropDownList()
.Name("ddlPatients")
.BindTo(new SelectList((List<Patient>)ViewBag.Patients,"PatId", "PatName"))
)

那么就可以直接在ajax post的success函数中将数据绑定到第二个下拉列表了。

    function ChangeClinic()
        {
        $.ajax({
        url: '/Messages/GetPatient',
         type: 'Post',
         data: { email: '@User.Identity.Name' },
         cache: false,
         success: function (result) {
         $('#ddlPatients').data('kendoDropDownList').dataSource.data(result);
             //ddlPatients.reload();

  }
         });
        }

@Note:- 1) 结果值应包含基于GetPatient控制器中传递给函数“Messages”的参数email的具有“PatId”和“PatName”属性的新患者列表，不需要对于 ddlpatients.reload()，实际上不支持 .reload()，它会中断执行，所以不要使用 .reload()。

【讨论】：