Como fazer usar o Controle ComboBox? (C#)

Artigo
07/13/2023

O ComboBox é um controle AJAX ASP.NET que combina a flexibilidade de um TextBox com uma lista de opções das quais os usuários podem escolher.

O objetivo deste tutorial é explicar o controle ComboBox do Kit de Ferramentas de Controle AJAX. O ComboBox funciona como uma combinação entre um controle DropDownList ASP.NET padrão e um controle TextBox. Você pode selecionar em uma lista pré-existente de itens ou inserir um novo item.

O ComboBox é semelhante ao extensor de controle AutoComplete, mas os controles são usados em cenários diferentes. O extensor de Preenchimento Automático consulta um serviço Web para obter entradas correspondentes. O controle ComboBox, por outro lado, é inicializado com um conjunto de itens. Usar o extensor de Preenchimento Automático faz sentido quando você está trabalhando com um grande conjunto de dados (milhões de peças de carro) enquanto usa o controle ComboBox faz sentido ao trabalhar com um pequeno conjunto de dados (dezenas de peças de carro).

Selecionando em uma lista estática de itens

Vamos começar com uma amostra simples de como usar o controle ComboBox. Imagine que você deseja exibir uma lista estática de itens em uma lista suspensa. No entanto, você deseja deixar em aberto a possibilidade de que a lista não esteja concluída. Você deseja permitir que um usuário insira um valor personalizado na lista.

Criaremos uma nova página ASP.NET Web Forms e usaremos o controle ComboBox na página. Adicione a nova página ASP.NET ao projeto e alterne para o modo design.

Se você quiser usar o controle ComboBox na página, deverá adicionar um controle ScriptManager à página. Arraste o controle ScriptManager abaixo da guia Extensões AJAX para a superfície Designer. Você deve adicionar o controle ScriptManager na parte superior da página; você pode adicioná-lo imediatamente abaixo da marca de formulário> do lado <do servidor de abertura.

Em seguida, arraste o controle ComboBox para a página. Você pode encontrar o controle ComboBox na Caixa de Ferramentas com os outros controles do Kit de Ferramentas de Controle AJAX e extensores de controle (consulte figure1).

Figura 01: Selecionando o controle ComboBox na caixa de ferramentas (Clique para exibir a imagem em tamanho real)

Usaremos o controle ComboBox para exibir uma lista estática de opções. O usuário pode selecionar um nível específico de apimentação para seus alimentos em uma lista de três opções: Leve, Médio e Quente (consulte a Figura 2).

Figura 02: Selecionando em uma lista estática de itens (Clique para exibir imagem em tamanho real)

Há duas maneiras de adicionar essas opções ao controle ComboBox. Primeiro, você seleciona a opção de tarefa Editar Opções ao passar o mouse sobre o controle no modo Design e abrir o Editor de Itens (consulte a Figura 3).

Figura 03: Editando itens do ComboBox (Clique para exibir a imagem em tamanho real)

A segunda opção é adicionar a lista de itens entre as marcas asp:ComboBox> de abertura e fechamento <no modo de exibição Origem. A página na Listagem 1 contém o ComboBox atualizado que tem a lista de itens.

Listagem 1 – Static.aspx

<%@ Page Language="C#" %>
<%@ 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 void btnSubmit_Click(object sender, EventArgs e)
    {
        lblSelection.Text = "You picked " + ComboBox1.SelectedItem.Text;        
    }
</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>

Ao abrir a página na Listagem 1, você pode selecionar uma das opções pré-existentes na ComboBox. Em outras palavras, o ComboBox funciona como um controle DropDownList.

No entanto, você também tem a opção de inserir uma nova opção (por exemplo, Super Picante) que não está na lista existente. Portanto, o ComboBox também funciona como um controle TextBox.

Independentemente de você escolher um item pré-existente ou inserir um item personalizado, ao enviar o formulário, sua escolha aparecerá no controle de rótulo. Quando você envia o formulário, o manipulador de btnSubmit_Click executa e atualiza o rótulo (consulte a Figura 4).

Figura 04: Exibindo o item selecionado (Clique para exibir a imagem em tamanho real)

O ComboBox dá suporte às mesmas propriedades que o controle DropDownList para recuperar o item selecionado depois que um formulário é enviado:

SelectedItem.Text – exibe o valor da propriedade Text do item selecionado.
SelectedItem.Value – exibe o valor da propriedade Value do item selecionado ou exibe o texto digitado no ComboBox.
SelectedValue – o mesmo que SelectedItem.Value, exceto que essa propriedade permite que você especifique o item selecionado padrão (inicial).

Se você digitar uma opção personalizada no ComboBox, a opção personalizada será atribuída às propriedades SelectedItem.Text e SelectedItem.Value.

Selecionando a lista de itens do banco de dados

Você pode recuperar a lista de itens que o ComboBox exibe de um banco de dados. Por exemplo, você pode associar o ComboBox a um controle SqlDataSource, um controle ObjectDataSource, um LinqDataSource ou um EntityDataSource.

Imagine que você deseja exibir uma lista de filmes em um ComboBox. Você deseja recuperar a lista de filmes da tabela de banco de dados Filmes. Siga estas etapas:

Criar uma página chamada Movies.aspx
Adicione um controle ScriptManager à página arrastando o ScriptManager de sob a guia Extensões AJAX na Caixa de Ferramentas para a página.
Adicione um controle ComboBox à página arrastando o ComboBox para a página.
No modo de exibição Design, passe o mouse sobre o controle ComboBox e selecione a opção de tarefa Escolher Fonte de Dados (consulte a Figura 5). O Assistente de Configuração da Fonte de Dados é iniciado.
Na etapa Escolher uma Fonte de Dados , selecione a opção <Nova fonte de> dados.
Na etapa Escolher um Tipo de Fonte de Dados , selecione Banco de Dados.
Na etapa Escolher Sua Conexão de Dados , selecione seu banco de dados (por exemplo, MoviesDB.mdf).
Na etapa Salvar a Cadeia de Conexão no Arquivo de Configuração do Aplicativo , selecione a opção para salvar a cadeia de conexão.
Na etapa Configurar a Instrução Select, selecione a tabela de banco de dados Filmes e selecione todas as colunas.
Na etapa Testar Consulta , clique no botão Concluir.
De volta à etapa Escolher Fonte de Dados , selecione a coluna Título do campo a ser exibido e a coluna Id do campo de dados (consulte Figura).
Clique no botão OK para fechar o assistente.

Figura 05: Escolhendo uma fonte de dados (Clique para exibir imagem em tamanho real)

Figura 06: Escolhendo os campos de texto e valor de dados (Clique para exibir a imagem em tamanho real)

Depois de concluir as etapas acima, o ComboBox é associado a um controle SqlDataSource que representa os filmes da tabela de banco de dados Filmes. A origem da página se parece com Listagem 2 (limpei um pouco a formatação).

Listagem 2 – Movies.aspx

<%@ Page Language="C#" %>
<%@ 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>

Observe que o controle ComboBox tem uma propriedade DataSourceID que aponta para o controle SqlDataSource. Quando você abre a página em um navegador, a lista de filmes do banco de dados é exibida (consulte a Figura 7). Você pode escolher um filme na lista ou inserir um novo filme digitando o filme no ComboBox.

Figura 07: Exibindo uma lista de filmes (Clique para exibir imagem em tamanho real)

Definindo o DropDownStyle

Você pode usar a propriedade ComboBox DropDownStyle para alterar o comportamento do ComboBox. Essa propriedade aceita valores possíveis:

DropDown – (valor padrão) O ComboBox exibe uma lista suspensa quando você clica na seta e você pode inserir um valor personalizado.
Simples – o ComboBox exibe uma lista suspensa automaticamente e você pode inserir um valor personalizado.
DropDownList – o ComboBox funciona como um controle DropDownList.

O diferente entre DropDown e Simple é quando a lista de itens é exibida. No caso de Simples, a lista é exibida imediatamente quando você move o foco para o ComboBox. No caso do DropDown, você deve clicar na seta para ver a lista de itens.

O valor DropDownList faz com que o controle ComboBox funcione como um controle DropDownList padrão. No entanto, há uma diferença importante aqui. Versões mais antigas da Internet Explorer exibem um controle DropDownList com um índice z infinito para que o controle apareça na frente de qualquer controle colocado na frente dele. Como o ComboBox renderiza uma marca de div> HTML <em vez de uma marca de seleção> HTML<, a ComboBox respeita corretamente a ordenação z.

Definindo o AutoCompleteMode

Você usa a propriedade ComboBox AutoCompleteMode para especificar o que acontece quando alguém digita texto no ComboBox. Essa propriedade aceita os seguintes valores possíveis:

Nenhum – (valor padrão) O ComboBox não fornece nenhum comportamento de preenchimento automático.
Sugerir – o ComboBox exibe a lista e realça o item correspondente na lista (consulte a Figura 8).
Acrescentar – o ComboBox não exibe a lista e acrescenta o item correspondente da lista ao que você digitou (consulte a Figura 9).
SuggestAppend – o ComboBox exibe a lista e acrescenta o item correspondente da lista ao que você digitou (consulte a Figura 10).

Figura 08: o ComboBox faz uma sugestão (Clique para exibir a imagem em tamanho real)

Figura 09: ComboBox acrescenta texto correspondente (Clique para exibir imagem em tamanho real)

Figura 10: o ComboBox sugere e acrescenta (Clique para exibir a imagem em tamanho real)

Resumo

Neste tutorial, você aprendeu a usar o controle ComboBox para exibir um conjunto fixo de itens. Associamos o controle ComboBox a um conjunto estático de itens e a uma tabela de banco de dados. Por fim, você aprendeu a modificar o comportamento do ComboBox definindo suas propriedades DropDownStyle e AutoCompleteMode.

Partilhar via