Jak mogę użyć kontrolki ComboBox? (C#)

Artykuł
07/13/2023

ComboBox to kontrolka ASP.NET AJAX, która łączy elastyczność kontrolki TextBox z listą opcji, z których użytkownicy mogą wybrać.

Celem tego samouczka jest wyjaśnienie kontrolki ComboBox zestawu narzędzi AJAX Control Toolkit. Pole ComboBox działa jak kombinacja między standardową kontrolką ASP.NET DropDownList i kontrolką TextBox. Możesz wybrać z istniejącej listy elementów lub wprowadzić nowy element.

Pole ComboBox jest podobne do rozszerzenia kontrolki AutoUzupełnianie, ale kontrolki są używane w różnych scenariuszach. Rozszerzenie Autouzupełniania wysyła zapytanie do usługi internetowej w celu uzyskania pasujących wpisów. Natomiast kontrolka ComboBox jest inicjowana przy użyciu zestawu elementów. Użycie rozszerzenia AutoUzupełnianie ma sens podczas pracy z dużym zestawem danych (miliony części samochodowych) podczas korzystania z kontrolki ComboBox ma sens podczas pracy z małym zestawem danych (dziesiątki części samochodowych).

Wybieranie z listy statycznej elementów

Zacznijmy od prostego przykładu użycia kontrolki ComboBox. Załóżmy, że chcesz wyświetlić statyczną listę elementów na liście rozwijanej. Jednak chcesz pozostawić otwartą możliwość, że lista nie została ukończona. Chcesz zezwolić użytkownikowi na wprowadzanie wartości niestandardowej na liście.

Utworzymy nową stronę ASP.NET Web Forms i użyjemy kontrolki ComboBox na stronie. Dodaj nową stronę ASP.NET do projektu i przejdź do widoku Projekt.

Jeśli chcesz użyć kontrolki ComboBox na stronie, musisz dodać kontrolkę ScriptManager do strony. Przeciągnij kontrolkę ScriptManager z karty Rozszerzenia AJAX na powierzchnię Projektant. Należy dodać kontrolkę ScriptManager w górnej części strony; Można go dodać bezpośrednio poniżej tagu formularza> otwierającego po stronie <serwera.

Następnie przeciągnij kontrolkę ComboBox na stronę. Kontrolkę ComboBox można znaleźć w przyborniku za pomocą innych kontrolek i rozszerzeń kontrolek zestawu narzędzi AJAX Control Toolkit (patrz rysunek1).

Rysunek 01. Wybieranie kontrolki ComboBox z przybornika (kliknij, aby wyświetlić obraz pełnowymiarowy)

Użyjemy kontrolki ComboBox, aby wyświetlić statyczną listę opcji. Użytkownik może wybrać konkretny poziom pikantności dla żywności z listy trzech opcji: Mild, Medium i Hot (patrz Rysunek 2).

Rysunek 02. Wybieranie ze statycznej listy elementów (kliknij, aby wyświetlić obraz pełnowymiarowy)

Istnieją dwa sposoby dodawania tych opcji do kontrolki ComboBox. Najpierw podczas umieszczania kursora myszy nad kontrolką w widoku projektowym wybierz opcję Edytuj opcje i otwórz Edytor elementów (zobacz Rysunek 3).

Rysunek 03. Edytowanie elementów ComboBox (Kliknij, aby wyświetlić obraz pełnowymiarowy)

Drugą opcją jest dodanie listy elementów między otwarciem i zamknięciem <tagów asp:ComboBox> w widoku źródłowym. Strona w liście 1 zawiera zaktualizowaną skrzynkę ComboBox zawierającą listę elementów.

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

Po otwarciu strony na liście 1 możesz wybrać jedną z istniejących opcji z pola ComboBox. Innymi słowy, pole ComboBox działa podobnie jak kontrolka DropDownList.

Jednak istnieje również możliwość wprowadzenia nowego wyboru (na przykład Super Spicy), który nie znajduje się na istniejącej liście. W związku z tym pole ComboBox działa również jak kontrolka TextBox.

Niezależnie od tego, czy wybierasz wcześniej istniejący element, czy wprowadzasz element niestandardowy, po przesłaniu formularza wybór pojawi się w kontrolce etykiety. Podczas przesyłania formularza program obsługi btnSubmit_Click wykonuje i aktualizuje etykietę (zobacz Rysunek 4).

Rysunek 04. Wyświetlanie wybranego elementu(Kliknij, aby wyświetlić obraz pełnowymiarowy)

Pole ComboBox obsługuje te same właściwości co kontrolka DropDownList na potrzeby pobierania wybranego elementu po przesłaniu formularza:

SelectedItem.Text — wyświetla wartość właściwości Text wybranego elementu.
SelectedItem.Value — wyświetla wartość właściwości Value wybranego elementu lub wyświetla tekst wpisany w polu ComboBox.
SelectedValue — taka sama jak SelectedItem.Value, z tą różnicą, że ta właściwość umożliwia określenie domyślnego (początkowego) wybranego elementu.

Jeśli wpiszesz wybór niestandardowy w polu ComboBox, wybór niestandardowy zostanie przypisany do właściwości SelectedItem.Text i SelectedItem.Value.

Wybieranie listy elementów z bazy danych

Możesz pobrać listę elementów wyświetlanych przez kombiBox z bazy danych. Na przykład można powiązać pole ComboBox z kontrolką SqlDataSource, kontrolką ObjectDataSource, linqDataSource lub jednostką EntityDataSource.

Załóżmy, że chcesz wyświetlić listę filmów w polu ComboBox. Chcesz pobrać listę filmów z tabeli bazy danych Filmy. Wykonaj następujące kroki:

Tworzenie strony o nazwie Movies.aspx
Dodaj kontrolkę ScriptManager do strony, przeciągając element ScriptManager z karty Rozszerzenia AJAX w przyborniku na stronę.
Dodaj kontrolkę ComboBox do strony, przeciągając pole ComboBox na stronę.
W widoku Projekt umieść kursor myszy nad kontrolką ComboBox i wybierz opcję Wybierz źródło danych (zobacz Rysunek 5). Zostanie uruchomiony Kreator konfiguracji źródła danych.
W kroku Wybierz źródło danych wybierz <opcję Nowe źródło> danych.
W kroku Wybierz typ źródła danych wybierz pozycję Baza danych.
W kroku Wybieranie połączenia danych wybierz bazę danych (na przykład MoviesDB.mdf).
W kroku Zapisz parametry połączenia w pliku konfiguracji aplikacji wybierz opcję zapisania parametrów połączenia.
W kroku Konfigurowanie instrukcji Select wybierz tabelę bazy danych Filmy i wybierz wszystkie kolumny.
W kroku Test zapytania kliknij przycisk Zakończ.
W kroku Wybieranie źródła danych wybierz kolumnę Tytuł pola do wyświetlenia i kolumnę Identyfikator dla pola danych (zobacz Rysunek).
Kliknij przycisk OK, aby zamknąć kreatora.

Rysunek 05. Wybieranie źródła danych(Kliknij, aby wyświetlić obraz o pełnym rozmiarze)

Rysunek 06. Wybieranie pól tekstowych i wartości danych(Kliknij, aby wyświetlić obraz pełnowymiarowy)

Po wykonaniu powyższych kroków pole ComboBox jest powiązane z kontrolką SqlDataSource reprezentującą filmy z tabeli bazy danych Filmy. Źródło strony wygląda następująco: Lista 2 (wyczyszczone formatowanie trochę).

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

Zwróć uwagę, że kontrolka ComboBox ma właściwość DataSourceID wskazującą kontrolkę SqlDataSource. Po otwarciu strony w przeglądarce zostanie wyświetlona lista filmów z bazy danych (zobacz Rysunek 7). Możesz wybrać film z listy lub wprowadzić nowy film, wpisując film w polu ComboBox.

Rysunek 07. Wyświetlanie listy filmów (kliknij, aby wyświetlić obraz pełnowymiarowy)

Ustawianie stylu listy rozwijanej

Możesz użyć właściwości ComboBox DropDownStyle, aby zmienić zachowanie kombiBox. Ta właściwość akceptuje możliwe wartości:

Lista rozwijana — (wartość domyślna) Pole comboBox wyświetla listę rozwijaną po kliknięciu strzałki i wprowadzeniu wartości niestandardowej.
Proste — Pole kombi automatycznie wyświetla listę rozwijaną i można wprowadzić wartość niestandardową.
DropDownList — pole ComboBox działa podobnie jak kontrolka DropDownList.

Różni się między listą rozwijaną a prostą jest sytuacja, w których jest wyświetlana lista elementów. W przypadku polecenia Simple lista jest wyświetlana natychmiast po przeniesieniu fokusu do pola ComboBox. W przypadku listy rozwijanej należy kliknąć strzałkę, aby wyświetlić listę elementów.

Wartość DropDownList powoduje, że kontrolka ComboBox działa tak samo jak standardowa kontrolka DropDownList. Jednak w tym miejscu istnieje ważna różnica. Starsze wersje programu Internet Explorer wyświetlają kontrolkę DropDownList z nieskończonym indeksem z, aby kontrolka była wyświetlana przed dowolną kontrolką umieszczoną przed nią. Ponieważ pole ComboBox renderuje tag div> HTML zamiast tagu wyboru> HTML<<, pole ComboBox prawidłowo szanuje kolejność z.

Ustawianie autouzupełnianiamode

Właściwość ComboBox AutoCompleteMode służy do określania, co się stanie, gdy ktoś wpisze tekst w polu ComboBox. Ta właściwość akceptuje następujące możliwe wartości:

Brak — (wartość domyślna) Pole kombi nie zapewnia żadnego zachowania autouzupełniania.
Suggest — pole ComboBox wyświetla listę i wyróżnia pasujący element na liście (zobacz Rysunek 8).
Append — pole ComboBox nie wyświetla listy i dołącza pasujący element z listy do wpisanego elementu (zobacz Rysunek 9).
SuggestAppend — zarówno pole ComboBox wyświetla listę, jak i dołącza pasujący element z listy do wpisanego elementu (zobacz Rysunek 10).

Rysunek 08. Pole kombi wydaje sugestię (kliknij, aby wyświetlić obraz w pełnym rozmiarze)

Rysunek 09. KombiBox dołącza pasujący tekst (kliknij, aby wyświetlić obraz pełnowymiarowy)

Rysunek 10. KombiBox sugeruje i dołącza (kliknij, aby wyświetlić obraz o pełnym rozmiarze)

Podsumowanie

W tym samouczku przedstawiono sposób używania kontrolki ComboBox do wyświetlania stałego zestawu elementów. Kontrolkę ComboBox powiązaliśmy zarówno ze statycznym zestawem elementów, jak i tabelą bazy danych. Na koniec przedstawiono sposób modyfikowania zachowania pola ComboBox przez ustawienie właściwości DropDownStyle i AutoCompleteMode.

Dalej