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

Статья
07/13/2023

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

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

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

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

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

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

Если вы хотите использовать элемент управления ComboBox на странице, необходимо добавить элемент управления ScriptManager на страницу. Перетащите элемент управления ScriptManager из-под вкладки Расширения AJAX на Designer поверхность. Необходимо добавить элемент управления 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. Выполните следующие действия.

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

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

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

После выполнения описанных выше действий ComboBox привязывается к элементу управления SqlDataSource, представляющего фильмы из таблицы базы данных Movies. Источник страницы выглядит как листинг 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 DropDownStyle. Это свойство принимает возможные значения:

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

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

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

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

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

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

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

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

Рис. 10. Элемент ComboBox предлагает и добавляет (щелкните для просмотра полноразмерного изображения)

Итоги

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