Freigeben über

Wie verwende ich das ComboBox-Steuerelement? (C#)

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 ist die Erläuterung des ComboBox-Steuerelements im AJAX Control Toolkit. 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.

Das ComboBox-Steuerelement ähnelt dem Extender des AutoVervollständigen-Steuerelements, die Steuerelemente werden jedoch 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 AutoComplete-Extenders ist sinnvoll, wenn Sie mit einer großen Datenmenge (Millionen von Autoteilen) arbeiten, während das ComboBox-Steuerelement sinnvoll ist, wenn Sie mit einer kleinen Datenmenge (Dutzende 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 abgeschlossen 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 dem Projekt die neue ASP.NET-Seite 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 von unterhalb der Registerkarte AJAX-Erweiterungen auf die Designeroberflä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 Steuerelement-Extendern (siehe Abbildung1).

Einfaches Formular zum Erstellen einer Visitenkarte

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

Wir verwenden das ComboBox-Steuerelement, um eine statische Liste der Auswahlmöglichkeiten anzuzeigen. Der Benutzer kann ein bestimmtes Maß an Schärfe für sein Essen aus einer Liste mit drei Auswahlmöglichkeiten 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, um das Bild in voller Größe anzuzeigen)

Es gibt zwei Möglichkeiten, diese Auswahlmöglichkeiten dem ComboBox-Steuerelement hinzuzufügen. Wählen Sie zuerst die Aufgabenoption "Bearbeitungsoption" aus, wenn Sie mit dem Mauszeiger auf das Steuerelement in der Entwurfsansicht zeigen, und öffnen Sie dann den Bearbeitungseditor (siehe Abbildung 3).

Bearbeiten von ComboBox-Elementen

Abbildung 03: Bearbeiten von ComboBox-Elementen(Klicken, 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 Eintrag 1 enthält das aktualisierte Kombinationsfeld, die die Liste der Elemente enthält.

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

Wenn Sie die Seite in Listing 1 öffnen, können Sie eine der bereits vorhandenen Optionen aus dem Kombinationsfeld auswählen. Das ComboBox-Steuerelement funktioniert also genauso wie ein DropDownList-Steuerelement.

Sie haben jedoch auch die Möglichkeit, eine neue Auswahl (z. B. Super Spicy) einzugeben, die sich nicht in der vorhandenen Liste befindet. 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 Absenden des Formulars im Bezeichnungsfeld angezeigt. Wenn Sie das Formular übermitteln, wird der btnSubmit_Click-Handler ausgeführt und aktualisiert die Bezeichnung (siehe Abbildung 4).

Anzeigen des ausgewählten Elements

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

Das ComboBox-Steuerelement unterstützt dieselben Eigenschaften wie das DropDownList-Steuerelement zum Abrufen des ausgewählten Elements, nachdem ein Formular gesendet wurde:

  • 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 an oder zeigt den Text an, der in das ComboBox-Objekt eingegeben wurde.
  • SelectedValue – Identisch mit SelectedItem.Value, mit der Ausnahme, dass Sie mit dieser Eigenschaft das ausgewählte Standardelement (initial) angeben können.

Wenn Sie eine benutzerdefinierte Auswahl in das ComboBox-Steuerelement 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 abrufen, die die ComboBox aus einer Datenbank anzeigt. Sie können beispielsweise 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-Steuerelement anzeigen. Sie möchten die Liste der Filme aus der Datenbanktabelle "Filme" 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 aus 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 Konfigurations-Assistent für Datenquellen 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 Wählen Sie die Datenverbindung Ihre Datenbank (z. B. MoviesDB.mdf) aus.
  8. Wählen Sie im Schritt "Verbindungszeichenfolge in der Anwendungs-Konfigurationsdatei speichern" die Option zum Speichern Ihrer Verbindungszeichenfolge aus.
  9. Im Schritt "Konfigurieren der Auswahlanweisung" wählen Sie die Datenbanktabelle "Filme" aus und dann alle Spalten.
  10. Klicken Sie im Schritt "Testabfrage " auf die Schaltfläche "Fertig stellen".
  11. Zurück im Schritt " Datenquelle auswählen" wählen Sie 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 das Bild in voller Größe anzuzeigen)

Auswählen der Datentext- und Wertfelder

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

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

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

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-Steuerelement 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 drei mögliche Werte.

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

Der Unterschied zwischen DropDown und Simple besteht darin, dass die Liste der Elemente angezeigt wird. Im Fall von "Einfach" wird die Liste sofort angezeigt, wenn Sie den Fokus auf die ComboBox setzen. 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 wie ein standardmäßiges DropDownList-Steuerelement funktioniert. Hier gibt es jedoch einen wichtigen Unterschied. Ältere Versionen von Internet Explorer zeigen ein DropDownList-Steuerelement mit einem unendlichen Z-Index an, sodass das Steuerelement vor jedem Steuerelement angezeigt wird, das davor platziert wird. Da das ComboBox-Element anstelle eines HTML-Auswahltags <> ein HTML-Div-Tag <> rendert, berücksichtigt das ComboBox-Steuerelement die Z-Sortierung ordnungsgemäß.

Festlegen des AutoComplete-Modus

Mit der ComboBox AutoCompleteMode-Eigenschaft geben Sie an, was passiert, wenn jemand Text in die ComboBox eingibt. Diese Eigenschaft akzeptiert die folgenden möglichen Werte:

  • None - (Standardwert) Die ComboBox stellt kein automatisches Vervollständigungsverhalten bereit.
  • Vorschlag – Das ComboBox-Steuerelement zeigt die Liste an und hebt das passende 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 den eingegebenen Text an (siehe Abbildung 9).
  • SuggestAppend – Die ComboBox zeigt die Liste an und fügt das übereinstimmende Element aus der Liste an das, was Sie eingegeben haben, an (siehe Abbildung 10).

Das Kombinationsfeld macht einen Vorschlag

Abbildung 08: Die ComboBox schlägt eine Auswahl vor (Klicken Sie, um das Bild in voller Größe anzuzeigen)

ComboBox fügt übereinstimmenden Text an

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

Das ComboBox-Steuerelement schlägt vor und fügt an.

Abbildung 10: Das ComboBox-Steuerelement schlägt vor und fügt Elemente hinzu(Klicken Sie, um das Bild in voller Größe anzuzeigen)

Zusammenfassung

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

Nächster

  • Last updated on