Návody použít ovládací prvek ComboBox? (VB)

Článek
07/13/2023

ComboBox je ovládací prvek ASP.NET AJAX, který kombinuje flexibilitu Textového pole se seznamem možností, ze kterých si uživatelé můžou vybrat.

Cílem tohoto kurzu je vysvětlit ovládací prvek ComboBox sady nástrojů AJAX Control Toolkit. ComboBox funguje jako kombinace mezi standardní ASP.NET DropDownList ovládací prvek a TextBox ovládací prvek. Můžete vybrat z již existujícího seznamu položek nebo zadat novou položku.

Pole ComboBox je podobné rozšiřujícímu ovládacímu prvku automatického dokončování, ale ovládací prvky se používají v různých scénářích. Rozšíření automatického dokončování se dotazuje webové služby, aby získala odpovídající položky. Ovládací prvek ComboBox je naproti tomu inicializován sadou položek. Použití extenderu automatického dokončování má smysl, když pracujete s velkou sadou dat (miliony automobilových dílů), zatímco použití ovládacího prvku ComboBox dává smysl při práci s malou sadou dat (desítky automobilových dílů).

Výběr ze statického seznamu položek

Začněme jednoduchou ukázkou použití ovládacího prvku ComboBox. Představte si, že chcete v rozevíracím seznamu zobrazit statický seznam položek. Chcete ale nechat otevřenou možnost, že seznam není úplný. Chcete uživateli povolit zadání vlastní hodnoty do seznamu.

Vytvoříme novou stránku ASP.NET Web Forms a použijeme na stránce ovládací prvek ComboBox. Přidejte do projektu novou stránku ASP.NET a přepněte do návrhového zobrazení.

Pokud chcete na stránce použít ovládací prvek ComboBox, musíte na stránku přidat ovládací prvek ScriptManager. Přetáhněte ovládací prvek ScriptManager z pod kartu ROZŠÍŘENÍ AJAX na Designer plochu. Do horní části stránky byste měli přidat ovládací prvek ScriptManager; můžete ho přidat přímo pod počáteční značku formuláře> na straně <serveru.

Dále přetáhněte ovládací prvek ComboBox na stránku. Ovládací prvek ComboBox najdete v sadě nástrojů s dalšími ovládacími prvky a rozšiřujícími ovládacími prvky AJAX Control Toolkit (viz obrázek 1).

Obrázek 01: Výběr ovládacího prvku ComboBox z panelu nástrojů (kliknutím zobrazíte obrázek v plné velikosti)

K zobrazení statického seznamu voleb použijeme ovládací prvek ComboBox. Uživatel může vybrat konkrétní úroveň kořenitosti pro své jídlo ze seznamu tří možností: Mírná, Střední a Horká (viz Obrázek 2).

Obrázek 02: Výběr ze statického seznamu položek (kliknutím zobrazíte obrázek v plné velikosti)

Existují dva způsoby, jak můžete tyto volby přidat do ovládacího prvku ComboBox. Nejprve vyberete možnost Upravit možnosti při najetí myši na ovládací prvek v návrhovém zobrazení a otevřete Editor položek (viz Obrázek 3).

Obrázek 03: Úpravy položek pole ComboBox (kliknutím zobrazíte obrázek v plné velikosti)

Druhou možností je přidat seznam položek mezi levou a pravou <značku asp:ComboBox> v zobrazení Zdroj. Stránka v výpisu 1 obsahuje aktualizované pole se seznamem, které obsahuje seznam položek.

Výpis 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>

Když otevřete stránku v seznamu 1, můžete vybrat některou z již existujících možností z pole Se seznamem. Jinými slovy, ComboBox funguje stejně jako ovládací prvek DropDownList.

Máte ale také možnost zadat novou volbu (například Super Spicy), která není v existujícím seznamu. ComboBox tedy funguje také jako ovládací prvek TextBox.

Bez ohledu na to, jestli vyberete existující položku nebo zadáte vlastní položku, se při odeslání formuláře zobrazí vaše volba v ovládacím prvku Popisek. Při odeslání formuláře obslužná rutina btnSubmit_Click spustí a aktualizuje popisek (viz obrázek 4).

Obrázek 04: Zobrazení vybrané položky (kliknutím zobrazíte obrázek v plné velikosti)

ComboBox podporuje stejné vlastnosti jako ovládací prvek DropDownList pro načtení vybrané položky po odeslání formuláře:

SelectedItem.Text – zobrazí hodnotu vlastnosti Text vybrané položky.
SelectedItem.Value – zobrazí hodnotu vlastnosti Value vybrané položky nebo zobrazí text zadaný do pole Se seznamem.
SelectedValue – stejné jako SelectedItem.Value s tím rozdílem, že tato vlastnost umožňuje zadat výchozí (počáteční) vybranou položku.

Pokud do pole ComboBox zadáte vlastní volbu, vlastní volba se přiřadí vlastnostem SelectedItem.Text i SelectedItem.Value.

Výběr seznamu položek z databáze

Seznam položek, které comboBox zobrazí, můžete načíst z databáze. Můžete například vytvořit vazbu ComboBox k ovládacímu prvku SqlDataSource, ovládacímu prvku ObjectDataSource, LinqDataSource nebo EntityDataSource.

Představte si, že chcete zobrazit seznam filmů v poli Se seznamem. Chcete načíst seznam filmů z tabulky databáze Filmy. Postupujte takto:

Vytvoření stránky s názvem Movies.aspx
Přidejte na stránku ovládací prvek ScriptManager přetažením scriptManageru z pod kartu ROZŠÍŘENÍ AJAX v sadě nástrojů na stránku.
Přidejte na stránku ovládací prvek ComboBox přetažením pole ComboBox na stránku.
V návrhovém zobrazení najeďte myší na ovládací prvek ComboBox a vyberte možnost Zvolit zdroj dat (viz Obrázek 5). Spustí se Průvodce konfigurací zdroje dat.
V kroku Zvolit zdroj dat vyberte <možnost Nový zdroj> dat.
V kroku Zvolit typ zdroje dat vyberte Databáze.
V kroku Zvolte datové připojení vyberte svoji databázi (například MoviesDB.mdf).
V kroku Uložit připojovací řetězec do konfiguračního souboru aplikace vyberte možnost pro uložení připojovacího řetězce.
V kroku Konfigurovat příkaz Select vyberte tabulku databáze Movies a vyberte všechny sloupce.
V kroku Testovací dotaz klikněte na tlačítko Dokončit.
Zpět v kroku Zvolit zdroj dat vyberte sloupec Název pro pole, které se má zobrazit, a sloupec Id pro datové pole (viz obrázek).
Kliknutím na tlačítko OK průvodce zavřete.

Obrázek 05: Volba zdroje dat (kliknutím zobrazíte obrázek v plné velikosti)

Obrázek 06: Volba datových textových a hodnotových polí (kliknutím zobrazíte obrázek v plné velikosti)

Po dokončení výše uvedených kroků je ComboBox vázán na ovládací prvek SqlDataSource, který představuje filmy z tabulky databáze Movies. Zdroj stránky vypadá jako Výpis 2 (trochu jsem vyčistil formátování).

Výpis 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>

Všimněte si, že ComboBox ovládací prvek má Vlastnost DataSourceID, která odkazuje na ovládací prvek SqlDataSource. Když stránku otevřete v prohlížeči, zobrazí se seznam filmů z databáze (viz Obrázek 7). Můžete buď vybrat film ze seznamu, nebo zadat nový film zadáním videa do pole Se seznamem.

Obrázek 07: Zobrazení seznamu filmů (kliknutím zobrazíte obrázek v plné velikosti)

Nastavení dropDownStyle

Můžete použít ComboBox DropDownStyle vlastnost změnit chování ComboBox. Tato vlastnost přijímá možné hodnoty:

Rozevírací seznam – (výchozí hodnota) Pole Se seznamem zobrazí rozevírací seznam, když kliknete na šipku a můžete zadat vlastní hodnotu.
Jednoduché – Pole se seznamem automaticky zobrazí rozevírací seznam a můžete zadat vlastní hodnotu.
DropDownList – ComboBox funguje stejně jako ovládací prvek DropDownList.

Mezi rozevíracími seznamy a jednoduchými položkami se liší, když se zobrazí seznam položek. V případě Simple se seznam zobrazí okamžitě, když přesunete fokus na pole Se seznamem. V případě rozevíracího seznamu je nutné kliknout na šipku, aby se zobrazil seznam položek.

Hodnota DropDownList způsobí, že comboBox ovládací prvek funguje stejně jako standardní DropDownList ovládací prvek. V tom je ale důležitý rozdíl. Starší verze Internet Exploreru zobrazují ovládací prvek DropDownList s nekonečným z-indexem, takže se ovládací prvek zobrazí před libovolným ovládacím prvek umístěným před ním. Vzhledem k tomu, že ComboBox vykresluje <html značku div> místo značky HTML <select> , ComboBox správně respektuje pořadí z.

Nastavení automatického dokončováníMode

Pomocí comboBox AutoCompleteMode vlastnost určit, co se stane, když někdo zadá text do Pole se seznamem. Tato vlastnost přijímá následující možné hodnoty:

None – (výchozí hodnota) ComboBox neposkytuje žádné chování při automatickém dokončování.
Navrhnout – Pole se seznamem zobrazí seznam a zvýrazní odpovídající položku v seznamu (viz Obrázek 8).
Připojit – Pole se seznamem nezobrazí a připojí odpovídající položku ze seznamu k zadanému textu (viz Obrázek 9).
SuggestAppend – Pole se seznamem zobrazí seznam a připojí odpovídající položku ze seznamu k tomu, co jste zadali (viz Obrázek 10).

Obrázek 08: Pole se seznamem vytvoří návrh (kliknutím zobrazíte obrázek v plné velikosti)

Obrázek 09: Pole se seznamem připojí odpovídající text (kliknutím zobrazíte obrázek v plné velikosti)

Obrázek 10: Pole se seznamem navrhuje a připojuje (kliknutím zobrazíte obrázek v plné velikosti)

Souhrn

V tomto kurzu jste zjistili, jak pomocí ovládacího prvku ComboBox zobrazit pevnou sadu položek. Vázali jsme ovládací prvek ComboBox na statickou sadu položek a na tabulku databáze. Nakonec jste zjistili, jak změnit chování ComboBox nastavením jeho vlastností DropDownStyle a AutoCompleteMode.

Předchozí

Sdílet prostřednictvím