Ricerca per categorie usare il controllo ComboBox? (VB)

Articolo
07/13/2023

ComboBox è un controllo ASP.NET AJAX che combina la flessibilità di un controllo TextBox con un elenco di opzioni da 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'estensione del controllo Completamento automatico, ma i controlli vengono usati in scenari diversi. L'estensione Completamento automatico esegue una query su un servizio Web per ottenere voci corrispondenti. Il controllo ComboBox, al contrario, viene inizializzato con un set di elementi. L'uso dell'estensione AutoComplete ha senso quando si lavora con un set elevato di dati (milioni di parti di auto) mentre si usa il controllo ComboBox è utile quando si utilizza un piccolo set di dati (decine di parti di auto).

Selezione da un elenco statico di elementi

Iniziamo 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 completato. Si vuole consentire a un utente di immettere un valore personalizzato nell'elenco.

Verrà creata una nuova pagina Web Forms ASP.NET e si userà il controllo ComboBox nella pagina. Aggiungere la nuova pagina ASP.NET al progetto e passare alla visualizzazione Progettazione.

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

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

Figura 01: Selezione del controllo ComboBox dalla casella degli strumenti (Fare clic per visualizzare l'immagine a dimensioni complete)

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

Figura 02: Selezione da un elenco statico di elementi(Fare clic per visualizzare l'immagine a dimensioni complete)

Esistono due modi per aggiungere queste opzioni al controllo ComboBox. Prima di tutto, si seleziona l'opzione Modifica opzioni quando si passa il mouse sul controllo nella visualizzazione Progettazione e si apre l'Editor elementi (vedere la figura 3).

Figura 03: Modifica di elementi ComboBox(Fare clic per visualizzare l'immagine full-size)

La seconda opzione consiste nell'aggiungere l'elenco di elementi tra l'apertura e la chiusura <dei tag asp:ComboBox> nella visualizzazione Origine. La pagina nell'elenco 1 contiene la casella combinata aggiornata con l'elenco di 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 Elenco 1, è possibile selezionare una delle opzioni preesistenti da ComboBox. In altre parole, ComboBox funziona esattamente come un controllo DropDownList.

Tuttavia, si ha anche l'opzione di immettere una nuova scelta (ad esempio Super Spicy) che non è nell'elenco esistente. Quindi, ComboBox funziona anche come un controllo TextBox.

Indipendentemente dal fatto che si seleziona un elemento preesistente o si immette 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).

Figura 04: Visualizzazione dell'elemento selezionato(Fare clic per visualizzare l'immagine full-size)

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 (iniziale) predefinito.

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 visualizzati da un database. Ad esempio, è possibile associare ComboBox a un controllo SqlDataSource, un controllo ObjectDataSource, un linqDataSource o un EntityDataSource.

Si supponga di voler visualizzare un elenco di film in un ComboBox. Si vuole recuperare l'elenco dei film dalla tabella di database Film. Seguire questa procedura:

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

Figura 05: Scelta di un'origine dati(Fare clic per visualizzare l'immagine full-size)

Figura 06: Scelta del testo dei dati e dei campi valore(Fare clic per visualizzare l'immagine a dimensioni complete)

Dopo aver completato i passaggi precedenti, ComboBox è associato a un controllo SqlDataSource che rappresenta i film dalla tabella di database Movies. L'origine per la pagina è simile all'elenco 2 (ho pulito la formattazione un po').

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

Figura 07: Visualizzazione di un elenco di film(Fare clic per visualizzare l'immagine full-size)

Impostazione di DropDownStyle

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

DropDown: (valore predefinito) La Casella combinata 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: 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 sposta lo stato attivo su ComboBox. Nel caso dell'elenco a discesa, è necessario fare clic sulla freccia per visualizzare l'elenco di elementi.

Il valore DropDownList causa il funzionamento del controllo ComboBox 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 davanti a esso. Poiché ComboBox esegue il rendering di un tag div> HTML anziché 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- ComboBox non visualizza l'elenco e aggiunge l'elemento corrispondente dall'elenco a quello digitato (vedere la figura 9).
SuggestAppend- ComboBox visualizza l'elenco e aggiunge l'elemento corrispondente dall'elenco a quello digitato (vedere la figura 10).

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

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

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

Riepilogo

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

Indietro