ID liên kết dưới dạng Giá trị có Văn bản trong Tự động điền

Question

Tôi đang sử dụng Kendo Tự động hoàn thành, Trong đó tôi đang điền Văn bản và cũng sử dụng dữ liệu phân tích văn bản đó, Nhưng tôi muốn sử dụng ID làm Giá trị để gửi ở phía máy chủ trên Biểu mẫu .

Tôi đang sử dụng Kendo biên tập này nhưng có thể không có khả năng Ràng buộc "CustomerID" như giá trị của Autocomplete ::

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

Xin vui lòng giúp tôi về vấn đề này càng sớm càng tốt.

Answer 1

Tôi đã làm điều này theo một cách khác, Tôi đã thực hiện một loại Hidden cho giá trị ID của nó tức là cho "CustomerID" như

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

và về việc thay đổi Autocomplete kendo Tôi đã viết một số sự kiện như,

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

Và cho rằng tôi đang sử dụng Javascript Chức năng như ::

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

Và giá trị đó tôi đang sử dụng khi gửi biểu mẫu. Cảm ơn sự giúp đỡ của bạn.

Answer 2

Điều này không thể thực hiện được với tính năng Tự động hoàn tất. Sau này chỉ là một hộp văn bản thông thường với một danh sách gợi ý đính kèm. Bạn có thể sử dụng một tiện ích khác .e.g. ComboBox hoặc DropDownList. Cả hai đều cho phép có văn bản và giá trị.

Answer 3

các ràng buộc của lĩnh vực giá trị trong Autocomplete là không thể cách thay thế là combobox

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

sự kiện thay đổi là chức năng javascript mà bạn muốn gọi về việc thay đổi giá trị trong combobox.

Answer 4

Bạn không thể liên kết với chỉ ID nhưng bạn có thể liên kết với đối tượng đã chọn bằng cách sử dụng các ràng buộc MVVM. Từ đó bạn sẽ có thể truy cập 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); 

Một ví dụ làm việc có thể được tìm thấy ở đây http://jsbin.com/vebiniqahi/1/edit?html,js,output