ID als Wert mit Text in Autocomplete binden

Question

Ich verwende Kendo Autocomplete, in dem ich den Text fülle und auch diesen Text verwende, analysiere Daten, Aber ich möchte ID als Wert verwenden, um es auf der Serverseite auf Form Submit zu senden .

ich diesen Kendo Editor verwenden aber kann nicht in der Lage, die „CustomerID“, wie der Wert der automatischen Vervollständigung zu binden ::

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

Bitte helfen Sie mir auf diese so schnell wie möglich.

Answer 1

Ich habe dies in einer anderen Art und Weise getan, ich eine versteckte Art für seine ID vorgenommen haben, dh für „CustomerID“, wie

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

und über den Wechsel der Kendo automatische Vervollständigung habe ich ein Ereignis wie geschrieben

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

und für die ich Javascript-Funktion verwenden als ::

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

Und diesen Wert benutze ich beim Senden des Formulars. Danke für Ihre Hilfe.

Answer 2

Dies kann nicht mit AutoComplete durchgeführt werden. Letzteres ist nur eine normale Textbox mit einer angehängten Vorschlagsliste. Sie können ein anderes Widget verwenden, z. ComboBox oder DropDownList. Beide erlauben es, Text und Wert zu haben.

Answer 3

die Bindung in der automatischen Vervollständigung von Wertfeld ist nicht möglich, alternative Art und Weise Combobox ist

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

das Änderungsereignis ist die Javascript-Funktion, die Sie auf Wertänderung in Combobox anrufen mögen.

Answer 4

Sie können nicht nur an die ID binden, sondern mithilfe der MVVM-Bindungen an das ausgewählte Objekt binden. Von dort aus können Sie auf die ID zugreifen.

Das 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> 

Das 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); 

Ein Arbeitsbeispiel kann hier http://jsbin.com/vebiniqahi/1/edit?html,js,output

finden