0

我在我的 MVC 项目（服务器端过滤）中使用剑道自动完成控制。它正确列出了数据。但问题是当我将数据提交到服务器时，自动完成值 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);
  })
)

我如何将值发送到服务器。

谢谢..

4

2 回答 2

2

由于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。

于 2019-02-04T08:07:51.377 回答
0

这是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
}
于 2021-08-13T19:28:05.817 回答