Kontrol RadioButton dan kontrol RadioButtonList memungkinkan pengguna untuk memilih dari sejumlah kecil opsi yang telah ditentukan sebelumnya dan saling eksklusif.
1. Fungsi
Anda dapat menggunakan kontrol CheckBox dan kontrol CheckBoxList untuk melakukan operasi berikut:
· Menyebabkan postback halaman ketika tombol radio dipilih.
·Menangkap interaksi pengguna ketika pengguna memilih tombol radio.
· Ikat setiap tombol radio ke data dalam database.
2. Latar Belakang
Saat menambahkan tombol radio ke halaman Web ASP.NET, Anda dapat menggunakan dua kontrol server Web: kontrol RadioButton tunggal atau kontrol RadioButtonList. Kedua kontrol memungkinkan pengguna untuk memilih dari serangkaian kecil opsi yang telah ditentukan sebelumnya dan saling eksklusif. Anda dapat menggunakan kontrol ini untuk menentukan sejumlah tombol radio berlabel dan mengaturnya secara horizontal atau vertikal.
Anda dapat menambahkan kontrol RadioButton individual ke halaman dan menggunakan kontrol satu per satu. Biasanya dua atau lebih tombol terpisah dikelompokkan menjadi satu.
Alternatifnya, Anda bisa menggunakan kontrol RadioButtonList, yang merupakan kontrol tunggal yang bisa digunakan sebagai kontrol induk untuk grup item daftar tombol radio. Kontrol ini diturunkan dari kelas dasar ListControl dan oleh karena itu cara kerjanya sangat mirip dengan kontrol server Web ListBox, DropDownList, BulletedList, dan CheckBoxList. Banyak prosedur untuk menggunakan kontrol RadioButtonList sama dengan kontrol server Web daftar lainnya.
Kedua jenis kontrol tersebut memiliki kelebihannya masing-masing. Menggunakan kontrol RadioButton tunggal memberi Anda kontrol lebih besar terhadap tata letak grup tombol radio dibandingkan menggunakan kontrol RadioButtonList. Misalnya, Anda dapat menyertakan teks non-tombol radio di antara tombol radio.
Jika Anda ingin membuat sekumpulan tombol radio berdasarkan data dari sumber data, kontrol RadioButtonList adalah pilihan yang lebih baik. Ini juga sedikit lebih sederhana dalam hal penulisan kode untuk memeriksa tombol mana yang dipilih.
Catatan: Anda juga dapat menggunakan kontrol server HtmlInputRadioButton untuk menambahkan tombol radio ke halaman web ASP.NET.
Jika Anda ingin memberikan pengguna daftar opsi yang panjang atau daftar yang dapat berubah panjangnya saat run time, gunakan kontrol server Web ListBox atau DropDownList.
1. Tombol radio grup
Tombol radio jarang digunakan sendiri, namun dikelompokkan untuk menyediakan serangkaian opsi yang saling eksklusif. Dalam grup, hanya satu tombol radio yang dapat dipilih dalam satu waktu. Anda dapat membuat tombol radio yang dikelompokkan dengan cara berikut:
Mulailah dengan menambahkan satu kontrol server Web RadioButton ke halaman, lalu tetapkan semua kontrol secara manual ke grup. Nama grup dapat berupa apa saja; semua tombol radio dengan nama grup yang sama dianggap sebagai bagian dari satu grup.
Tambahkan kontrol server Web RadioButtonList ke halaman. Item daftar dalam kontrol ini dikelompokkan secara otomatis.
2. Acara RadioButton dan RadioButtonList
Peristiwa bekerja secara berbeda antara kontrol RadioButton tunggal dan kontrol RadioButtonList.
3. Kontrol RadioButton tunggal
Sebuah kontrol RadioButton memunculkan event CheckedChanged ketika pengguna mengklik kontrol tersebut. (Peristiwa ini diwarisi dari kontrol Kotak Centang.) Secara default, peristiwa ini tidak menyebabkan halaman dikirim ke server. Namun, Anda dapat memaksa kontrol untuk segera melakukan postback dengan mengatur properti AutoPostBack ke true.
Catatan: Fitur postback otomatis memerlukan browser untuk mendukung ECMAScript (Jscript atau JavaScript) dan skrip untuk diaktifkan di browser pengguna.
Anda mungkin perlu membuat event handler untuk acara CheckedChanged. Anda dapat menguji tombol radio mana yang dipilih dalam kode apa pun yang dijalankan sebagai bagian dari halaman. Biasanya, Anda membuat pengendali peristiwa untuk peristiwa CheckedChanged hanya ketika Anda perlu mengetahui bahwa tombol radio telah berubah, bukan hanya membaca pilihan saat ini.
4. Kontrol RadioButtonList
Kontrol RadioButtonList memunculkan event SelectedIndexChanged ketika pengguna mengubah tombol radio yang dipilih dalam daftar. Secara default, kejadian ini tidak menyebabkan halaman dikirim ke server. Namun, Anda dapat memaksa kontrol untuk segera melakukan postback dengan mengatur properti AutoPostBack ke true.
Catatan: Fitur postback otomatis memerlukan browser untuk mendukung ECMAScript (Jscript atau JavaScript) dan skrip untuk diaktifkan di browser pengguna.
Seperti halnya kontrol RadioButton individual, pengujian status kontrol RadioButtonList setelah halaman dikirim dengan cara lain lebih umum dilakukan.
5. RadioButton mengontrol atribut HTML
Ketika kontrol RadioButton dirender ke browser, kontrol tersebut akan dibagi menjadi dua bagian: elemen input yang mewakili tombol radio dan elemen label terpisah yang mewakili judul tombol radio. Kedua elemen ini digabungkan menjadi elemen rentang.
Saat Anda menerapkan gaya atau pengaturan properti ke kontrol RadioButton, gaya dan properti tersebut diterapkan ke elemen rentang luar. Misalnya, jika Anda mengatur properti BackColor kontrol, pengaturan tersebut berlaku untuk elemen span. Oleh karena itu, ini akan mempengaruhi elemen input dan label bagian dalam.
Terkadang, Anda mungkin perlu menyetel pengaturan terpisah untuk tombol radio dan label. Kontrol RadioButton mendukung dua properti yang dapat diatur pada waktu proses. Atribut InputAttributes memungkinkan Anda menambahkan atribut HTML ke elemen input, dan atribut LabelAttributes memungkinkan Anda menambahkan atribut HTML ke elemen label. Properti yang disetel diteruskan ke browser apa adanya. Contoh berikut menunjukkan cara mengatur properti elemen masukan sehingga ketika pengguna mengarahkan penunjuk tetikus ke tombol radio, hanya tombol radio yang berubah warna dan bukan labelnya.
RadioButton1.InputAttributes.Add("onmouseover", "this.style.backgroundColor = 'merah'");
RadioButton1.InputAttributes.Add("onmouseout", "this.style.backgroundColor = 'putih'");
6. Ikat data ke kontrol
Anda bisa mengikat satu kontrol RadioButton ke sumber data, dan Anda bisa mengikat properti apa pun dari kontrol RadioButton ke bidang mana pun di sumber data. Misalnya, Anda bisa mengatur properti Teks kontrol berdasarkan informasi dalam database.
Karena tombol radio digunakan dalam kelompok, jarang terjadi pengikatan satu tombol radio ke sumber data. Sebaliknya, lebih umum untuk mengikat kontrol RadioButtonList ke sumber data. Dalam hal ini, sumber data secara dinamis menghasilkan tombol radio (item daftar) untuk setiap rekaman di sumber data.
3. Cara: Menambahkan Kontrol Server Web RadioButton ke Halaman Formulir Web
Ada dua cara untuk menambahkan tombol radio ke halaman Formulir Web:
·Tambahkan satu kontrol server Web RadioButton.
·Tambahkan kontrol server Web RadioButtonList, lalu tambahkan satu item daftar ke kontrol.
Saat menggunakan satu kontrol server Web RadioButton, Anda biasanya menambahkan serangkaian kontrol tersebut ke halaman dan kemudian mengelompokkannya. Beberapa grup tombol berbeda dapat dibuat.
melangkah:
1. Dari tab "Standar" pada kotak alat, seret kontrol RadioButton ke halaman.
2. Di jendela "Properti", tentukan judul dengan mengatur properti Teks.
3. Anda juga dapat memilih untuk mengubah arah judul dengan mengatur properti TextAlign.
4. Ulangi langkah 1 hingga 3 untuk setiap tombol radio yang ingin Anda tambahkan ke halaman.
Kelompokkan kontrol server web RadioButton individual
Atur properti GroupName setiap kontrol ke nama yang sama. Anda dapat menggunakan string apa pun sebagai namanya, tetapi string tersebut tidak boleh berisi spasi. Misalnya, Anda dapat menetapkan string "RadioButtonGroup1" ke properti GroupName semua tombol.
Untuk membuat beberapa grup tombol, gunakan nama grup yang berbeda untuk setiap grup.
Catatan: Kapan saja, Anda dapat menambahkan kontrol RadioButton ke halaman dan membaginya ke dalam grup yang ada.
4. Cara: Menambahkan Kontrol Server Web RadioButtonList ke Halaman Formulir Web
Ada dua cara untuk menambahkan tombol radio ke halaman Formulir Web:
·Tambahkan kontrol server Web RadioButtonList, lalu tambahkan satu item daftar ke kontrol.
·Tambahkan satu kontrol server Web RadioButton.
Saat menggunakan kontrol RadioButtonList, Anda dapat menambahkan kontrol individual ke halaman. Menambahkan item ke kontrol adalah proses terpisah, bergantung pada apakah Anda ingin menampilkan daftar statis di kontrol atau daftar yang dibuat secara dinamis saat runtime.
melangkah:
1. Dari tab "Standar" pada kotak alat, seret kontrol RadioButtonList ke halaman.
2. Anda juga dapat memilih untuk mengubah arah judul dengan mengatur properti TextAlign di jendela "Properties".
3. Anda juga dapat memilih untuk mengubah tata letak kontrol untuk menampilkan beberapa kolom.
4. Ikuti salah satu metode berikut untuk membuat item untuk kontrol:
·Buat setiap item secara terpisah.
·Ikat data ke kontrol.
5. Cara: Mengatur dan mendapatkan pilihan di kontrol server Web RadioButton
Anda dapat mengatur tombol radio yang dipilih pada waktu desain, atau dalam kode pada waktu proses. Jika tombol radio milik suatu grup, pengaturan tombol tersebut akan menghapus semua pilihan lain dalam grup.
Catatan: Jika Anda menggunakan kontrol RadioButtonList, proses mendapatkan dan mengatur nilai tombol berbeda.
1. Atur kontrol RadioButton yang dipilih
Atur properti Checked pada kontrol ke true. Jika Anda memilih beberapa kontrol RadioButton dalam satu grup, browser akan menentukan tombol mana yang akan dipilih.
Jika Anda menyetel properti ini ke false, pilihan akan dihapus tetapi tombol radio lain tidak dipilih. Oleh karena itu, Anda dapat menghapus semua pilihan dengan mengatur properti Diperiksa dari semua tombol radio dalam grup ke salah.
Menentukan kontrol RadioButton mana yang dipilih pada dasarnya adalah menguji properti Checked.
public void Button1_Click (pengirim objek, System.EventArgs e)
{
if (RadioButton1.Dicentang) {
Label1.Text = "Anda memilih " + RadioButton1.Text;
}
else if (RadioButton2.Dicentang) {
Label1.Text = "Anda memilih " + RadioButton2.Text;
}
else if (RadioButton3.Dicentang) {
Label1.Text = "Anda memilih " + RadioButton3.Text;
}
}
6. Cara: Mengatur tata letak di kontrol server Web RadioButtonList
Secara default, kontrol server Web RadioButtonList hanya menampilkan daftar tombol. Namun, Anda dapat menentukan jumlah kolom berapa pun, dan di dalam kolom tersebut, Anda juga dapat menentukan cara item diurutkan: secara vertikal (default) atau secara horizontal. Tata letak vertikal tiga kolom terlihat seperti ini:
A D G
B E H
C F
Tata letak horizontal dari item yang sama menghasilkan tata letak berikut:
A B C
D E F
G H
Tentukan jumlah kolom dan urutkan
·Atur properti RepeatColumns dari kontrol RadioButtonList ke jumlah kolom yang diinginkan.
· Gunakan enumerasi RepeatDirection untuk mengatur properti RepeatDirection ke Vertikal atau Horizontal, seperti yang ditunjukkan dalam contoh kode berikut.
protected void Button1_Click (pengirim objek, System.EventArgs e)
{
// Buat lima tombol radio.
string[] warna = {"Merah", "Biru", "Hijau", "Kuning", "Oranye"};
ini.RadioButtonList1.Item.Clear();
for(int i=0;i < warna.GetLength(0);i++){
this.RadioButtonList1.Items.Add(warna[i]);
}
// Letakkan tombol radio secara horizontal.
ini.RadioButtonList1.RepeatDirection =
RepeatDirection.Horizontal;
}
7. Cara: Menanggapi pilihan pengguna di grup kontrol server Web RadioButton
Saat pengguna memilih kontrol RadioButton, kontrol tersebut memunculkan peristiwa yang dapat Anda tanggapi.
Deskripsi: Peristiwa yang dimunculkan oleh kontrol RadioButtonList berbeda dengan peristiwa yang dimunculkan oleh kontrol RadioButton tunggal.
Anda mungkin tidak perlu merespons langsung peristiwa pemilihan kontrol RadioButton sama sekali. Tanggapi kejadian ini hanya jika diperlukan untuk mengetahui kapan pengguna telah mengubah pilihan di grup tombol radio.
Jika Anda hanya ingin mengetahui radio button mana yang dipilih dan tidak ingin mengetahui apakah pilihannya telah berubah, Anda cukup menguji pilihan radio button tersebut setelah formulir dikirim ke server.
Karena setiap kontrol server RadioButton merupakan kontrol terpisah dan setiap kontrol dapat memunculkan peristiwa secara independen; grup tombol radio tidak memunculkan peristiwa secara keseluruhan;
Buat pengendali peristiwa untuk peristiwa CheckedChanged pada kontrol.
Secara default, kejadian CheckedChanged tidak langsung menyebabkan halaman Formulir Web dikirim ke server. Sebaliknya, peristiwa tersebut dimunculkan dalam kode server pada saat formulir dikirim berikutnya (seperti ketika kontrol server Web Tombol diklik). Untuk menyebabkan peristiwa CheckedChanged menyebabkan pengeposan langsung, setel properti AutoPostBack kontrol RadioButton ke true.
Catatan: Untuk mengirimkan kontrol RadioButton ke server ketika dipilih, browser harus mendukung ECMAScript (JScript, JavaScript) dan browser pengguna harus mengaktifkan skrip.
Contoh kode berikut menunjukkan cara merespons ketika pengguna memilih kontrol RadioButton.
public void RadioButton1_CheckedChanged (pengirim objek,
Sistem.EventArgs e)
{
Label1.Text = "Anda memilih Radio Button " + RadioButton1.Text;