การควบคุม RadioButton และการควบคุม RadioButtonList ช่วยให้ผู้ใช้สามารถเลือกจากชุดเล็กๆ ของตัวเลือกที่กำหนดไว้ล่วงหน้าซึ่งไม่เกิดร่วมกัน
1. ฟังก์ชั่น
คุณสามารถใช้ตัวควบคุมกล่องกาเครื่องหมายและตัวควบคุมกล่องกาเครื่องหมายเพื่อดำเนินการต่อไปนี้:
· ทำให้เกิดการย้อนกลับของหน้าเมื่อเลือกปุ่มตัวเลือก
·บันทึกการโต้ตอบของผู้ใช้เมื่อผู้ใช้เลือกปุ่มตัวเลือก
· ผูกปุ่มตัวเลือกแต่ละปุ่มกับข้อมูลในฐานข้อมูล
2. ความเป็นมา
เมื่อเพิ่มปุ่มตัวเลือกลงในเว็บเพจ ASP.NET คุณสามารถใช้ตัวควบคุมเว็บเซิร์ฟเวอร์สองตัว: ตัวควบคุม RadioButton เดียวหรือตัวควบคุม RadioButtonList การควบคุมทั้งสองทำให้ผู้ใช้สามารถเลือกตัวเลือกที่กำหนดไว้ล่วงหน้าชุดเล็กๆ ที่ไม่เหมือนกันได้ คุณสามารถใช้การควบคุมเหล่านี้เพื่อกำหนดปุ่มตัวเลือกที่มีป้ายกำกับจำนวนเท่าใดก็ได้ และจัดเรียงปุ่มเหล่านั้นในแนวนอนหรือแนวตั้ง
คุณสามารถเพิ่มตัวควบคุม RadioButton แต่ละรายการลงในเพจและใช้การควบคุมทีละรายการได้ โดยปกติแล้วปุ่มสองปุ่มขึ้นไปจะถูกจัดกลุ่มไว้ด้วยกัน
หรือคุณสามารถใช้ตัวควบคุม RadioButtonList ซึ่งเป็นตัวควบคุมเดียวที่สามารถใช้เป็นตัวควบคุมหลักสำหรับกลุ่มของรายการปุ่มตัวเลือกได้ การควบคุมนี้มาจากคลาส ListControl พื้นฐาน และดังนั้นจึงทำงานคล้ายกันมากกับตัวควบคุม ListBox, DropDownList, BulletedList และ CheckBoxList เว็บเซิร์ฟเวอร์ ขั้นตอนต่างๆ สำหรับการใช้ตัวควบคุม RadioButtonList จะเหมือนกับสำหรับตัวควบคุมเว็บเซิร์ฟเวอร์รายการอื่นๆ
การควบคุมทั้งสองประเภทมีข้อดีในตัวเอง การใช้ตัวควบคุม RadioButton เดียวช่วยให้คุณควบคุมเค้าโครงของกลุ่มปุ่มตัวเลือกได้มากกว่าการใช้ตัวควบคุม RadioButtonList ตัวอย่างเช่น คุณสามารถรวมข้อความที่ไม่ใช่ปุ่มวิทยุระหว่างปุ่มตัวเลือกได้
หากคุณต้องการสร้างชุดของปุ่มตัวเลือกตามข้อมูลจากแหล่งข้อมูล ตัวควบคุม RadioButtonList เป็นตัวเลือกที่ดีกว่า นอกจากนี้ยังง่ายกว่าเล็กน้อยในแง่ของการเขียนโค้ดเพื่อตรวจสอบว่าปุ่มใดถูกเลือก
หมายเหตุ: คุณยังสามารถใช้ตัวควบคุมเซิร์ฟเวอร์ HtmlInputRadioButton เพื่อเพิ่มปุ่มตัวเลือกลงในเว็บเพจ ASP.NET
ถ้าคุณต้องการให้รายการตัวเลือกแบบยาวแก่ผู้ใช้หรือรายการที่อาจเปลี่ยนแปลงความยาว ณ รันไทม์ ให้ใช้ตัวควบคุมเซิร์ฟเวอร์เว็บกล่องรายการหรือ DropDownList
1. ปุ่มตัวเลือกกลุ่ม
ปุ่มตัวเลือกไม่ค่อยได้ใช้โดยลำพัง แต่ถูกจัดกลุ่มไว้เพื่อให้ชุดตัวเลือกพิเศษร่วมกัน ภายในกลุ่ม สามารถเลือกปุ่มตัวเลือกได้เพียงปุ่มเดียวในแต่ละครั้ง คุณสามารถสร้างปุ่มตัวเลือกแบบกลุ่มได้ด้วยวิธีต่อไปนี้:
เริ่มต้นด้วยการเพิ่มการควบคุมเซิร์ฟเวอร์เว็บ RadioButton เดียวให้กับเพจ จากนั้นกำหนดการควบคุมทั้งหมดให้กับกลุ่มด้วยตนเอง ชื่อกลุ่มอาจเป็นอะไรก็ได้ ปุ่มตัวเลือกทั้งหมดที่มีชื่อกลุ่มเดียวกันจะถือว่าเป็นส่วนหนึ่งของกลุ่มเดียว
เพิ่มตัวควบคุมเซิร์ฟเวอร์เว็บ RadioButtonList ให้กับเพจ รายการในการควบคุมนี้จะถูกจัดกลุ่มโดยอัตโนมัติ
2. เหตุการณ์ RadioButton และ RadioButtonList
เหตุการณ์ทำงานแตกต่างกันระหว่างตัวควบคุม RadioButton เดียวและตัวควบคุม RadioButtonList
3. การควบคุม RadioButton เดี่ยว
ตัวควบคุม RadioButton เดียวทำให้เกิดเหตุการณ์ CheckedChanged เมื่อผู้ใช้คลิกตัวควบคุม (เหตุการณ์นี้สืบทอดมาจากตัวควบคุมกล่องกาเครื่องหมาย) โดยค่าเริ่มต้น เหตุการณ์นี้ไม่ทำให้เพจถูกส่งไปยังเซิร์ฟเวอร์ อย่างไรก็ตาม คุณสามารถบังคับให้ตัวควบคุมดำเนินการ postback ได้ทันทีโดยการตั้งค่าคุณสมบัติ AutoPostBack ให้เป็นจริง
หมายเหตุ: คุณลักษณะ postback อัตโนมัติต้องการให้เบราว์เซอร์รองรับ ECMAScript (Jscript หรือ JavaScript) และเปิดใช้งานการเขียนสคริปต์บนเบราว์เซอร์ของผู้ใช้
คุณอาจต้องสร้างตัวจัดการเหตุการณ์สำหรับเหตุการณ์ CheckedChanged คุณสามารถทดสอบได้ว่าปุ่มตัวเลือกใดถูกเลือกในโค้ดใดๆ ที่ทำงานเป็นส่วนหนึ่งของเพจ โดยทั่วไป คุณจะสร้างตัวจัดการเหตุการณ์สำหรับเหตุการณ์ CheckedChanged เฉพาะเมื่อคุณต้องการทราบว่าปุ่มตัวเลือกมีการเปลี่ยนแปลง แทนที่จะอ่านเฉพาะการเลือกปัจจุบัน
4. การควบคุม RadioButtonList
ตัวควบคุม RadioButtonList ทำให้เกิดเหตุการณ์ SelectedIndexChanged เมื่อผู้ใช้เปลี่ยนปุ่มตัวเลือกที่เลือกในรายการ ตามค่าเริ่มต้น เหตุการณ์นี้ไม่ทำให้เพจถูกส่งไปยังเซิร์ฟเวอร์ อย่างไรก็ตาม คุณสามารถบังคับให้ตัวควบคุมดำเนินการ postback ได้ทันทีโดยการตั้งค่าคุณสมบัติ AutoPostBack ให้เป็นจริง
หมายเหตุ: คุณลักษณะ postback อัตโนมัติต้องการให้เบราว์เซอร์รองรับ ECMAScript (Jscript หรือ JavaScript) และเปิดใช้งานการเขียนสคริปต์บนเบราว์เซอร์ของผู้ใช้
เช่นเดียวกับตัวควบคุม RadioButton แต่ละตัว เป็นเรื่องปกติมากกว่าที่จะทดสอบสถานะของตัวควบคุม RadioButtonList หลังจากที่เพจถูกส่งด้วยวิธีอื่น
5. RadioButton ควบคุมคุณลักษณะ HTML
เมื่อตัวควบคุม RadioButton ถูกแสดงผลไปยังเบราว์เซอร์ จะถูกแบ่งออกเป็นสองส่วน: องค์ประกอบอินพุตที่แสดงถึงปุ่มตัวเลือก และองค์ประกอบป้ายกำกับแยกต่างหากที่แสดงชื่อปุ่มตัวเลือก องค์ประกอบทั้งสองนี้รวมกันเป็นองค์ประกอบช่วง
เมื่อคุณใช้การตั้งค่าสไตล์หรือคุณสมบัติกับตัวควบคุม RadioButton สไตล์และคุณสมบัติเหล่านั้นจะถูกนำไปใช้กับองค์ประกอบช่วงนอก ตัวอย่างเช่น หากคุณตั้งค่าคุณสมบัติ BackColor ของตัวควบคุม การตั้งค่าจะนำไปใช้กับองค์ประกอบ span ดังนั้นจะส่งผลต่อทั้งองค์ประกอบอินพุตภายในและองค์ประกอบป้ายกำกับ
บางครั้งคุณอาจต้องตั้งค่าแยกต่างหากสำหรับปุ่มตัวเลือกและป้ายกำกับ การควบคุม RadioButton รองรับคุณสมบัติสองประการที่สามารถตั้งค่าได้ในขณะใช้งาน แอตทริบิวต์ InputAttributes ช่วยให้คุณสามารถเพิ่มแอตทริบิวต์ HTML ให้กับองค์ประกอบอินพุต และแอตทริบิวต์ LabelAttributes ช่วยให้คุณสามารถเพิ่มแอตทริบิวต์ HTML ให้กับองค์ประกอบป้ายกำกับได้ คุณสมบัติชุดจะถูกส่งผ่านไปยังเบราว์เซอร์ตามที่เป็น ตัวอย่างต่อไปนี้แสดงวิธีการตั้งค่าคุณสมบัติขององค์ประกอบอินพุต ดังนั้นเมื่อผู้ใช้ชี้ตัวชี้เมาส์ไปที่ปุ่มตัวเลือก เฉพาะปุ่มตัวเลือกเท่านั้นที่เปลี่ยนสี และไม่เปลี่ยนสีป้ายกำกับ
RadioButton1.InputAttributes.Add("onmouseover", "this.style.พื้นหลังสี = 'สีแดง'");
RadioButton1.InputAttributes.Add("onmouseout", "this.style.พื้นหลังสี = 'สีขาว'");
6. ผูกข้อมูลเข้ากับตัวควบคุม
คุณสามารถผูกตัวควบคุม RadioButton ตัวเดียวกับแหล่งข้อมูลได้ และคุณสามารถผูกคุณสมบัติใดๆ ของตัวควบคุม RadioButton กับเขตข้อมูลใดๆ ของแหล่งข้อมูลได้ ตัวอย่างเช่น คุณสามารถตั้งค่าคุณสมบัติ ข้อความ ของตัวควบคุมโดยยึดตามข้อมูลในฐานข้อมูลได้
เนื่องจากปุ่มตัวเลือกถูกใช้เป็นกลุ่ม การผูกปุ่มตัวเลือกเดียวเข้ากับแหล่งข้อมูลจึงไม่ใช่เรื่องปกติ แต่เป็นเรื่องปกติมากกว่าที่จะผูกตัวควบคุม RadioButtonList กับแหล่งข้อมูลแทน ในกรณีนี้ แหล่งข้อมูลจะสร้างปุ่มตัวเลือก (รายการ) แบบไดนามิกสำหรับแต่ละเรกคอร์ดในแหล่งข้อมูล
3. วิธีการ: เพิ่มตัวควบคุมเซิร์ฟเวอร์เว็บ RadioButton ลงในเพจฟอร์มของเว็บ
มีสองวิธีในการเพิ่มปุ่มตัวเลือกลงในเพจฟอร์มเว็บ:
·เพิ่มการควบคุมเซิร์ฟเวอร์เว็บ RadioButton เดียว
·เพิ่มตัวควบคุมเซิร์ฟเวอร์เว็บ RadioButtonList แล้วเพิ่มรายการเดียวลงในตัวควบคุม
เมื่อใช้ตัวควบคุมเซิร์ฟเวอร์เว็บ RadioButton ตัวเดียว โดยทั่วไปคุณจะเพิ่มชุดของตัวควบคุมดังกล่าวลงในเพจแล้วจึงจัดกลุ่ม สามารถสร้างกลุ่มปุ่มที่แตกต่างกันได้หลายกลุ่ม
ขั้นตอน:
1. จากแท็บ "มาตรฐาน" ของกล่องเครื่องมือ ให้ลากตัวควบคุม RadioButton ไปบนเพจ
2. ในหน้าต่าง "คุณสมบัติ" ให้ระบุชื่อโดยการตั้งค่าคุณสมบัติข้อความ
3. คุณยังสามารถเลือกที่จะเปลี่ยนทิศทางของชื่อเรื่องได้โดยการตั้งค่าคุณสมบัติ TextAlign
4. ทำซ้ำขั้นตอนที่ 1 ถึง 3 สำหรับแต่ละปุ่มตัวเลือกที่คุณต้องการเพิ่มลงในเพจ
จัดกลุ่มการควบคุมเว็บเซิร์ฟเวอร์ RadioButton แต่ละรายการ
ตั้งค่าคุณสมบัติ GroupName ของแต่ละตัวควบคุมให้เป็นชื่อเดียวกัน คุณสามารถใช้สตริงใดก็ได้เป็นชื่อ แต่ต้องไม่มีช่องว่าง ตัวอย่างเช่น คุณสามารถกำหนดสตริง "RadioButtonGroup1" ให้กับคุณสมบัติ GroupName ของปุ่มทั้งหมดได้
หากต้องการสร้างปุ่มหลายกลุ่ม ให้ใช้ชื่อกลุ่มที่แตกต่างกันสำหรับแต่ละกลุ่ม
หมายเหตุ: คุณสามารถเพิ่มตัวควบคุม RadioButton ลงในเพจและแบ่งออกเป็นกลุ่มที่มีอยู่ได้ตลอดเวลา
4. วิธีการ: เพิ่มตัวควบคุมเซิร์ฟเวอร์เว็บ RadioButtonList ไปยังเพจฟอร์มของเว็บ
มีสองวิธีในการเพิ่มปุ่มตัวเลือกลงในเพจฟอร์มเว็บ:
·เพิ่มตัวควบคุมเซิร์ฟเวอร์เว็บ RadioButtonList แล้วเพิ่มรายการเดียวลงในตัวควบคุม
·เพิ่มการควบคุมเซิร์ฟเวอร์เว็บ RadioButton เดียว
เมื่อใช้ตัวควบคุม RadioButtonList คุณสามารถเพิ่มตัวควบคุมแต่ละรายการลงในเพจได้ การเพิ่มรายการลงในตัวควบคุมเป็นกระบวนการที่แยกจากกัน ขึ้นอยู่กับว่าคุณต้องการแสดงรายการแบบคงที่ในตัวควบคุมหรือรายการที่สร้างขึ้นแบบไดนามิกขณะรันไทม์
ขั้นตอน:
1. จากแท็บ "มาตรฐาน" ของกล่องเครื่องมือ ให้ลากตัวควบคุม RadioButtonList ไปบนเพจ
2. คุณยังสามารถเลือกที่จะเปลี่ยนทิศทางของชื่อเรื่องได้โดยการตั้งค่าคุณสมบัติ TextAlign ในหน้าต่าง "คุณสมบัติ"
3. คุณยังสามารถเลือกที่จะเปลี่ยนเค้าโครงของตัวควบคุมเพื่อแสดงหลายคอลัมน์ได้
4. ปฏิบัติตามวิธีใดวิธีหนึ่งต่อไปนี้เพื่อสร้างรายการสำหรับตัวควบคุม:
·สร้างแต่ละรายการแยกกัน
·ผูกข้อมูลเข้ากับตัวควบคุม
5. วิธีการ: ตั้งค่าและรับการเลือกในการควบคุมเซิร์ฟเวอร์เว็บ RadioButton
คุณสามารถตั้งค่าปุ่มตัวเลือกที่เลือกในเวลาออกแบบ หรือในโค้ดในขณะดำเนินการได้ หากปุ่มตัวเลือกอยู่ในกลุ่ม การตั้งค่าปุ่มจะล้างการเลือกอื่นๆ ทั้งหมดในกลุ่ม
หมายเหตุ: หากคุณใช้ตัวควบคุม RadioButtonList กระบวนการรับและตั้งค่าปุ่มจะแตกต่างออกไป
1. ตั้งค่าการควบคุม RadioButton ที่เลือก
ตั้งค่าคุณสมบัติการตรวจสอบของตัวควบคุมเป็นจริง หากคุณเลือกตัวควบคุม RadioButton หลายรายการในกลุ่ม เบราเซอร์จะกำหนดว่าปุ่มใดจะถูกเลือก
หากคุณตั้งค่าคุณสมบัตินี้เป็นเท็จ การเลือกจะถูกล้างแต่ไม่ได้เลือกปุ่มตัวเลือกอื่น ดังนั้น คุณสามารถล้างการเลือกทั้งหมดได้โดยการตั้งค่าคุณสมบัติตรวจสอบของปุ่มตัวเลือกทั้งหมดในกลุ่มให้เป็นเท็จ
การพิจารณาว่าตัวควบคุม RadioButton ใดที่ถูกเลือกนั้นเป็นการทดสอบคุณสมบัติ Checked เป็นหลัก
โมฆะสาธารณะ Button1_Click (ผู้ส่งวัตถุ System.EventArgs e)
-
ถ้า (RadioButton1.Checked) {
Label1.Text = "คุณเลือก" + RadioButton1.Text;
-
อย่างอื่นถ้า (RadioButton2.Checked) {
Label1.Text = "คุณเลือก" + RadioButton2.Text;
-
อื่นถ้า (RadioButton3.Checked) {
Label1.Text = "คุณเลือก" + RadioButton3.Text;
-
-
6. วิธีการ: ตั้งค่าโครงร่างในการควบคุมเซิร์ฟเวอร์เว็บ RadioButtonList
ตามค่าเริ่มต้น ตัวควบคุมเซิร์ฟเวอร์เว็บ RadioButtonList จะแสดงเฉพาะรายการของปุ่มเท่านั้น อย่างไรก็ตาม คุณสามารถระบุจำนวนคอลัมน์เท่าใดก็ได้ และภายในคอลัมน์เหล่านั้น คุณยังสามารถระบุวิธีการจัดเรียงรายการต่างๆ ได้: แนวตั้ง (ค่าเริ่มต้น) หรือแนวนอน เค้าโครงแนวตั้งสามคอลัมน์มีลักษณะดังนี้:
เอ ดี จี
บีอีเอช
ซี เอฟ
เค้าโครงแนวนอนของรายการเดียวกันจะสร้างเค้าโครงต่อไปนี้:
เอ บี ซี
ดี อี เอฟ
จี เอช
ระบุจำนวนคอลัมน์และการเรียงลำดับ
·ตั้งค่าคุณสมบัติ RepeatColumns ของตัวควบคุม RadioButtonList ให้เป็นจำนวนคอลัมน์ที่ต้องการ
· ใช้การแจงนับ RepeatDirection เพื่อตั้งค่าคุณสมบัติ RepeatDirection เป็นแนวตั้งหรือแนวนอน ดังที่แสดงในตัวอย่างโค้ดต่อไปนี้
ป้องกันเป็นโมฆะ Button1_Click (ผู้ส่งวัตถุ System.EventArgs e)
-
// สร้างปุ่มตัวเลือกห้าปุ่ม
string[] colours = {"แดง", "น้ำเงิน", "เขียว", "เหลือง", "ส้ม"};
this.RadioButtonList1.Items.Clear();
สำหรับ (int i = 0; i < colours.GetLength (0); i ++) {
this.RadioButtonList1.Items.Add (สี [i]);
-
// วางปุ่มตัวเลือกในแนวนอน
this.RadioButtonList1.RepeatDirection =
RepeatDirection.แนวนอน;
-
7. วิธีการ: ตอบสนองต่อการเลือกของผู้ใช้ในกลุ่มควบคุมเซิร์ฟเวอร์เว็บ RadioButton
เมื่อผู้ใช้เลือกตัวควบคุม RadioButton ตัวควบคุมจะทำให้เกิดเหตุการณ์ที่คุณสามารถตอบสนองได้
คำอธิบาย: เหตุการณ์ที่เกิดขึ้นโดยการควบคุม RadioButtonList จะแตกต่างจากเหตุการณ์ที่เกิดขึ้นโดยการควบคุม RadioButton เดียว
คุณอาจไม่จำเป็นต้องตอบสนองต่อเหตุการณ์การเลือกของตัวควบคุม RadioButton โดยตรงเลย ตอบสนองต่อเหตุการณ์นี้เฉพาะเมื่อจำเป็นต้องทราบเมื่อผู้ใช้เปลี่ยนการเลือกในกลุ่มปุ่มตัวเลือก
หากคุณเพียงต้องการทราบว่าปุ่มตัวเลือกใดถูกเลือกไว้ และไม่ต้องการทราบว่าการเลือกมีการเปลี่ยนแปลงหรือไม่ คุณสามารถทดสอบการเลือกปุ่มตัวเลือกได้หลังจากที่ส่งแบบฟอร์มไปยังเซิร์ฟเวอร์แล้ว
เนื่องจากแต่ละตัวควบคุมเซิร์ฟเวอร์ RadioButton เป็นตัวควบคุมที่แยกจากกัน และแต่ละตัวควบคุมสามารถเพิ่มเหตุการณ์ได้โดยอิสระ กลุ่มปุ่มตัวเลือกจึงไม่ทำให้เกิดเหตุการณ์โดยรวม
สร้างตัวจัดการเหตุการณ์สำหรับเหตุการณ์ CheckedChanged ของตัวควบคุม
ตามค่าเริ่มต้น เหตุการณ์ CheckedChanged จะไม่ทำให้เพจฟอร์มเว็บถูกส่งไปยังเซิร์ฟเวอร์ทันที แต่เหตุการณ์จะถูกยกขึ้นในรหัสเซิร์ฟเวอร์ในครั้งถัดไปที่ส่งแบบฟอร์ม (เช่น เมื่อมีการคลิกปุ่มควบคุมเซิร์ฟเวอร์เว็บของปุ่ม) เมื่อต้องการทำให้เหตุการณ์ CheckedChanged ทำให้เกิดการลงรายการบัญชีทันที ให้ตั้งค่าคุณสมบัติ AutoPostBack ของตัวควบคุม RadioButton เป็นจริง
หมายเหตุ: หากต้องการส่งตัวควบคุม RadioButton ไปยังเซิร์ฟเวอร์เมื่อถูกเลือก เบราว์เซอร์จะต้องรองรับ ECMAScript (JScript, JavaScript) และเบราว์เซอร์ของผู้ใช้จะต้องเปิดใช้งานการเขียนสคริปต์
ตัวอย่างรหัสต่อไปนี้สาธิตวิธีการตอบสนองเมื่อผู้ใช้เลือกตัวควบคุม RadioButton
โมฆะสาธารณะ RadioButton1_CheckedChanged (ผู้ส่งวัตถุ
System.EventArgs จ)
-
Label1.Text = "คุณเลือกปุ่มตัวเลือก" + RadioButton1.Text;