Kendo MVC 如何在初始 SelectList 之后使用 AJAX 重新填充下拉列表？答案

【问题标题】：Kendo MVC how do I re-populate a dropdownlist using AJAX after initial SelectList?Kendo MVC 如何在初始 SelectList 之后使用 AJAX 重新填充下拉列表？
【发布时间】：2014-03-01 01:20:30
【问题描述】：

我有一个 Kendo 下拉列表控件，我在页面初始加载时通过 SelectList 填充该控件。

@(Html.Kendo().DropDownListFor(m => m.AssociatedWithType)
    .Events(x => x.Select("CR.TodoAddEditDialog.AssociatedWithSelected"))
    .Value(ViewBag.AssociatedWithTypesId)
    .BindTo(ViewBag.AssociatedWithTypesSelectList)
)

@(Html.Kendo().DropDownListFor(m => m.AssociatedWithId)
   .BindTo(ViewBag.AssociatedWithIdsSelectList)
)

这一切都很好，但是当第一个下拉列表更改值时，我需要重新加载数据。我有以下 javascript：

AssociatedWithSelected: function(e) {
    var dataItem = this.dataItem(e.item.index());

    var associatedWithIdsDropDown = $("#todoAddEditDialogForm #AssociatedWithId").data("kendoDropDownList"); 
    var url = settings.getAssociatedWithIdsUrl + "?associatedWithType=" + dataItem.Text;
    associatedWithIdsDropDown.dataSource.read({
        url: url
    });
}

但是，什么都没有被调用。

我怀疑这是因为我从未在下拉列表中定义数据源，但我不知道如何在 MVC 部分定义一个而不使用它来初始填充列表。

有什么想法吗？

【问题讨论】：

stackoverflow.com/questions/18656164/…
您的选择事件正在寻找一个名为 CR.TodoAddEditDialoge.AssociatedWithSelected 的函数，而不是您的 JS 函数只是 AssociatedWithSelected
@CSharper，是的，为简洁起见，我没有包含命名空间代码。

标签： ajax asp.net-mvc-4 kendo-ui dropdownlistfor

【解决方案1】：

不要使用 viewbag 绑定模型。以下是您如何从服务器获取它的方法。

 @(Html.Kendo().DropDownListFor(x => x.FromOpportunity)
          .Name("OpportunityDDL")                 
          .DataTextField("OpportunityName")              
          .DataValueField("OpportunityId")                         
          .DataSource(source => {
              source.Read(read =>
               {
                   read.Action("GetOpportunityListByAccount", "CrmIntegration")
                      .Data("OnAdditionalData");
               })
                . ServerFiltering(true);
          })             
          .HtmlAttributes( new { style = "margin-left:13px; width: 275px;" })

控制器这是一种伪编码，但基本上返回一个 Json 列表

List<OpportunityViewModel> oppVMList = new List<OpportunityViewModel>();
        var oppList = new OrderManager().GetOpportunitiesByAccount(Id); 

        foreach (var op in oppList)
        {
            OpportunityViewModel opvm = new OpportunityViewModel();
            opvm.OpportunityId = op.OpportunityId;
            opvm.OpportunityName = op.OpportunityName;

            oppVMList.Add(opvm);
        }

    return Json(oppVMList , JsonRequestBehavior.AllowGet);

并刷新 ddl

 var opportunity = $("#OpportunityDDL").data("kendoDropDownList");
        opportunity.dataSource.read({ Id: advertiserId });

您的参数名称必须是 Id

任何问题都可以问:)

这是我的OnAdditionalData的JS函数，基本上是在读取控制器方法GetOpportunityListByAccount之前去这个函数获取参数

function OnAdditionalData() {

    var dataItem = $("#Advertisers").data("kendoMultiSelect").value();

    return {
        //call would not work when expecting a Guid, 
        //now it expects a string            
        Id: "" + dataItem
    };
}

【讨论】：

当然有办法做我想做的事。在表单加载后执行一堆 AJAX 调用来填充下拉列表看起来很糟糕！
嗯，它是一个级联下拉列表，因此根据多选字段的值，它将重新填充下拉列表，因此需要多个 ajax 调用。您甚至不需要读取中的 .Data，只需调用 read.Action
我有点困惑，你到底想做什么？
这是我的问题。我有几个下拉列表需要在这个特定的表单上填充。如果我对下拉列表进行动态绑定，以便它们都执行 ajax 调用来填充，它看起来很糟糕，并且功能很糟糕，因为页面准备好需要很长时间。所以，相反，我在我的控制器中获取所有数据，并在 HTML 出现之前填充下拉列表。这一切都很好，但是，有一种情况，如果用户更改 1 个下拉列表，我需要通过 ajax 重新加载另一个下拉列表的值。
只需像我上面所说的那样在 DDL 的数据源上调用 read。如果它不期望一个参数，您不必使用参数调用 read。就说opportunity.dataSource.read();

【解决方案2】：

我最终这样做了，这似乎有效。使用剑道绑定可能有更好的方法，但我仍然没有弄清楚如何。

AssociatedWithSelected: function(e) {
    var dataItem = this.dataItem(e.item.index());

    var associatedWithIdsDropDown = $("#todoAddEditDialogForm #AssociatedWithId").data("kendoDropDownList");

    var url = settings.getAssociatedWithIdsUrl + "?associationType=" + dataItem.Text;
    $.ajax({
        url: url
    })
    .done(function (response) {
        associatedWithIdsDropDown.dataSource.data(response);
    });
}

【讨论】：

【解决方案3】：

我假设您正在寻找如何创建级联 DropDownList。我建议您使用 here 所涵盖的方法。

【讨论】：

不，我不想级联。我只希望下拉列表的初始填充来自模型，并且下拉列表的任何刷新都来自服务器。