Question

我正在使用Kendo Autocomplete，因为我正在填写Text并使用该文本解析数据，但我想使用ID作为Value在Form Submit上的服务器端发送它。

我正在使用此Kendo编辑器但无法将“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);
                                  })
                            )

请尽快帮助我。

Answer 1

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

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

并且在更改了kendo Autocomplete时，我已经写了一些事件，

    @(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 Function as ::

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

我在提交表格时使用的价值。谢谢你的帮助。

Answer 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("");
        }
    });

}

Answer 3

使用自动完成功能无法完成此操作。后者只是一个带有附加建议列表的常规文本框。您可以使用其他小部件.e.g。 ComboBox或DropDownList。两者都允许有文字和价值。

Answer 4

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

@(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);} }"));

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

Answer 5

您无法仅绑定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

在自动填充中将ID与文本绑定为值

5 个答案: