如何在 MVC 中使用 ClientTemplate 和 EditorTemplateName 在 Kendo UI 网格中创建新行？

Question

我正在尝试为联系人列表制作一个 Kendo 网格，具有以下要求：

1. 应该有一个用于创建新联系人的工具栏按钮
2. 应该有一个操作列，带有一个编辑和删除按钮
3. 应该有一个名为 Contact Groups 的列：
   • 在我的视图模型中，这被定义为一个字符串列表
   • 当网格处于显示模式时，这应该显示为逗号分隔的字符串
   • 当网格处于编辑模式时，这应该是一个 Kendo MultiSelect 元素，允许用户选择一个或多个可用选项的硬编码列表

为此，这是我到目前为止创建的视图：

@using MyProject.Contacts.Models;
@using Kendo.Mvc.UI;

@{
    ViewBag.Title = "Contacts";
}

<div id="contactsContainer" class="">
    @(Html.Kendo().Grid<ContactsViewModel>()
          .Name("ContactsGrid")
          .Columns(columns =>
          {
              columns.Bound(p => p.ContactName).Title("Contact Name").Width(200);
              columns.Bound(p => p.ContactGroups).ClientTemplate("#= displayContactGroups(ContactGroups)#").EditorTemplateName("ContactGroupsEditor").Title("ContactGroups").Width(200);
              columns.Command(command =>
              {
                  command.Edit().IconClass("k-icon k-i-edit");
                  command.Destroy().IconClass("k-icon k-i-delete");
              }
              ).Title("Actions").Width(200);
          })
          .NoRecords(n => n.Template("No Contacts to display"))
          .ToolBar(tools =>
          {
              tools.Create().Text("Create New Contact");
          })
          .DataSource(dataSource => dataSource
                .Ajax()
                .PageSize(10)
                .Model(model =>
                {
                    model.Id(m => m.kendoId);
                }
                )
                .Create(create => create.Action("CreateContact", "Contacts"))
                .Read(read => read.Action("GetContacts", "Contacts"))
                .Update(update => update.Action("UpdateContact", "Contacts"))
                .Destroy(destroy => destroy.Action("DeleteContact", "Contacts"))

          )

      )

</div>

<script>
    function displayContactGroups(contactGroups) {
        if (contactGroups == null) {
            return "";
        }
        return contactGroups.join(", ");
    }
</script>

这是我为 ContactGroupsEditor 定义的部分视图：

@model List<string>

@(Html.Kendo().MultiSelect()
    .Name("ContactGroups")
    .DataValueField("Text")
    .DataTextField("Text")
    .BindTo(new List<SelectListItem> 
    {
        new SelectListItem { Text = "GalacticEmpire"},
        new SelectListItem { Text = "RebelAlliance"}
    })
    .Value(Model)
)

这非常接近我想要的工作方式。当我加载到页面中时，网格以我想要的方式呈现，删除按钮按预期工作，编辑按钮正确地将联系人组列切换到 MultiSelect 元素。我遇到的问题是“创建新联系人”按钮。当我单击它时，我收到一个控制台错误：Uncaught ReferenceError: ContactGroups is not defined。我怀疑发生这种情况是因为当我创建一个新行时，它试图评估网格中 ClientTemplate 语句中的 JavaScript 语句，但由于尚未为其分配值而失败。我该如何纠正？

Answer 1

我怀疑你是对的。该错误指出 ContactGroups 未定义，这很可能发生在连接函数上。您正在检查它是否为 null 但如果它未定义则不会捕获它。如果您像这样更改函数，它将满足 null 和 undefined 的要求：

<script>
    function displayContactGroups(contactGroups) {
        if (!contactGroups) {
            return "";
        }
        return contactGroups.join(", ");
    }
</script>

我不是 100% 确定，因为错误中 ContactGroups 的大小写与函数中的不一样。

Answer 2

The error you are encountering is happening because the displayContactGroups function in your JavaScript client template is expecting a value for the ContactGroups parameter, but since you are creating a new row, there is no value yet.

To fix this error, you can modify your displayContactGroups function to check if contactGroups is null or undefined and return an empty string if it is. Here's an updated version of the function:

function displayContactGroups(contactGroups) {
    if (contactGroups == null || typeof contactGroups === 'undefined') {
        return "";
    }
    return contactGroups.join(", ");
}
This updated function will check if contactGroups is either null or undefined, and if it is, it will return an empty string. This should prevent the error you were encountering.

Alternatively, you can use the if statement in the client template to check if the ContactGroups property is null or undefined, and display an empty string in that case. Here's an example of how you can modify the client template:

columns.Bound(p => p.ContactGroups)
    .ClientTemplate("# if (ContactGroups == null || typeof ContactGroups === 'undefined') {# #=''# } else { #= displayContactGroups(ContactGroups) # } #")
    .EditorTemplateName("ContactGroupsEditor")
    .Title("ContactGroups")
    .Width(200);
This updated client template checks if the ContactGroups property is null or undefined, and if it is, it displays an empty string. If ContactGroups has a value, it calls the displayContactGroups function to format the value. This should also prevent the error you were encountering.

Either of these approaches should solve the error you were encountering when creating a new row.