Contoh Cascading DropDownList – ASP.NET AJAX Tutorial

Dalam proses pengisian form disuatu halaman web di internet pasti sudah sering kamu temui cascading dropdownlist. Misalkan ketika kamu diminta mengisikan informasi negara pada pilihan dropdownlist pertama, maka setelah kamu memilih negara, pada isian berikutnya akan dimunculkan pilihan profinsi atau negara bagian berdasarkan negara yang telah kamu pilih sebelumnya. Tanpa menggunakan teknik AJAX, umumnya akan menemui kendala saat proses pengambilan item dilakukan dari database. Hal ini akan menyebabkan terjadi proses flicker dan yang lebih parah user dapat saja merasa kehilangan jejak pengisian data.

Dengan menggunakan AJAX proses tunggu tidak akan menyebabkan pengguna situs merasa terganggu. Pada contoh berikut ini akan diberikan sebuah contoh penerapan teknik AJAX pada dropdownlist dengan menggunakan pengisian hirarki untuk memilih data daftar pemain sepak bola berdasarkan negara liga dan klub yang bersangkutan. Untuk itu diperlukan sebuah database (Bisa dibuat dengan SQLServer Express) dengan isian table kurang lebih sebagai berikut :

Nama	Posisi	Club	Negara
Adrea Pirlo	MC	AC Milan	Italy
Christiano Ronaldo	RWM	MU	Inggris
Daniel De Rossi	MC	AS Roma	Italy
Fernando Torres	ST	Liverpool	Inggris
Francesco Totti	CF	AS Roma	Italy
Gennaro Gatuso	MC	AC Milan	Italy
Javier Mascerano	MC	Liverpool	Inggris
Kaka	MF	AC Milan	Italy
Manchini	MF	AS Roma	Italy
Pato	ST	AC Milan	Italy
Paul Scholl	MF	MU	Inggris
Rio Ferdinand	CB	MU	Inggris
Ronaldo	CF	AC Milan	Italy
Ryan Gigs	LWM	MU	Inggris
Steven Gerrard	MF	Liverpool	Inggris
Van Persie	CF	Arsenal	Inggris
Xaby Allonso	MC	Liverpool	Inggris

Kemudian buat Web Site baru pilih ASP.NET AJAX Enabled Web Site. Kemudian pada ScriptManager tambahkan UpdatePanel. Pada UpdatePanel tambahkan 3 SQLDataSource, 2 DropDownList dan 1 buah GridView. Desain tampilannya adalah sebagai berikut :

Pada SQLDataSource1 seting koneksi ke database yang sudah dibuat diatas (yang berisi daftar pemain). Kemudian atur statementnya sebagai berikut :

Kemudian pada DropDownList1 atur DataSourceID ke SQLDataSource1. Jangan lupa untuk mengeset AutoPostBack ke True.

Pada SQLDataSource2 Atur koneksinya kemudian atur statementnya pada column pilih club dan pilih check pada Return Only Unique Rows kemudian Klik tombol Where dan atur propertinya menjadi sebagai berikut :

Kemudian pada DropDownList2 atur DataSourceID ke SQLDataSource2. Jangan lupa untuk mengeset AutoPostBack ke True.

Pada SQLDataSource3 Atur koneksinya kemudian atur statementnya pada column pilih Nama dan pilih check pada Return Only Unique Rows kemudian Klik tombol Where dan atur propertinya menjadi sebagai berikut :

• Column : Club
• Operator : =
• Source : Control
• ID : DropDownList2
• Default Value : Pilih

Kemudian pada GridView atur DataSourceID ke SQLDataSource3. Ubah AutoFormat ke Slate.

Nah lengkap sudah program yang kita buat. Sekarang sudah bisa kamu jalankan dengan menekan tombol Ctrl + F5. Hasilnya kurang lebih sebagai berikut :

Negara :

Inggris Italy Club :

Arsenal Liverpool MU Pemain :

Nama
Fernando Torres
Javier Mascerano
Steven Gerrard
Xaby Allonso