Condividi tramite

Come si usa il controllo ComboBox? (VB)

di Microsoft

ComboBox è un controllo AJAX ASP.NET che combina la flessibilità di un controllo TextBox con un elenco di opzioni tra cui gli utenti possono scegliere.

L'obiettivo di questa esercitazione è spiegare il controllo ComboBox di AJAX Control Toolkit. ComboBox funziona come una combinazione tra un controllo DropDownList standard ASP.NET e un controllo TextBox. È possibile selezionare da un elenco preesistente di elementi o immettere un nuovo elemento.

ComboBox è simile all'extender del controllo Completamento automatico, ma i controlli vengono usati in scenari diversi. L'extender Completamento automatico esegue una query su un Servizio Web per ottenere elementi corrispondenti. Il controllo ComboBox, al contrario, viene inizializzato con un set di elementi. L'uso dell'extender AutoComplete ha senso quando si lavora con un set di dati di grandi dimensioni (milioni di parti di automobili) mentre si usa il controllo ComboBox quando si lavora con un piccolo set di dati (decine di parti di auto).

Selezione da un elenco statico di elementi

Si inizierà con un semplice esempio di uso del controllo ComboBox. Si supponga di voler visualizzare un elenco statico di elementi in un elenco a discesa. Tuttavia, si vuole lasciare aperta la possibilità che l'elenco non sia completo. Si vuole consentire a un utente di immettere un valore personalizzato nell'elenco.

Verrà creata una nuova pagina web form ASP.NET e verrà usato il controllo ComboBox nella pagina. Aggiungere la nuova pagina ASP.NET al progetto e passare alla visualizzazione Progettazione.

Se si desidera utilizzare il controllo ComboBox nella pagina, è necessario aggiungere un controllo ScriptManager alla pagina. Trascinare il controllo ScriptManager sotto la scheda Estensioni AJAX nell'area di progettazione. È necessario aggiungere il controllo ScriptManager nella parte superiore della pagina; è possibile aggiungerlo immediatamente sotto il tag form di apertura lato server <>.

Trascinare quindi il controllo ComboBox nella pagina. È possibile trovare il controllo ComboBox nella casella degli strumenti con gli altri controlli e gli extender di controllo AJAX Control Toolkit (vedere figura1).

Modulo semplice per la creazione di un biglietto da visita

Figura 01: Selezione del controllo ComboBox dalla casella degli strumenti (fare clic per visualizzare l'immagine a dimensione intera)

Si userà il controllo ComboBox per visualizzare un elenco statico di scelte. L'utente può selezionare un particolare livello di spiciness per il cibo da un elenco di tre scelte: Mild, Medium e Hot (vedere la figura 2).

Selezione da un elenco statico di elementi

Figura 02: Selezione da un elenco statico di elementi (fare clic per visualizzare l'immagine a dimensione intera)

È possibile aggiungere queste opzioni al controllo ComboBox in due modi. Per prima cosa, selezionare l'opzione Modifica opzioni quando si passa il puntatore del mouse sul controllo nella visualizzazione Struttura e si apre l'editor di elementi (vedere la figura 3).

Modifica di elementi ComboBox

Figura 03: Modifica di elementi ComboBox(Fare clic per visualizzare l'immagine a dimensione intera)

La seconda opzione consiste nell'aggiungere l'elenco di elementi tra i tag di apertura <asp:ComboBox> e chiusura nella visualizzazione Origine. La pagina nella Lista 1 contiene il ComboBox aggiornato che ha l'elenco degli elementi.

Elenco 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>

Quando si apre la pagina in Listing 1, è possibile selezionare una delle opzioni preesistenti dal ComboBox. In altre parole, ComboBox funziona esattamente come un controllo DropDownList.

Tuttavia, hai anche la possibilità di immettere una nuova scelta (ad esempio, Super Piccante) che non si trova nell'elenco esistente. Quindi, ComboBox funziona anche come un controllo TextBox.

Indipendentemente dal fatto che si seleziona un elemento preesistente o si immetta un elemento personalizzato, quando si invia il modulo, la scelta viene visualizzata nel controllo etichetta. Quando si invia il modulo, il gestore btnSubmit_Click esegue e aggiorna l'etichetta (vedere la figura 4).

Visualizzazione dell'elemento selezionato

Figura 04: Visualizzazione dell'elemento selezionato (fare clic per visualizzare l'immagine a dimensione intera)

ComboBox supporta le stesse proprietà del controllo DropDownList per il recupero dell'elemento selezionato dopo l'invio di un modulo:

  • SelectedItem.Text: visualizza il valore della proprietà Text dell'elemento selezionato.
  • SelectedItem.Value: visualizza il valore della proprietà Value dell'elemento selezionato o visualizza il testo digitato in ComboBox.
  • SelectedValue: uguale a SelectedItem.Value, ad eccezione del fatto che questa proprietà consente di specificare l'elemento selezionato predefinito (iniziale).

Se si digita una scelta personalizzata in ComboBox, la scelta personalizzata viene assegnata alle proprietà SelectedItem.Text e SelectedItem.Value.

Selezione dell'elenco di elementi dal database

È possibile recuperare l'elenco di elementi che la ComboBox visualizza da un database. È ad esempio possibile associare ComboBox a un controllo SqlDataSource, a un controllo ObjectDataSource, a LinqDataSource o a EntityDataSource.

Immagina di voler visualizzare un elenco di film in un ComboBox. Si vuole recuperare l'elenco di film dalla tabella di database Movies. Segui questi passaggi:

  1. Creare una pagina denominata Movies.aspx
  2. Aggiungere un controllo ScriptManager alla pagina trascinando ScriptManager dalla scheda Estensioni AJAX nella casella degli strumenti nella pagina.
  3. Aggiungere un controllo ComboBox alla pagina trascinando ComboBox nella pagina.
  4. Nella visualizzazione Progettazione passare il puntatore del mouse sul controllo ComboBox e selezionare l'opzione Scegli origine dati (vedere la figura 5). Viene avviata la procedura guidata per la configurazione dell'origine dati.
  5. Nel passaggio Scegliere un'origine dati selezionare l'opzione <Nuova origine> dati.
  6. Nel passaggio Scegliere un tipo di origine dati selezionare Database.
  7. Nel passaggio Scegliere la connessione dati selezionare il database, ad esempio MoviesDB.mdf.
  8. Nel passaggio Salva la stringa di connessione nel file di configurazione dell'applicazione selezionare l'opzione per salvare la stringa di connessione.
  9. Nel passaggio Configura istruzione SELECT, selezionare la tabella del database Movies e selezionare tutte le colonne.
  10. Nel passaggio Query di test fare clic sul pulsante Fine.
  11. Nel passaggio Scegli origine dati selezionare la colonna Titolo per il campo da visualizzare e la colonna ID per il campo dati (vedere Figura).
  12. Fare clic sul pulsante OK per chiudere la procedura guidata.

Scelta di un'origine dati

Figura 05: Scelta di un'origine dati (fare clic per visualizzare l'immagine a dimensione intera)

Scelta del testo dei dati e dei campi valore

Figura 06: Scelta del testo dei dati e dei campi valore (fare clic per visualizzare l'immagine a dimensione intera)

Dopo aver completato i passaggi precedenti, ComboBox è associato a un controllo SqlDataSource che rappresenta i film della tabella di database Movies. Il codice sorgente della pagina ha un aspetto simile al Listato 2 (ho pulito la formattazione un po').

Listing 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>

Si noti che il controllo ComboBox ha una proprietà DataSourceID che punta al controllo SqlDataSource. Quando si apre la pagina in un browser, viene visualizzato l'elenco di film dal database (vedere la figura 7). È possibile selezionare un film dall'elenco o immettere un nuovo film digitando il film in ComboBox.

Visualizzazione di un elenco di film

Figura 07: Visualizzazione di un elenco di film (fare clic per visualizzare l'immagine a dimensione intera)

Impostazione di DropDownStyle

È possibile utilizzare la proprietà ComboBox DropDownStyle per modificare il comportamento di ComboBox. Questa proprietà accetta valori possibili:

  • DropDown - (valore predefinito) Il controllo ComboBox visualizza un elenco a discesa quando si fa clic sulla freccia e si può immettere un valore personalizzato.
  • Semplice: ComboBox visualizza automaticamente un elenco a discesa e puoi immettere un valore personalizzato.
  • DropDownList: il controllo ComboBox funziona esattamente come un controllo DropDownList.

Il diverso tra DropDown e Simple è quando viene visualizzato l'elenco di elementi. Nel caso di Simple, l'elenco viene visualizzato immediatamente quando si dirige il focus sul combo box. Nel caso dell'elenco a discesa, è necessario fare clic sulla freccia per visualizzare l'elenco di elementi.

Il valore DropDownList fa sì che il controllo ComboBox funzioni esattamente come un controllo DropDownList standard. Tuttavia, c'è una differenza importante qui. Le versioni precedenti di Internet Explorer visualizzano un controllo DropDownList con un indice z infinito, in modo che il controllo venga visualizzato davanti a qualsiasi controllo posizionato di fronte a esso. Poiché comboBox esegue il rendering di un tag div< HTML >anziché di un tag di selezione< HTML>, ComboBox rispetta correttamente l'ordinamento z.

Impostazione di AutoCompleteMode

Utilizzare la proprietà ComboBox AutoCompleteMode per specificare cosa accade quando un utente digita testo in ComboBox. Questa proprietà accetta i valori possibili seguenti:

  • Nessuno : (valore predefinito) ComboBox non fornisce alcun comportamento di completamento automatico.
  • Suggerisci: il controllo ComboBox visualizza l'elenco ed evidenzia l'elemento corrispondente nell'elenco (vedere la figura 8).
  • Append: il controllo ComboBox non visualizza l'elenco e aggiunge l'elemento corrispondente dall'elenco a quello digitato (vedere la figura 9).
  • SuggestAppend: il controllo ComboBox visualizza l'elenco e aggiunge l'elemento corrispondente dall'elenco a quello digitato (vedere la figura 10).

ComboBox invia un suggerimento

Figura 08: ComboBox invia un suggerimento(Fare clic per visualizzare l'immagine a dimensione intera)

ComboBox aggiunge testo corrispondente

Figura 09: ComboBox aggiunge testo corrispondente(Fare clic per visualizzare l'immagine a dimensione intera)

ComboBox suggerisce e aggiunge

Figura 10: ComboBox suggerisce e aggiunge (fare clic per visualizzare l'immagine a dimensione intera)

Sommario

In questa esercitazione si è appreso come usare il controllo ComboBox per visualizzare un set fisso di elementi. Il controllo ComboBox è stato associato a un set statico di elementi e a una tabella di database. Infine, si è appreso come modificare il comportamento di ComboBox impostando le relative proprietà DropDownStyle e AutoCompleteMode.

Precedente

  • Last updated on