9

我正在使用剑道自动完成，因为我正在填充文本并使用该文本解析数据，但我想使用 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);
                                  })
                            )

请尽快帮助我。

4

5 回答 5

19

我以另一种方式做到了这一点，我为其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>

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

于 2013-11-27T15:10:44.783 回答
3

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

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

}
于 2018-08-14T12:46:27.100 回答
1

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

于 2013-11-27T09:52:19.347 回答
1

您不能只绑定到 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

于 2015-07-23T02:00:24.130 回答
0

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

@(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 函数。

于 2013-11-27T15:59:14.917 回答