Freigeben über


Gewusst wie das ComboBox-Steuerelement verwenden? (VB)

von Microsoft

ComboBox ist ein ASP.NET AJAX-Steuerelement, das die Flexibilität eines TextBox-Steuerelements mit einer Liste von Optionen kombiniert, aus denen Benutzer auswählen können.

Das Ziel dieses Tutorials besteht darin, das ComboBox-Steuerelement AJAX Control Toolkit zu erläutern. Das ComboBox-Steuerelement funktioniert wie eine Kombination aus einem Standard-ASP.NET DropDownList-Steuerelement und einem TextBox-Steuerelement. Sie können entweder aus einer bereits vorhandenen Liste von Elementen auswählen oder ein neues Element eingeben.

ComboBox ähnelt dem AutoVervollständigen-Steuerelement extender, aber die Steuerelemente werden in verschiedenen Szenarien verwendet. Der AutoVervollständigen-Extender fragt einen Webdienst ab, um übereinstimmende Einträge abzurufen. Das ComboBox-Steuerelement wird dagegen mit einer Gruppe von Elementen initialisiert. Die Verwendung des AutoVervollständigen-Extenders ist sinnvoll, wenn Sie mit einem großen Satz von Daten (Millionen von Autoteilen) arbeiten, während die Verwendung des ComboBox-Steuerelements sinnvoll ist, wenn Sie mit einem kleinen Satz von Daten (Dutzenden von Autoteilen) arbeiten.

Auswählen aus einer statischen Liste von Elementen

Beginnen wir mit einem einfachen Beispiel für die Verwendung des ComboBox-Steuerelements. Stellen Sie sich vor, Sie möchten eine statische Liste von Elementen in einer Dropdownliste anzeigen. Sie möchten jedoch die Möglichkeit offen lassen, dass die Liste nicht vollständig ist. Sie möchten einem Benutzer erlauben, einen benutzerdefinierten Wert in die Liste einzugeben.

Wir erstellen eine neue ASP.NET Web Forms Seite und verwenden das ComboBox-Steuerelement auf der Seite. Fügen Sie ihrem Projekt die neue seite ASP.NET hinzu, und wechseln Sie zur Entwurfsansicht.

Wenn Sie das ComboBox-Steuerelement auf der Seite verwenden möchten, müssen Sie der Seite ein ScriptManager-Steuerelement hinzufügen. Ziehen Sie das ScriptManager-Steuerelement unter der Registerkarte AJAX-Erweiterungen auf die Designer Oberfläche. Sie sollten das ScriptManager-Steuerelement oben auf der Seite hinzufügen. Sie können es direkt unter dem öffnenden serverseitigen <Formulartag> hinzufügen.

Ziehen Sie als Nächstes das ComboBox-Steuerelement auf die Seite. Sie finden das ComboBox-Steuerelement in der Toolbox mit den anderen AJAX Control Toolkit-Steuerelementen und Steuerelementerweiterungen (siehe Abbildung1).

Einfaches Formular zum Erstellen eines geschäftsspezifischen Karte

Abbildung 01: Auswählen des ComboBox-Steuerelements aus der Toolbox (Klicken Sie, um das bild in voller Größe anzuzeigen)

Wir verwenden das ComboBox-Steuerelement, um eine statische Liste von Optionen anzuzeigen. Der Benutzer kann eine bestimmte Schärfe für seine Lebensmittel aus einer Liste mit drei Optionen auswählen: Mild, Mittel und Heiß (siehe Abbildung 2).

Auswählen aus einer statischen Liste von Elementen

Abbildung 02: Auswählen aus einer statischen Liste von Elementen(Klicken Sie, um das Bild in voller Größe anzuzeigen)

Es gibt zwei Möglichkeiten, diese Optionen dem ComboBox-Steuerelement hinzuzufügen. Wählen Sie zunächst die Taskoption Optionen bearbeiten aus, wenn Sie mit der Maus auf das Steuerelement in der Entwurfsansicht zeigen, und öffnen Sie den Element-Editor (siehe Abbildung 3).

Bearbeiten von ComboBox-Elementen

Abbildung 03: Bearbeiten von ComboBox-Elementen(Klicken Sie hier, um das bild in voller Größe anzuzeigen)

Die zweite Option besteht darin, die Liste der Elemente zwischen den öffnenden und schließenden <asp:ComboBox-Tags> in der Quellansicht hinzuzufügen. Die Seite in Listing 1 enthält das aktualisierte ComboBox-Element mit der Liste der Elemente.

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

Wenn Sie die Seite in Listing 1 öffnen, können Sie eine der bereits vorhandenen Optionen im ComboBox-Feld auswählen. Anders ausgedrückt: Das ComboBox-Steuerelement funktioniert wie ein DropDownList-Steuerelement.

Sie haben jedoch auch die Möglichkeit, eine neue Auswahl (z. B. Super Spicy) einzugeben, die nicht in der vorhandenen Liste enthalten ist. Das ComboBox-Steuerelement funktioniert also auch wie ein TextBox-Steuerelement.

Unabhängig davon, ob Sie ein bereits vorhandenes Element auswählen oder ein benutzerdefiniertes Element eingeben, wird Ihre Auswahl beim Übermitteln des Formulars im Bezeichnungssteuerelement angezeigt. Wenn Sie das Formular übermitteln, führt der btnSubmit_Click-Handler die Bezeichnung aus und aktualisiert diese (siehe Abbildung 4).

Anzeigen des ausgewählten Elements

Abbildung 04: Anzeigen des ausgewählten Elements (Klicken Sie, um das Bild in voller Größe anzuzeigen)

ComboBox unterstützt dieselben Eigenschaften wie das DropDownList-Steuerelement zum Abrufen des ausgewählten Elements nach dem Übermitteln eines Formulars:

  • SelectedItem.Text: Zeigt den Wert der Text-Eigenschaft des ausgewählten Elements an.
  • SelectedItem.Value: Zeigt den Wert der Value-Eigenschaft des ausgewählten Elements oder den in das ComboBox eingegebenen Text an.
  • SelectedValue : Identisch mit SelectedItem.Value, mit der Ausnahme, dass Sie mit dieser Eigenschaft das (anfängliche) Standardelement angeben können.

Wenn Sie eine benutzerdefinierte Auswahl in das ComboBox eingeben, wird die benutzerdefinierte Auswahl sowohl den Eigenschaften SelectedItem.Text als auch SelectedItem.Value zugewiesen.

Auswählen der Liste der Elemente aus der Datenbank

Sie können die Liste der Elemente, die vom ComboBox-Element angezeigt wird, aus einer Datenbank abrufen. Beispielsweise können Sie das ComboBox-Steuerelement an ein SqlDataSource-Steuerelement, ein ObjectDataSource-Steuerelement, eine LinqDataSource oder eine EntityDataSource binden.

Stellen Sie sich vor, Sie möchten eine Liste von Filmen in einem ComboBox-Element anzeigen. Sie möchten die Liste der Filme aus der Movies-Datenbanktabelle abrufen. Führen Sie die folgenden Schritte aus:

  1. Erstellen einer Seite mit dem Namen Movies.aspx
  2. Fügen Sie der Seite ein ScriptManager-Steuerelement hinzu, indem Sie den ScriptManager von unter der Registerkarte AJAX-Erweiterungen in der Toolbox auf die Seite ziehen.
  3. Fügen Sie der Seite ein ComboBox-Steuerelement hinzu, indem Sie das ComboBox-Steuerelement auf die Seite ziehen.
  4. Zeigen Sie in der Entwurfsansicht mit der Maus auf das ComboBox-Steuerelement, und wählen Sie die Option Datenquelle auswählen aus (siehe Abbildung 5). Der Datenquellenkonfigurations-Assistent wird gestartet.
  5. Wählen Sie im Schritt Datenquelle auswählen die <Option Neue Datenquelle> aus.
  6. Wählen Sie im Schritt Datenquellentyp auswählen die Option Datenbank aus.
  7. Wählen Sie im Schritt Datenverbindung auswählen Ihre Datenbank aus (z. B. MoviesDB.mdf).
  8. Wählen Sie im Schritt Verbindungszeichenfolge in der Anwendungskonfigurationsdatei speichern die Option zum Speichern der Verbindungszeichenfolge aus.
  9. Wählen Sie im Schritt Konfigurieren der Anweisung auswählen die Datenbanktabelle Filme aus, und wählen Sie alle Spalten aus.
  10. Klicken Sie im Schritt Abfrage testen auf die Schaltfläche Fertig stellen.
  11. Wählen Sie im Schritt Datenquelle auswählen die Spalte Titel für das anzuzeigende Feld und die Id-Spalte für das Datenfeld aus (siehe Abbildung).
  12. Klicken Sie auf die Schaltfläche OK, um den Assistenten zu schließen.

Auswählen einer Datenquelle

Abbildung 05: Auswählen einer Datenquelle(Klicken, um ein Bild in voller Größe anzuzeigen)

Auswählen der Datentext- und Wertfelder

Abbildung 06: Auswählen der Datentext- und Wertfelder(Klicken Sie hier, um das bild in voller Größe anzuzeigen)

Nachdem Sie die obigen Schritte ausgeführt haben, ist das ComboBox an ein SqlDataSource-Steuerelement gebunden, das die Filme aus der Movies-Datenbanktabelle darstellt. Die Quelle für die Seite sieht wie Listing 2 aus (ich habe die Formatierung ein wenig bereinigt).

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

Beachten Sie, dass das ComboBox-Steuerelement über eine DataSourceID-Eigenschaft verfügt, die auf das SqlDataSource-Steuerelement verweist. Wenn Sie die Seite in einem Browser öffnen, wird die Liste der Filme aus der Datenbank angezeigt (siehe Abbildung 7). Sie können entweder einen Film aus der Liste auswählen oder einen neuen Film eingeben, indem Sie den Film in das ComboBox-Element eingeben.

Anzeigen einer Liste von Filmen

Abbildung 07: Anzeigen einer Liste von Filmen(Klicken, um das Bild in voller Größe anzuzeigen)

Festlegen des DropDownStyle

Sie können die ComboBox DropDownStyle-Eigenschaft verwenden, um das Verhalten des ComboBox-Steuerelements zu ändern. Diese Eigenschaft akzeptiert mögliche Werte:

  • DropDown : (Standardwert) Das ComboBox zeigt eine Dropdownliste an, wenn Sie auf den Pfeil klicken, und Sie können einen benutzerdefinierten Wert eingeben.
  • Einfach: Das ComboBox zeigt automatisch eine Dropdownliste an, und Sie können einen benutzerdefinierten Wert eingeben.
  • DropDownList: Das ComboBox-Steuerelement funktioniert wie ein DropDownList-Steuerelement.

Der Unterschied zwischen DropDown und Simple besteht darin, wenn die Liste der Elemente angezeigt wird. Im Fall von Simple wird die Liste sofort angezeigt, wenn Sie den Fokus auf das ComboBox-Element verschieben. Im Fall von DropDown müssen Sie auf den Pfeil klicken, um die Liste der Elemente anzuzeigen.

Der DropDownList-Wert bewirkt, dass das ComboBox-Steuerelement genau wie ein DropDownList-Standardsteuerelement funktioniert. Hier gibt es jedoch einen wichtigen Unterschied. Ältere Versionen von Internet Explorer ein DropDownList-Steuerelement mit einem unendlichen Z-Index anzeigen, sodass das Steuerelement vor einem beliebigen Steuerelement angezeigt wird, das davor platziert ist. Da das ComboBox ein HTML-div-Tag <> anstelle eines HTML-Select-Tags <> rendert, berücksichtigt comboBox die z-Reihenfolge ordnungsgemäß.

Festlegen des AutoCompleteMode

Sie verwenden die ComboBox AutoCompleteMode-Eigenschaft, um anzugeben, was geschieht, wenn jemand Text in das ComboBox-Steuerelement eingibt. Diese Eigenschaft akzeptiert die folgenden möglichen Werte:

  • None : (Standardwert) Das ComboBox-Steuerelement bietet kein Verhalten für die automatische Vervollständigung.
  • Vorschlag: Das ComboBox-Objekt zeigt die Liste an und hebt das übereinstimmende Element in der Liste hervor (siehe Abbildung 8).
  • Append: Das ComboBox-Steuerelement zeigt die Liste nicht an und fügt das übereinstimmende Element aus der Liste an das von Ihnen eingegebene Element an (siehe Abbildung 9).
  • SuggestAppend: Das ComboBox zeigt sowohl die Liste an und fügt das übereinstimmende Element aus der Liste an die eingegebenen Elemente an (siehe Abbildung 10).

ComboBox macht einen Vorschlag

Abbildung 08: Das ComboBox-Steuerelement macht einen Vorschlag (Klicken Sie hier, um das Bild in voller Größe anzuzeigen)

ComboBox fügt übereinstimmenden Text an

Abbildung 09: ComboBox fügt übereinstimmenden Text an (Klicken Sie hier, um das Bild in voller Größe anzuzeigen)

ComboBox schlägt vor und fügt sie an

Abbildung 10: ComboBox schlägt vor und fügt an (Klicken Sie hier, um das Bild in voller Größe anzuzeigen)

Zusammenfassung

In diesem Tutorial haben Sie gelernt, wie Sie das ComboBox-Steuerelement verwenden, um einen festen Satz von Elementen anzuzeigen. Wir haben das ComboBox-Steuerelement sowohl an einen statischen Satz von Elementen als auch an eine Datenbanktabelle gebunden. Schließlich haben Sie gelernt, wie Sie das Verhalten des ComboBox-Steuerelements ändern, indem Sie die Eigenschaften DropDownStyle und AutoCompleteMode festlegen.