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

Artykuł
07/13/2023

ComboBox to ASP.NET kontrolka 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ć jedną ze wstępnie 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łnianie 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. Korzystanie z rozszerzenia AutoUzupełnianie ma sens podczas pracy z dużym zestawem danych (milionami 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 jest kompletna. 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 otwierającego tagu formularza> 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 o pełnym rozmiarze)

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

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

Istnieją dwa sposoby dodawania tych opcji do kontrolki ComboBox. Najpierw należy wybrać opcję Zadania Edytuj opcje po umieszczeniu wskaźnika myszy nad kontrolką w widoku Projektu i otwarciu Edytora elementów (zobacz Rysunek 3).

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

Drugą opcją jest dodanie listy elementów między otwierającymi i zamykającymi <tagami asp:ComboBox> w widoku źródłowym. Strona na liście 1 zawiera zaktualizowaną kontrolkę ComboBox zawierającą listę elementów.

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

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 tak samo jak kontrolka DropDownList.

Jednak możesz również wprowadzić nowy wybór (na przykład Super Spicy), który nie znajduje się na istniejącej liście. Dlatego 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 zostanie wyświetlony w kontrolce etykiety. Po przesłaniu 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 do 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

Listę elementów wyświetlanych przez comboBox można pobrać z bazy danych. Można na przykład powiązać pole ComboBox z kontrolką SqlDataSource, kontrolką ObjectDataSource, linqDataSource lub 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ść wskaźnik 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 Wybierz połączenie danych wybierz bazę danych (na przykład MoviesDB.mdf).
W kroku Zapisz parametry połączenia w pliku konfiguracji aplikacji wybierz opcję zapisywania parametrów połączenia.
W kroku Konfigurowanie instrukcji Select wybierz tabelę bazy danych Filmy i wybierz wszystkie kolumny.
W kroku Zapytanie testowe kliknij przycisk Zakończ.
Po powrocie do kroku Wybieranie źródła danych wybierz kolumnę Tytuł pola do wyświetlenia i kolumnę Id dla pola danych (zobacz Rysunek).
Kliknij przycisk OK, aby zamknąć kreatora.

Rysunek 05. Wybieranie źródła danych (kliknij, aby wyświetlić obraz pełnowymiarowy)

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 jak Lista 2 (posprzątałem formatowanie trochę).

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

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 pola ComboBox. Ta właściwość akceptuje możliwe wartości:

Lista rozwijana — (wartość domyślna) Pole kombi 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 tak samo jak kontrolka DropDownList.

Różnice między listą rozwijaną i prostą jest wtedy, gdy zostanie wyświetlona lista elementów. W przypadku funkcji 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ńczoną indeksem z, dzięki czemu kontrolka będzie wyświetlana przed dowolną kontrolką umieszczoną przed nią. Ponieważ pole ComboBox renderuje tag div> HTML <zamiast tagu select> HTML<, pole ComboBox prawidłowo uwzględnia porządkowanie z.

Ustawianie trybu autouzupełniania

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.

Poprzednie

Udostępnij za pośrednictwem