如何在Kendo网格MVC中正确绑定自动完成功能

Question

我有一个自动完成字段，用于联系人网格中的姓名。

用户应该能够键入名称，从列表中选择一个，并自动填充其他联系人详细信息。 这工作正常。

但是，用户还应该能够手动输入不在列表中的人员的详细信息，并保存它们。 这没有发生。 名称字段失去焦点之后，该值仍然存在。 保存后，该值会消失，因为它没有正确绑定到列。

我在此答案中遵循了建议（选项1，因为我宁愿不使用ViewData），但无法正确绑定值。

如果我将自动完成小部件命名为与列字段相同，则自动完成不起作用，该字段只是普通的文本字段。 如果我将自动完成小部件命名为其他名称，则输入字段将成为具有小部件名称的自动完成字段，但不会将数据绑定到列。

列声明

      .Columns(columns =>
      {
          columns.Bound(e => e.Name).EditorTemplateName("NameLookupConcatenated");
          columns.Bound(e => e.Phone);
          columns.Bound(e => e.Email);
          columns.Command(command => { command.Edit(); command.Destroy(); });
      })

网格模型

    public int ID { get; set; }
    public string Name { get; set; }
    public string Phone { get; set; }
    public string Email { get; set; }

自动完成

@model string

@(Html.Kendo().AutoComplete()
    .Name("concatenated")
    .DataTextField("Concatenated")
    .Filter("contains")
    .DataSource(source => source.Read(read => read.Action("GetUserInfo", "Contacts")
        .Data("onAdditionalData"))
        .ServerFiltering(true))
        .Events(e => e.Select("onUserSelect"))
)

自动完成模型

    public string Email { get; set; }
    private string FirstName { get; set; }
    private string LastName { get; set; }
    public string Concatenated
    {
        get { return string.Format("{0} {1}", FirstName, LastName); }
    }
    public string TelePhoneNo { get; set; }

Answer 1

我发现页面上已经有一个ID为“名称”的输入元素。 当网格处于编辑模式并且自动完成未附加到适当的元素时，这会导致id的重复。

我的工作代码：

.Columns(columns =>
      {
          columns.Bound(e => e.ConcatName).EditorTemplateName("NameLookupConcatenated"); //changed name here
          columns.Bound(e => e.Phone);
          columns.Bound(e => e.Email);
          columns.Command(command => { command.Edit(); command.Destroy(); });
      })

更改了上面列的名称，并在自动完成功能上设置“名称”属性以匹配列名称。

@(Html.Kendo().AutoComplete()
.Name("ConcatName")
.DataTextField("Concatenated")
.Filter("contains")
.DataSource(source => source.Read(read => read.Action("GetUserInfo", "Contacts")
    .Data("onAdditionalData"))
    .ServerFiltering(true))
    .Events(e => e.Select("onUserSelect"))
)