Kendo MVC网格可编辑级联下拉列表显示'undefined'

Question

我正在尝试跟着Telerik演示一起进行下拉菜单，但是到目前为止，我还没有运气。这是我要使用的演示：Telerik Demo - Cascading DropDownList我的问题是，当我基于ModelId过滤联系人时（我的名字与此不同），我得到的下拉列表只是说'undefined'

这是我的网格代码（重要的部分）

@(Html.Kendo().Grid<MyViewModel>()
    .Name("grid")
    .AutoBind(false)
    .HtmlAttributes(new { @class = "grid-clickable-edit" })
    .Columns(columns =>
    {
        columns.Command(command =>
        {
            command.Edit().IconClass("fas fa-pencil").UpdateIconClass("fas fa-check").CancelIconClass("fas fa-ban");
            command.Destroy().IconClass("fas fa-trash");
        })
            .ClientHeaderTemplate(Html.GridAddButton())
            .Width(180);
        columns.Bound(p => p.ModelId)
            .EditorTemplateName("GridDropdownEditor")
            .EditorViewData(new { data = ViewBag.ModelList })
            .ClientTemplate("#:ModelName#");
        columns.Bound(p => p.ContactId)
            .EditorTemplateName("ContactCascadingDropdown")
            .ClientTemplate("#:ContactName#");
    })
    .Pageable(pg => pg.Numeric(false).PreviousNext(false))
    .Sortable()
    .Scrollable(scroll => scroll.Virtual(true))
    .Filterable(x => x.Enabled(false))
    .Editable(editable => editable.Mode(GridEditMode.InLine))
    .DataSource(dataSource => dataSource
        .Ajax()
        .Batch(true)
        .ServerOperation(true)
        .Model(model => { model.Id(m => m.MyId); })
        .Read(...)
        .Create(...)
        .Update(...)
        .Destroy(...)
    ))

<script>
    function filterContacts() {
        return {
            modelId: $("#ModelId").val()
        };
    }
</script>

这是我的ContactCascadingDropdown编辑器模板-

@model object

@(Html.Kendo().DropDownListFor(m => m)
    .DataTextField("ContactName")
    .DataValueField("ContactId")
    .DataSource(source =>
    {
        source.Read(read =>
        {
            read.Action("GetCascadingContacts", "ControllerName")
                .Data("filterContacts");
        })
            .ServerFiltering(true);
    })
    .Enable(false)
    .AutoBind(false)
    .CascadeFrom("ModelId"))

GetCascadingContacts-

中的MyController方法

public JsonResult GetCascadingContacts(int? modelId)
{
      var contacts = _contact.GetListQueryable();

      if (contacts != null)
      {
            contacts = contacts.Where(c => c.ModelId == modelId);
      }

      return Json(contacts.Select(c => new {ContactName = c.FirstName + " " + c.LastName, c.ContactId}));
}

我相信问题可能出在编辑器模板上，但是我还是没有一个主意。

我尝试过的检查了Web浏览器控制台中的错误，未找到在Visual Studio中检查错误输出，未找到我还确保modelId值实际上已从我的filterContacts方法传递到了我的控制器。还检查联系人查询方法是否基于modelId提取了实际的联系人。

UPDATE似乎我在下拉列表中得到的行数与我从查询中获得的联系人数量相关。

UPDATE如果我添加了演示所要求的JsonRequestBehavior.AllowGet以使我的退货声明return Json(contacts.Select(c => new {ContactName = c.FirstName + " " + c.LastName, c.ContactId}), JsonRequestBehavior.AllowGet);，则出现错误Property 'JsonResult.SerializerSettings' must be an instance of type 'Newtonsoft.Json.JsonSerializerSettings'.

Answer 1

当我在我的项目中尝试类似的操作时，此结构对我有用：

更改：

columns.Bound(p => p.ContactId)
            .EditorTemplateName("ContactCascadingDropdown")
            .ClientTemplate("#:ContactName#");

至：

columns.ForeignKey(p => p.ContactId, Model.Contacts, "ContactId", "ContactName")
             .EditorTemplateName("ContactCascadingDropdown")
             .Title("Contact")

上面发生了什么？

• 我们使用模板的外键
• 我们定义列的值为p -> p.ContactId
• 我们使用列表的ID和值传递联系信息列表（在这种情况下为ContactId和ContactName）

我的EditorTemplate看起来像这样：

@model int

@(Html.Kendo().DropDownListFor(m => m)
    .AutoBind(true)
    .DataTextField("ContactName")
    .DataValueField("ContactId")
    .DataSource(source =>
    {
        source.Read(read => read.Action("GetCascadingContacts", "ControllerName")
            .Data("filterContacts")).ServerFiltering(true);
    })
    .CascadeFrom("ModelId")

    // If this value could be a nullable you will also need the following
    .ValuePrimitive(true)
)

您的控制器方法的返回应为：

return Json(contacts.Select(c => new {ContactName = c.FirstName + " " + c.LastName, c.ContactId}), JsonRequestBehavior.Allowget);