Связать идентификатор как значение с текстом в автозаполнении

Я использую Kendo Autocomplete, поскольку я заполняю текст, а также использую данные анализа текста, но я хочу использовать идентификатор в качестве значения, чтобы отправить его на стороне сервера при отправке формы.

Я использую этот редактор 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);
                                  })
                            )   

Пожалуйста, помогите мне в этом как можно скорее.


person Rahul    schedule 27.11.2013    source источник


Ответы (5)


Я сделал это по-другому, я сделал скрытый тип для его значения идентификатора, т.е. для «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>

И это значение я использую при отправке формы. Спасибо за вашу помощь.

person Rahul    schedule 27.11.2013
comment
Я использую AutoCompleteFor(), как показать текстовое поле, если из бэкэнда я получаю CustomerID вместо CustomerShortName - person Jofy Baby; 18.02.2019

Отмеченное решение не работает, если вы снимите флажок, я решил эту проблему с помощью этого решения:

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

}
person Mahdi Ahmadi    schedule 14.08.2018

Это невозможно сделать с помощью автозаполнения. Последний представляет собой обычное текстовое поле с прикрепленным списком предложений. Вы можете использовать другой виджет, например. ComboBox или DropDownList. Оба позволяют иметь текст и значение.

person Atanas Korchev    schedule 27.11.2013

Вы не можете привязываться только к идентификатору, но вы можете привязываться к выбранному объекту, используя привязки MVVM. Оттуда вы сможете получить доступ к идентификатору.

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

person Rich Hildebrand    schedule 23.07.2015

привязка поля значения в автозаполнении невозможна, альтернативным способом является поле со списком

@(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, которую вы хотите вызвать при изменении значения в поле со списком.

person Rudresha Parameshappa    schedule 27.11.2013