C#, asp net.ajax разработка web-приложений, Javascript CSS
 
Задать вопрос asp.net ajax C#

Рубрики


Статьи


Подписка


Подписаться по RSS

Архив

 Полный архив по категориям

Популярные записи


Мои рекомендации



автозаполняемое поле AutoComplete/AutoSuggest TextBox AJAX ASP.NET

Самый простой способ реализации автозаполняемого поля - воспользоваться уже готовым элементом управления. Рассказывать о прелестях автозаполнения и технологии AJAX я не буду, лишь расскажу о том как это сделать.

  1. Загружаем архив с исходниками AutoSuggestBox.zip, распаковываем и находим уже скомпилированные dll файлы в папке bin. Для желающих покопаться в коде есть исходники.
  2. Добавляем контрол на панель элементов(toolbox) или просто подключаем референс и добавляем сборку в список контролов в файле web.config
  3. Ставим контрол на aspx/ascx форму
    <Anthem:AutoSuggestBox runat="server" 
        ID="asbFavoriteBand" DataKeyField="ID" 
        TextBoxDisplayField="Name" AutoCallBack="true" 
        ItemNotFoundMessage="Item not found!" >
        <itemtemplate>
            <%# ((Band)Container.DataItem).Name %>
        </ItemTemplate>
    </Anthem:AutoSuggestBox>
    Здесь мы указываем имя ключевого и текстового поля, строку сообщения на тот случай если вариантов нет и по желанию - шаблон повторяемой строки-подсказки.
  4. Перехватываем обработчики событий TextChanged в котором мы пишем примерно вот такой код для биндинга списка предлагаемых вариантов
    void asbFavoriteBand_TextChanged(object source, 
            Anthem.AutoSuggestEventArgs e)
    {
        //Creates a dataview from a datatable
        DataView dv = new DataView(_dtBands);
    
        //Filters the datatable based on the CurrentText property
        dv.RowFilter = string.Format("BandName LIKE '%{0}%'", e.CurrentText);
    
        //Sets the dataview as the control's datasource
        asbFavoriteBand.DataSource = dv;
        asbFavoriteBand.DataBind();
    }
    Тут мы просто добавляем фильтр на DataView и выбираем строки которые содержат уже введённый текстб доступный нам в e.CurrentText. Биндим этими данными сам текстбокс.
  5. Если это необходимо, можно перехватить обработчик SelectedValueChanged в котором выполняются действия в том случае, если пользователь выбрал один из предлагаемых вариантов.

Вот собственно и всё.

Name
E-mail

Comment (HTML not allowed)  

Enter the code shown (prevents robots):

Live Comment Preview