Bagaimana cara menggunakan Kontrol ComboBox? (VB)

2023-07-13

ComboBox adalah kontrol AJAX ASP.NET yang menggabungkan fleksibilitas Kotak Teks dengan daftar opsi yang dapat dipilih pengguna.

Tujuan dari tutorial ini adalah untuk menjelaskan kontrol AJAX Control Toolkit ComboBox. ComboBox berfungsi seperti kombinasi antara kontrol DropDownList ASP.NET standar dan kontrol TextBox. Anda dapat memilih dari daftar item yang sudah ada sebelumnya atau memasukkan item baru.

ComboBox mirip dengan extender kontrol AutoComplete, tetapi kontrol digunakan dalam skenario yang berbeda. Extender AutoComplete meminta layanan web untuk mendapatkan entri yang cocok. Kontrol ComboBox, sebaliknya, diinisialisasi dengan sekumpulan item. Menggunakan extender AutoComplete masuk akal ketika Anda bekerja dengan sekumpulan besar data (jutaan bagian mobil) saat menggunakan kontrol ComboBox masuk akal saat bekerja dengan sekumpulan kecil data (puluhan bagian mobil).

Memilih dari Daftar Item Statis

Mari kita mulai dengan sampel sederhana menggunakan kontrol ComboBox. Bayangkan Anda ingin menampilkan daftar statis item dalam daftar dropdown. Namun, Anda ingin membiarkan terbuka kemungkinan bahwa daftar tidak lengkap. Anda ingin mengizinkan pengguna memasukkan nilai kustom ke dalam daftar.

Kita akan membuat halaman ASP.NET Web Forms baru dan menggunakan kontrol ComboBox di halaman. Tambahkan halaman ASP.NET baru ke proyek Anda dan beralihlah ke tampilan Desain.

Jika Anda ingin menggunakan kontrol ComboBox di halaman maka Anda harus menambahkan kontrol ScriptManager ke halaman. Seret kontrol ScriptManager dari bawah tab Ekstensi AJAX ke permukaan Designer. Anda harus menambahkan kontrol ScriptManager di bagian atas halaman; Anda dapat menambahkannya tepat di bawah tag formulir> sisi <server pembuka.

Selanjutnya, seret kontrol ComboBox ke halaman. Anda dapat menemukan kontrol ComboBox di Kotak Alat dengan kontrol Toolkit Kontrol AJAX lainnya dan extender kontrol (lihat gambar1).

Gambar 01: Memilih kontrol ComboBox dari kotak alat (Klik untuk melihat gambar ukuran penuh)

Kita akan menggunakan kontrol ComboBox untuk menampilkan daftar pilihan statis. Pengguna dapat memilih tingkat pedas tertentu untuk makanan mereka dari daftar tiga pilihan: Ringan, Sedang, dan Panas (lihat Gambar 2).

Gambar 02: Memilih dari daftar statis item (Klik untuk melihat gambar ukuran penuh)

Ada dua cara untuk menambahkan pilihan ini ke kontrol ComboBox. Pertama, Anda memilih opsi tugas Opsi Edit saat mengarahkan mouse Anda ke atas kontrol dalam tampilan Desain dan membuka Editor Item (lihat Gambar 3).

Gambar 03: Mengedit item ComboBox (Klik untuk melihat gambar ukuran penuh)

Opsi kedua adalah menambahkan daftar item di antara tag asp:ComboBox> pembuka dan penutupan <di tampilan Sumber. Halaman di Daftar 1 berisi ComboBox yang diperbarui yang memiliki daftar item.

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

Saat membuka halaman di Daftar 1, Anda dapat memilih salah satu opsi yang sudah ada sebelumnya dari ComboBox. Dengan kata lain, ComboBox berfungsi seperti kontrol DropDownList.

Namun, Anda juga memiliki opsi untuk memasukkan pilihan baru (misalnya, Super Pedas) yang tidak ada dalam daftar yang ada. Jadi, ComboBox juga berfungsi seperti kontrol TextBox.

Terlepas dari apakah Anda memilih item yang sudah ada sebelumnya atau Anda memasukkan item kustom, saat Anda mengirimkan formulir, pilihan Anda muncul di kontrol label. Saat Anda mengirimkan formulir, handler btnSubmit_Click menjalankan dan memperbarui label (lihat Gambar 4).

Gambar 04: Menampilkan item yang dipilih (Klik untuk melihat gambar ukuran penuh)

ComboBox mendukung properti yang sama dengan kontrol DropDownList untuk mengambil item yang dipilih setelah formulir dikirimkan:

SelectedItem.Text - Menampilkan nilai properti Teks dari item yang dipilih.
SelectedItem.Value - Menampilkan nilai properti Nilai dari item yang dipilih atau menampilkan teks yang diketik ke dalam Kotak Kombo.
SelectedValue - Sama seperti SelectedItem.Value kecuali bahwa properti ini memungkinkan Anda menentukan item default (awal) yang dipilih.

Jika Anda mengetik pilihan kustom ke dalam ComboBox, maka pilihan kustom ditetapkan ke properti SelectedItem.Text dan SelectedItem.Value.

Memilih Daftar Item dari Database

Anda dapat mengambil daftar item yang ditampilkan ComboBox dari database. Misalnya, Anda dapat mengikat ComboBox ke kontrol SqlDataSource, kontrol ObjectDataSource, LinqDataSource, atau EntityDataSource.

Bayangkan Anda ingin menampilkan daftar film di ComboBox. Anda ingin mengambil daftar film dari tabel database Film. Ikuti langkah-langkah berikut:

Membuat halaman bernama Movies.aspx
Tambahkan kontrol ScriptManager ke halaman dengan menyeret ScriptManager dari bawah tab Ekstensi AJAX di Kotak Alat ke halaman.
Tambahkan kontrol ComboBox ke halaman dengan menyeret ComboBox ke halaman.
Dalam tampilan Desain, arahkan mouse Anda ke kontrol ComboBox dan pilih opsi tugas Pilih Sumber Data (lihat Gambar 5). Panduan Konfigurasi Sumber Data diluncurkan.
Di langkah Pilih Sumber Data , pilih <opsi Sumber> data baru.
Di langkah Pilih Jenis Sumber Data , pilih Database.
Di langkah Pilih Koneksi Data Anda , pilih database Anda (misalnya, MoviesDB.mdf).
Di langkah Simpan String Koneksi ke File Konfigurasi Aplikasi , pilih opsi untuk menyimpan string koneksi Anda.
Di langkah KonfigurasiKan Pernyataan Pilih , pilih tabel database Film dan pilih semua kolom.
Di langkah Uji Kueri , klik tombol Selesai.
Kembali ke langkah Pilih Sumber Data , pilih kolom Judul untuk bidang yang akan ditampilkan dan kolom Id untuk bidang data (lihat Gambar).
Klik tombol OK untuk menutup wizard.

Gambar 05: Memilih sumber data (Klik untuk melihat gambar ukuran penuh)

Gambar 06: Memilih teks data dan bidang nilai (Klik untuk melihat gambar ukuran penuh)

Setelah Anda menyelesaikan langkah-langkah di atas, ComboBox terikat ke kontrol SqlDataSource yang mewakili film dari tabel database Film. Sumber untuk halaman terlihat seperti Daftar 2 (saya membersihkan pemformatan sedikit).

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

Perhatikan bahwa kontrol ComboBox memiliki properti DataSourceID yang menunjuk ke kontrol SqlDataSource. Saat Anda membuka halaman di browser, daftar film dari database ditampilkan (lihat Gambar 7). Anda dapat memilih film dari daftar atau memasukkan film baru dengan mengetikkan film ke dalam Kotak Kombo.

Gambar 07: Menampilkan daftar film (Klik untuk melihat gambar ukuran penuh)

Mengatur DropDownStyle

Anda dapat menggunakan properti ComboBox DropDownStyle untuk mengubah perilaku ComboBox. Properti ini menerima kemungkinan nilai:

DropDown - (nilai default) Kotak Kombo menampilkan daftar dropdown saat Anda mengklik panah dan Anda bisa memasukkan nilai kustom.
Sederhana - ComboBox menampilkan daftar dropdown secara otomatis dan Anda dapat memasukkan nilai kustom.
DropDownList - ComboBox berfungsi seperti kontrol DropDownList.

Perbedaan antara DropDown dan Simple adalah ketika daftar item ditampilkan. Dalam kasus Sederhana, daftar segera ditampilkan saat Anda memindahkan fokus ke ComboBox. Dalam kasus DropDown, Anda harus mengklik panah untuk melihat daftar item.

Nilai DropDownList menyebabkan kontrol ComboBox berfungsi seperti kontrol DropDownList standar. Namun, ada perbedaan penting di sini. Versi Lama Internet Explorer menampilkan kontrol DropDownList dengan indeks-z tak terbatas sehingga kontrol akan muncul di depan kontrol apa pun yang ditempatkan di depannya. Karena ComboBox merender tag html <div> alih-alih tag pilih> HTML<, ComboBox dengan benar menghormati urutan z.

Mengatur AutoCompleteMode

Anda menggunakan properti ComboBox AutoCompleteMode untuk menentukan apa yang terjadi saat seseorang mengetikan teks ke dalam ComboBox. Properti ini menerima nilai yang mungkin berikut ini:

None - (nilai default) ComboBox tidak menyediakan perilaku lengkapi otomatis apa pun.
Sarankan - ComboBox menampilkan daftar dan menyoroti item yang cocok dalam daftar (lihat Gambar 8).
Tambahkan - ComboBox tidak menampilkan daftar dan menambahkan item yang cocok dari daftar ke apa yang telah Anda ketik (lihat Gambar 9).
SuggestAppend - ComboBox menampilkan daftar dan menambahkan item yang cocok dari daftar ke apa yang telah Anda ketik (lihat Gambar 10).

Gambar 08: ComboBox membuat saran (Klik untuk melihat gambar ukuran penuh)

Gambar 09: ComboBox menambahkan teks yang cocok (Klik untuk melihat gambar ukuran penuh)

Gambar 10: ComboBox menyarankan dan menambahkan (Klik untuk melihat gambar ukuran penuh)

Ringkasan

Dalam tutorial ini, Anda mempelajari cara menggunakan kontrol ComboBox untuk menampilkan sekumpulan item tetap. Kami mengikat kontrol ComboBox ke sekumpulan item statis dan ke tabel database. Terakhir, Anda mempelajari cara memodifikasi perilaku ComboBox dengan mengatur properti DropDownStyle dan AutoCompleteMode-nya.

Sebelumnya

Bagikan melalui