在自动完成中将 ID 作为值与文本绑定答案

【问题标题】：Bind ID as Value with Text in Autocomplete在自动完成中将 ID 作为值与文本绑定
【发布时间】：2013-12-12 14:22:40
【问题描述】：

我正在使用剑道自动完成，因为我正在填充文本并使用该文本解析数据，但我想使用 ID 作为值在表单提交时将其发送到服务器端。

我正在使用这个剑道编辑器，但无法将“CustomerID”绑定为自动完成的值::

 @(Html.Kendo().AutoComplete()
                                  .Name("Customers")
                                  .DataTextField("CustomerShortName")
                                  .Value("CustomerID")
                                  .Filter("contains")
                                  .MinLength(3)
                                  .Template("<label>${ data.CustomerShortName }</label>")
                                  .HtmlAttributes(new {  disabled="disabled" })
                                  .DataSource(source =>
                                  {
                                      source.Read(read =>
                                      {
                                          read.Action("GetCustomers", "GetData");
                                      })
                                      .ServerFiltering(true);
                                  })
                            )

请尽快帮助我。

【问题讨论】：

标签： jquery asp.net-mvc kendo-ui html-helper kendo-autocomplete

【解决方案1】：

我以另一种方式做到了这一点，我为其 ID 值创建了一个隐藏类型，即“CustomerID”为

@Html.HiddenFor(x=>x.CustomerID)

在更改剑道自动完成功能时，我已经写了一些事件，

    @(Html.Kendo().AutoComplete()
                                      .Name("Customers")
                                      .DataTextField("CustomerShortName")
                                     .Events(events => events.Select("CustomerSelect"))
                                      .Filter("contains")
                                      .MinLength(3)
                                      .Template("<label>${ data.CustomerShortName }</label>")
                                      .HtmlAttributes(new {  disabled="disabled" })
                                      .DataSource(source =>
                                      {
                                          source.Read(read =>
                                          {
                                              read.Action("GetCustomers", "GetData");
                                          })
                                          .ServerFiltering(true);
                                      })
                                )

为此，我使用 Javascript 函数作为::

<script>
//Set CustomerID
    function CustomerSelect(e)
    {
        var DataItem = this.dataItem(e.item.index());
        $("#CustomerID").val(DataItem.CustomerID);
}
</script>

我在提交表单时使用的那个值。感谢您的帮助。

【讨论】：

我正在使用 AutoCompleteFor()，如果我从后端获取 CustomerID 而不是 CustomerShortName，如何在其中显示文本字段

【解决方案2】：

如果你清除选中标记的解决方案不起作用，我通过这个解决方案解决了这个问题：

$().ready(function () {

    $("#Customers").change(function () {
        var au = $("#Customers").data("kendoAutoComplete");
        var selected = au.listView.selectedDataItems();
        if (selected.length > 0) {
             $("#CustomerID").val(selected[0].CustomerID);
        } else {
             $("#CustomerID").val("");
        }
    });

}

【讨论】：

这可以用更多的口头解释，非常有用。当用户从列表中选择一个项目时，该控件有一个 Select 事件来通知。但是，一旦他们这样做了，他们总是可以再次编辑控件。因此，Change 事件是知道控件不再有效的唯一方法。这是必需的，例如，如果您想在用户有有效选择时启用/禁用提交按钮。
上述原因非常有用：如果您挂钩 Select 事件以了解用户何时选择了一个值，那么它会立即跟随一个更改事件。因此，您不能只假设所有更改事件都与控件中的用户键入相关联。在那种情况下，Change 事件表明用户已经选择了一个值。因此，控件在某些更改事件的情况下是“有效的”，而在其他情况下则不是“有效的”。上面的代码向您展示了如何确定哪种情况是哪种情况。

【解决方案3】：

这不能通过自动完成来完成。后者只是一个带有附加建议列表的常规文本框。您可以使用不同的小部件。例如组合框或下拉列表。两者都允许有文本和值。

【讨论】：

【解决方案4】：

您不能只绑定到 ID，但可以使用 MVVM 绑定绑定到选定的对象。从那里您将能够访问该 ID。

HTML。

 <div id="view">
    <div>
       <h4 data-bind="text: selectedCustomer.CustomerID"></h3>
   </div>

   <span> Select Customer: </span>
   <input data-role="autocomplete"
          data-value-primitive="false"
          data-text-field="CustomerShortName"
          data-bind="value: selectedCustomer,
                     source: Customers" />
   </div>

javaScript。

var viewModel = kendo.observable({
  Customers: [
    { CustomerID:"1", CustomerShortName: "Customer One" },
    { CustomerID:"2", CustomerShortName: "Customer Two" },
    { CustomerID:"3", CustomerShortName: "Customer Three" },
  ],

  selectedCustomer: undefined,
});

var view = $("#view");
kendo.bind(view, viewModel);

可以在这里找到一个工作示例http://jsbin.com/vebiniqahi/1/edit?html,js,output

【讨论】：

【解决方案5】：

自动完成中值字段的绑定是不可能的替代方式是组合框

@(Html.Kendo().ComboBox()
            .Name("Combobox")
            .DataValueField("Value")
            .DataTextField("Text")
            .Filter(FilterType.Contains)
            .HtmlAttributes(new { value = propertyValue })
            .DataSource(source => {
                source.Read(read => {
                    read.Action(action, controller); //Set the Action and Controller name
                })
                .ServerFiltering(true);) //If true the DataSource will not filter the data on the client.
            })                              //, new { maxResults = 10 }
            .AutoBind(true).HighlightFirst(true).HtmlAttributes(htmlAttributes).Enable(true)
            .Events(e => e.Change("function(e){ if(ComboOnChange(e)){" + onChange + "(e);} }"));

change 事件是您想要在组合框中更改值时调用的 javascript 函数。

【讨论】：