Разделы справки использовать элемент управления ComboBox? Visual Basic

по Майкрософт

ComboBox — это ASP.NET элемент управления AJAX, который сочетает гибкость текстового поля со списком параметров, из которых можно выбрать пользователя.

Цель этого учебника — объяснить элемент управления ComboBox набора элементов управления AJAX. Поле со списком работает как сочетание стандартного элемента управления DropDownList ASP.NET и элемента управления TextBox. Можно выбрать существующий список элементов или ввести новый элемент.

Поле со списком похоже на расширитель элемента управления автозаполнения, но элементы управления используются в различных сценариях. Расширитель автозаполнения запрашивает веб-службу для получения совпадающих записей. Элемент управления ComboBox, напротив, инициализируется набором элементов. Использование расширителя автозаполнения имеет смысл при работе с большим набором данных (миллионы частей автомобиля) при использовании элемента управления ComboBox имеет смысл при работе с небольшим набором данных (десятки частей автомобиля).

Выбор из статического списка элементов

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

Мы создадим новую страницу веб-форм ASP.NET и используем элемент управления ComboBox на странице. Добавьте новую страницу ASP.NET в проект и переключитесь на представление конструирования.

Если вы хотите использовать на странице элемент управления ComboBox, необходимо добавить на страницу элемент управления ScriptManager. Перетащите элемент управления ScriptManager с вкладки расширения AJAX на поверхность конструктора. Элемент управления ScriptManager следует добавить в верхнюю часть страницы. его можно добавить непосредственно под открывающим тегом формы на стороне < сервера > .

Затем перетащите элемент управления ComboBox на страницу. Элемент управления ComboBox можно найти в области элементов с помощью других элементов управления AJAX Control Toolkit и расширителей элементов управления (см. рис).

Простая форма для создания визитной карточки

Рис. 01. Выбор элемента управления ComboBox из панели элементов (щелкните, чтобы просмотреть изображение с полным размером)

Мы будем использовать элемент управления ComboBox для вывода статического списка вариантов. Пользователь может выбрать определенный уровень «оживить» для своего продукта из списка трех вариантов: умеренный, средний и горячий (см. рис. 2).

Выбор из статического списка элементов

Рис. 02. выбор из статического списка элементов (щелкните, чтобы просмотреть изображение с полным размером)

Существует два способа добавления этих вариантов в элемент управления ComboBox. Во-первых, следует выбрать параметр задачи изменить параметры при наведении указателя мыши на элемент управления в представление конструирования и открыть редактор элементов (см. рис. 3).

Изменение элементов поля со списком

Рис. 03. изменение элементов поля со списком (щелкните, чтобы просмотреть изображение с полным размером)

Второй вариант — добавить список элементов между открывающим и закрывающим < тегами ASP: ComboBox > в представлении исходного кода. Страница в листинге 1 содержит обновленный ComboBox со списком элементов.

Листинг 1-static. aspx

<%@ Page Language="VB" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script runat="server">

    Protected Sub btnSubmit_Click(ByVal sender As Object, ByVal e As System.EventArgs)
        lblSelection.Text = "You picked " & ComboBox1.SelectedItem.Text
    End Sub
</script>

<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
    <title>Static</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:ScriptManager ID="ScriptManager1" runat="server" />
        
        Describe how spicy you like your food:
        <br />
        <cc1:ComboBox ID="ComboBox1" runat="server">
            <asp:ListItem Text="Mild" Value="0" />
            <asp:ListItem Text="Medium" Value="1" />
            <asp:ListItem Text="Hot" Value="2" />
        </cc1:ComboBox>
        
        <asp:Button
            ID="btnSubmit"
            Text="Submit"
            Runat="server" OnClick="btnSubmit_Click" />

        <hr />
        <asp:Label
            ID="lblSelection"
            Runat="server" />
        
    </div>
    </form>
</body>
</html>

При открытии страницы в листинге 1 можно выбрать один из уже существующих параметров из поля со списком. Иными словами, поле со списком работает так же, как элемент управления DropDownList.

Однако можно также ввести новый вариант (например, Super спици), который отсутствует в существующем списке. Таким образом, поле со списком также работает как элемент управления TextBox.

Независимо от того, выбирается ли уже существующий элемент или вводится настраиваемый элемент, при отправке формы выбранный вами элемент отображается в элементе управления метка. При отправке формы _ обработчик щелчка btnSubmit выполняет и обновляет метку (см. рис. 4).

Отображение выбранного элемента

Рис. 04. Отображение выбранного элемента (щелкните, чтобы просмотреть изображение с полным размером)

Поле со списком поддерживает те же свойства, что и элемент управления DropDownList для получения выбранного элемента после отправки формы:

  • SelectedItem. Text — отображает значение свойства Text выбранного элемента.
  • SelectedItem. Value — отображает значение свойства Value выбранного элемента или отображает текст, введенный в поле со списком.
  • SelectedValue — то же, что и SelectedItem. Value, за исключением того, что это свойство позволяет указать (начальный) выбранный элемент по умолчанию.

Если в поле со списком введен пользовательский вариант, то настраиваемый вариант назначается для свойств SelectedItem. Text и SelectedItem. Value.

Выбор списка элементов из базы данных

Можно получить список элементов, отображаемых ComboBox из базы данных. Например, можно привязать ComboBox к элементу управления SqlDataSource, элементу управления ObjectDataSource, LinqDataSource или EntityDataSource.

Представьте, что вы хотите отобразить список фильмов в поле со списком. Необходимо получить список фильмов из таблицы базы данных фильмов. Выполните следующие действия:

  1. Создание страницы с именем movies. aspx
  2. Добавьте элемент управления ScriptManager на страницу, перетащив ScriptManager из вкладки расширения AJAX на панели элементов на страницу.
  3. Добавьте на страницу элемент управления ComboBox, перетащив поле со списком на страницу.
  4. В представление конструирования наведите указатель мыши на элемент управления ComboBox и выберите параметр задача Выбор источника данных (см. рис. 5). Запускается мастер настройки источника данных.
  5. На шаге Выбор источника данных выберите < параметр Создать источник данных > .
  6. На шаге Выбор типа источника данных выберите База данных.
  7. На шаге Выбор подключения к данным выберите свою базу данных (например, мовиесдб. mdf).
  8. В шаге сохранить строку подключения в файле конфигурации приложения выберите параметр, чтобы сохранить строку подключения.
  9. На шаге Настройка инструкции SELECT выберите таблицу Database Movies и выберите все столбцы.
  10. На шаге тестового запроса нажмите кнопку Готово.
  11. Вернитесь к шагу Выбор источника данных , выберите столбец Заголовок для отображаемого поля и столбец Идентификатор для поля данных (см. рисунок).
  12. Нажмите кнопку ОК, чтобы закрыть мастер.

Выбор источника данных

Рис. 05. Выбор источника данных (щелкните, чтобы просмотреть изображение с полным размером)

Выбор полей текста и значений данных

Рис. 06. Выбор полей текста и значений данных (щелкните, чтобы просмотреть изображение с полным размером)

После выполнения описанных выше действий поле со списком будет привязано к элементу управления SqlDataSource, представляющему фильмы из таблицы базы данных фильмов. Источник страницы выглядит как листинг 2 (я очистил форматирование немного).

Листинг 2-movies. aspx

<%@ Page Language="VB" %>
<%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="cc1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    
        <asp:ScriptManager ID="ScriptManager1" runat="server" />
        <br />
        
        Select your favorite movie:
        <br />
        <cc1:ComboBox 
            ID="ComboBox1"
            DataSourceID="SqlDataSource1" 
            DataTextField="Title" 
            DataValueField="Id" 
            MaxLength="0" 
            runat="server" >
        </cc1:ComboBox>
     
        <asp:SqlDataSource 
            ID="SqlDataSource1"  
            ConnectionString="<%$ ConnectionStrings:ConnectionString %>" 
            SelectCommand="SELECT * FROM [Movies]"
            runat="server">
        </asp:SqlDataSource>
     
    </div>
    </form>
</body>
</html>

Обратите внимание, что элемент управления ComboBox имеет свойство DataSourceID, которое указывает на элемент управления SqlDataSource. При открытии страницы в браузере отображается список фильмов из базы данных (см. рис. 7). Можно либо выбрать фильм из списка, либо ввести новый фильм, введя фильм в поле со списком.

Отображение списка фильмов

Рис. 07. Отображение списка фильмов (щелкните, чтобы просмотреть изображение с полным размером)

Настройка DropDownStyle

Свойство ComboBox DropDownStyle можно использовать для изменения поведения поля со списком. Это свойство принимает возможные значения:

  • Раскрывающееся меню — (значение по умолчанию). в поле со списком отображается раскрывающийся список, если щелкнуть стрелку и ввести пользовательское значение.
  • Simple — поле со списком автоматически отображает раскрывающийся список, и можно ввести пользовательское значение.
  • DropDownList — поле со списком работает так же, как элемент управления DropDownList.

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

Значение DropDownList заставляет элемент управления ComboBox работать так же, как и стандартный элемент управления DropDownList. Однако здесь есть важное отличие. В предыдущих версиях Internet Explorer отображается элемент управления DropDownList с бесконечным z-индексом, поэтому элемент управления отображается перед любым элементом управления, помещенным перед ним. Поскольку поле со списком отображает тег HTML < div > вместо HTML- < > тега SELECT, поле со списком правильно учитывает z-порядок.

Настройка AutoCompleteMode

Свойство ComboBox AutoCompleteMode используется для указания того, что происходит, когда пользователь вводит текст в поле со списком. Это свойство принимает следующие возможные значения:

  • None-(значение по умолчанию). поле со списком не предоставляет никаких поведений автоматического завершения.
  • Предложение. поле со списком Отображает список и выделяет соответствующий элемент в списке (см. рис. 8).
  • Append — поле со списком не отображает список и добавляет соответствующий элемент из списка на введенный текст (см. рис. 9).
  • Сугжестаппенд — поле со списком Отображает список и добавляет соответствующий элемент из списка на введенный текст (см. рис. 10).

Поле со списком делает предложение

Рис. 08. предложение ComboBox (щелкните, чтобы просмотреть изображение с полным размером)

Поле со списком добавляет соответствующий текст

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

Поле со списком предлагает и добавляет

Рис. 10. предложение и Добавление поля со списком (щелкните, чтобы просмотреть изображение с полным размером)

Сводка

В этом руководстве вы узнали, как использовать элемент управления ComboBox для отображения фиксированного набора элементов. Элемент управления ComboBox привязан как к статическому набору элементов, так и к таблице базы данных. Наконец, вы узнали, как изменить поведение ComboBox, задав его свойства DropDownStyle и AutoCompleteMode.