Как получить значение элемента asp: TextBox, вложенного в jQuery Typeahead Search <div>с использованием .NET - PullRequest
0 голосов
/ 21 мая 2018

У меня есть следующая разметка

<div class="typeahead__container">
  <div class="typeahead__field">
    <span class="typeahead__query">
            <asp:TextBox runat="server" ID="searchInputField" CssClass="js-typeahead" name="q" type="search"></asp:TextBox>
        </span>
    <span class="typeahead__button">
            <button type="submit">
                <span class="typeahead__search-icon"></span>
    </button>
    </span>
  </div>
</div>

Как правило, используя код позади, мы можем получить текстовое значение элемента <asp:TextBox> следующим образом:

Dim val As String = searchInputField.Text

В моем случае,это не работает.

Приведенный выше код является частью примера Hockey v2 следующей демонстрации http://www.runningcoder.org/jquerytypeahead/demo/

Я предполагаю, что не могу получить значение (я) текста, так какрезультаты не являются обычным текстом в текстовом поле (см. следующий рисунок)

enter image description here

На следующем рисунке показано, как текстовые значения отображаются в HTML.Значения хранятся в элементах <span>, поэтому <asp:TextBox> не знает об этих значениях.

enter image description here

Любые предложения, пожалуйста, о том, как получитьЗначения текста (Canadiens и Avalance) с использованием кода (или с использованием любого другого подхода в целом)?

ОБНОВЛЕНИЕ - РЕШЕНО

Спасибо предложению @ Andrew Iудалось передать значение в серверную часть, используя элемент <asp:HiddenField>, используя onSubmit Callback of Typehead.

callback: {
        onSubmit: function (node, form, items, event) {
         event.preventDefault();
         var searchValue = items.map(a => a.ID)
         document.getElementById("hiddenSearchResults").value = searchValue ;
         setTimeout(function () { __doPostBack(document.forms[0].name ); }, 1)
}

Затем в следующем коде я получил значение:

searchValues = hiddenSearchResults.Value

1 Ответ

0 голосов
/ 21 мая 2018

По умолчанию отображаемый идентификатор элемента ввода не будет «searchInputField» - взгляните на источник страницы в браузере.

Однако вы можете добавить ClientIdMode="Static" к свойствам элемента управления всделайте так:

<asp:TextBox runat="server" ID="searchInputField" ClientIdMode="Static" CssClass="js-typeahead" name="q" type="search"></asp:TextBox>

и тогда jQuery сможет найти его.

Чтобы потом получить данные в коде, я предлагаю добавить элемент управления asp: hidden изаполнить это событие JavaScript onclick для кнопки.Тогда значение скрытого элемента управления будет доступно на стороне сервера.

...