Bagaimana Anda mengikat dropdown di html?

Bind dropdownlist menggunakan jquery. -
Dalam banyak situasi kita perlu mengikat drop down secara dinamis, misalnya. dari database atau lainnya. Jadi kita bisa menggunakan jquery untuk mengikat dropdown menggunakan loop for. Contohnya ditunjukkan di bawah ini

Sintaksis. -

$("#ddlID").append($("").val(i).html(j));

Angka





   

Angka.


Iklan

Email IniBlogThis. Bagikan ke TwitterBagikan ke Facebook

Pada artikel ini saya akan menjelaskan dengan sebuah contoh, bagaimana cara mengikat (mengisi) DropDownList dari ViewModel di ASP. Pisau cukur MVC bersih

DropDownList akan diisi dari database menggunakan kelas Model dan Html. Metode DropDownListFor Helper

Catatan . Untuk pemula dalam menggunakan ADO. Bersih dengan ASP. Net MVC, silakan lihat artikel saya ASP. MVC bersih. RIBUT. Tutorial Net dengan contoh.

Basis data

Artikel ini menggunakan tabel bernama Fruits yang skemanya ditentukan sebagai berikut

Tabel Buah memiliki rekaman berikut

Catatan . Anda dapat mengunduh tabel database SQL dengan mengklik tautan unduhan di bawah ini.

Unduh file SQL

Ruang nama

Anda perlu mengimpor ruang nama berikut

menggunakan Sistem. Konfigurasi;

menggunakan Sistem. Data. SqlClient;

menggunakan Sistem. Koleksi. Umum;

Model

Kelas Model berikut memiliki tiga properti Fruits, FruitId dan Quantity

Properti Fruits adalah daftar Generik dari kelas SelectListItem yang merupakan ASP bawaan. Kelas MVC bersih. Itu memiliki semua properti yang diperlukan untuk mengisi DropDownList

publik kelas FruitModel

{

    publik Daftar<SelectListItem> Fruits { get; set; }

    publik int?get; set; }

    publik int?get; set; }

}

Pengontrol

Controller terdiri dari dua metode Action

Metode tindakan untuk menangani operasi GET

Di dalam metode Action ini, metode PopulateFruits dipanggil

Di dalam metode PopulateFruits, record dari tabel Fruits diambil menggunakan DataReader dan daftar generik kelas SelectListItem diisi

FruitName disimpan di properti Text sedangkan FruitId disimpan di properti Value

Akhirnya objek kelas FruitModel dikembalikan ke View

Metode tindakan untuk menangani operasi POST

Metode Aksi ini menangani panggilan yang dibuat dari fungsi POST dari View

Catatan . Contoh ini menggunakan objek kelas Model untuk menangkap nilai bidang Formulir, untuk lebih jelasnya silakan lihat artikel saya ASP. MVC bersih. Contoh Formulir Kirim (Posting).

Saat Formulir dikirimkan, nilai yang diposting ditangkap melalui objek kelas FruitModel

Kemudian metode PopulateFruits dipanggil dan Buah yang dipilih diambil menggunakan ekspresi Lambda

Akhirnya nama Buah yang dipilih dan Kuantitasnya diatur menjadi objek ViewBag yang nantinya akan ditampilkan di View menggunakan JavaScript Alert Message Box

Catatan . Untuk detail lebih lanjut tentang menampilkan pesan menggunakan JavaScript Alert MessageBox, silakan lihat artikel saya ASP. MVC bersih. Tampilkan Pesan dari Pengontrol dalam Tampilan menggunakan JavaScript Alert MessageBox.

publik kelas HomeController. Pengontrol

{

    // DAPATKAN. Rumah

    public ActionResult Index()

{

        FruitModel buah = baru FruitModel();

buah. Fruits = PopulateFruits();

        kembali Lihat(buah);

}

    [HttpPost]

    publik ActionResult Indeks(FruitModel fruit)

{

buah. Fruits = PopulateFruits();

        var selectedItem = buah. Buah-buahan. Temukan (p => p. Nilai == buah. FruitId. ToString());

        jika (Item terpilih. = null)

{

            item yang dipilih. Dipilih = benar;

            ViewBag. Pesan = "Buah. " + item yang dipilih. Teks;

            ViewBag. Pesan += "\\nQuantity. " + buah. Kuantitas;

}

        kembali Lihat(buah);

}

    pribadi statis Daftar<SelectListItem> PopulateFruits()

{

        Daftar<SelectListItem> item = new List<SelectListItem>();

        string constr = Pengelola Konfigurasi. ConnectionStrings["Constring"]. ConnectionString;

        menggunakan (SqlConnection con = new SqlConnection(constr))

{

            string query = " SELECT FruitName, FruitId FROM Fruits";

            menggunakan (SqlCommand cmd = new SqlCommand(query))

{

cmd. Koneksi = con;

menipu. Membuka();

                menggunakan (SqlDataReader sdr = cmd. ExecuteReader())

{

                    sementara (sdr. Baca())

{

                        item. Tambahkan(baru SelectListItem

{

                            Teks = sdr["FruitName"]. ToString(),

                            Nilai = sdr["FruitId"]. ToString()

});

}

}

menipu. Menutup();

}

}

        pengembalian item;

}

}

Melihat

Di dalam View, pada baris pertama kelas FruitModel dideklarasikan sebagai Model untuk View

Tampilan terdiri dari Formulir HTML yang telah dibuat menggunakan HTML. Metode BeginForm dengan parameter berikut

ActionName – Nama Tindakan. Dalam hal ini namanya adalah Index

Nama Pengontrol – Nama Pengontrol. Dalam hal ini namanya Rumah

FormMethod – Ini menentukan Metode Formulir i. e. DAPATKAN atau POSTING. Dalam hal ini akan diatur ke POST

Formulir terdiri dari DropDownList, TextBox, dan Tombol Kirim

DropDownList dihasilkan menggunakan Html. Metode DropDownListFor Html Helper

Parameter pertama adalah ekspresi Lambda untuk menentukan properti yang akan menampung Nilai yang Dipilih dari DropDownList saat Formulir dikirimkan

Parameter kedua adalah properti kelas Model untuk mengisi DropDownList i. e. sumber datanya

Terakhir, parameter ketiga dan terakhir adalah teks Item Default dari DropDownList. Jika tidak ditentukan tidak akan ada item default di DropDownList

Ketika Tombol Kirim diklik, Formulir dikirimkan dan nilai Buah yang dipilih serta Kuantitas dikirim ke Pengontrol

Bagaimana cara mengikat daftar dropdown?

Bagaimana cara membuat penurunan dinamis

Bagaimana cara mengikat dropdown HTML dalam JavaScript?

Pengikatan mana yang digunakan untuk mengisi nilai dropdown?