kendo 自动完成中缺少 DataValueField

Question

我在我的 MVC 项目中使用 kendo 自动完成控件（服务器端过滤）。它正确地列出了数据。但问题是当我将数据提交到服务器时，自动完成值 id 丢失了。因为这个控件中没有DataValueField属性。下面的代码是我正在使用的

@(Html.Kendo().AutoComplete()
    .Name("Patient")
    .Placeholder("Enter Name")
    .DataTextField("TextField")
    .Filter("contains")
    .MinLength(3)
    .HtmlAttributes(new { style = "width:100%" })
    .DataSource(source =>
    {
      source.Read(read =>
      {
         read.Action("function", "controller")
         .Data("onAdditionalData");
      })
         .ServerFiltering(true);
  })
)

如何将值发送到服务器。

谢谢..

Answer 1

由于 AutoComplete 助手没有 DataValueField 属性，您需要使用其他 HTML 助手作为解决方法来传递另一个属性值。假设您的视图模型具有此设置：

public class ViewModel
{
    // ID property example
    public int PatientID { get; set; }

    // other properties
}

您可以在 Razor 视图中创建隐藏字段或只读文本框来存储上述 ID 属性：

@Html.HiddenFor(m => m.PatientID)

然后，通过创建一个从自动完成助手读取项目索引的函数，从客户端脚本分配其 value 属性：

function selectPatient(e) {
    var item = this.dataItem(e.item.index());
    $('#PatientID').val(item.PatientID);
}

最后设置绑定到Events属性的函数名：

@(Html.Kendo().AutoComplete()
    .Name("Patient")
    .Placeholder("Enter Name")
    .DataTextField("TextField")
    .Filter("contains")
    .MinLength(3)
    .HtmlAttributes(new { style = "width:100%" })

    // add this line
    .Events(ev => ev.Select("selectPatient"))

    .DataSource(source => {
        source.Read(read => {
            read.Action("function", "controller")
            .Data("onAdditionalData");
        })
        .ServerFiltering(true);
    })
)

按照此设置，当用户提交表单时，PatientID 属性应该具有来自自动完成助手的所选值的 ID。

Answer 2

这是 AutoComplete 小部件的已知限制。一种解决方法是通过模板添加一个属性来存储控件上的数据值：

@(Html.Kendo().AutoComplete()
    .Name("Patient")
    .Placeholder("Enter Name")
    .DataTextField("TextField")
    .Filter("contains")
    .MinLength(3)
    .HtmlAttributes(new { style = "width:100%" })
    .DataSource(source =>
    {
        source.Read(read =>
        {
            read.Action("function", "controller").Data("onAdditionalData");
        })
        .ServerFiltering(true);
    })
    .Events(events => events.Select("onPatientSelected"))
    .Template("<span data-recordid=\"#= data.ID #\"> #: data.ID # &ndash; #: data.Name #</span>")
)

这假设 ID 和 Name 是患者对象的属性。

然后您可以处理 Select 事件以在进行选择时获取存储的 ID 值：

function onPatientSelected(arg) {
    var selectedPatientID = arg.item.find('span').data('recordid')

    // do whatever with the ID, such as sending it to the server
}

kendo 自动完成中缺少 DataValueField

DataValueField Missing in kendo Autocomplete

c#

asp.net-mvc

asp.net-mvc-4

kendo-ui

kendo-autocomplete