Как использовать элемент управления ComboBox? (VB)

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

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

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

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

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

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

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

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

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

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

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

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

Эти варианты можно добавить в элемент управления ComboBox двумя способами. Во-первых, при наведении указателя мыши на элемент управления в конструкторе выберите параметр "Изменить параметры" и откройте редактор элементов (см. рис. 3).

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

Второй вариант — добавить список элементов между открывающим и закрывающим тегами <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 можно выбрать один из ранее существующих вариантов в ComboBox. Другими словами, comboBox работает так же, как элемент управления DropDownList.

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

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

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

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

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

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

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

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

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

Создание страницы с именем Movies.aspx
Добавьте элемент управления ScriptManager на страницу, перетащив ScriptManager из вкладки "Расширения AJAX" на страницу.
Добавьте элемент управления ComboBox на страницу, перетащив ComboBox на страницу.
В конструкторе наведите указатель мыши на элемент управления ComboBox и выберите параметр " Выбор источника данных " (см. рис. 5). Запускается мастер настройки источника данных.
На шаге "Выбор источника данных " выберите <параметр "Создать источник> данных".
На шаге "Выбор типа источника данных " выберите "База данных".
На шаге выбора подключения к данным выберите базу данных (например, MoviesDB.mdf).
На шаге "Сохранение строки подключения в файл конфигурации приложения" выберите опцию для сохранения вашей строки подключения.
На шаге "Настройка инструкции выбора " выберите таблицу базы данных "Фильмы" и выберите все столбцы.
На шаге "Тестовый запрос" нажмите кнопку "Готово".
На шаге Выбор источника данных выберите столбец "Заголовок" для отображаемого поля и столбец "Идентификатор" для поля данных (см. рисунок).
Нажмите кнопку "ОК", чтобы закрыть мастер.

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

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

После выполнения описанных выше действий ComboBox привязан к элементу управления 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). Вы можете выбрать фильм из списка или ввести новый фильм, введя фильм в comboBox.

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

Настройка DropDownStyle

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

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

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

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

Настройка режима автозаполнения

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

None - (значение по умолчанию) ComboBox не предоставляет никакого автоматического завершения поведения.
Предложение. В поле ComboBox отображается список, и он выделяет соответствующий элемент в списке (см. рис. 8).
Добавление — ComboBox не отображает список и добавляет соответствующий элемент из списка к типизированному элементу (см. рис. 9).
SuggestAppend — ComboBox отображает список и добавляет совпадающий элемент из списка к тому, что вы начали вводить (см. рис. 10).

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

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

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

Сводка

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

Предыдущее

Обратная связь

Были ли сведения на этой странице полезными?

Last updated on 2026-03-27