RadioButton ASP.NET Server Control
The RadioButton and RadioButtonList are implemented in exactly the same way as the CheckBox and CheckBoxList, but their functionality is quite different. The RadioButton and RadioButtonList controls enable users to select one option from a group of options. For instance, you might give a user on your Web site the option of paying for purchases or services with VISA, Master Card, or American Express. However, they cannot pay with more than one during any one purchase, so you would want to make them choose one or the other. The RadioButton, demonstrated in Listing 8.20, would be the perfect control to use for this purpose.
Listing 8.20. Using the RadioButton Control
01: <html> 02: <body Style="Font-Size:10"> 03: <form runat="server"> 04: 05: <h5>Method of Paymant</h5> 06: 07: <asp:RadioButton 08: runat="server" 09: id="cb" 10: Text="Visa" 11: GroupName="GroupOne" 12: Checked="true" 13: /> 14: 15: <br> 16: 17: <asp:RadioButton 18: runat="server" 19: id="cb2" 20: Text="Master Card" 21: GroupName="GroupOne" 22: /> 23: 24: <br> 25: 26: <asp:RadioButton 27: runat="server" 28: id="cb3" 29: Text="American Express" 30: GroupName="GroupOne" 31: /> 32: 33: </form> 34: </body> 35: </html> |
Because radio buttons are put together as a group, there must be a way to bind them together. Setting the GroupName attribute does this. In Listing 8.20, I set the three different RadioButton controls' GroupName attributes to Charge. When the page renders, a user can only select one of the three radio buttons—Visa, Master Card, or American Express. You'll notice the Checked attribute in the top RadioButton (line 12) is set to true. This RadioButton will be selected when the page loads automatically.
Raising and Handling Events and Determining Item Selection
Like the CheckBox, the RadioButton has an OnCheckedChanged event that fires when the RadioButton control becomes checked or unchecked. Again, because these controls are so similar discussion will be minimal. Listing 8.21 contains a code example illustrating how to determine item selection on a post back.
Listing 8.21. Determining Item Selection Using the RadioButton
[VisualBasic.NET]
01: <script runat="server" language="vb" >
02:
03: public sub Charge_CheckedChanged(source as Object, e as EventArgs)
04:
05: if(cb.Checked)then
06:
07: lblCharge.Text = cb.Text & " Was Charged"
08:
09: elseif(cb2.Checked) then
10:
11: lblCharge.Text = cb2.Text & " Was Charged"
12:
13: elseif(cb3.Checked) then
14:
15: lblCharge.Text = cb3.Text & " Was Charged"
16:
17: end if
18:
19: end sub
20:
21: </script>
[C#.NET]
01: <script runat="server" language="C#" >
02:
03: void Charge_CheckedChanged(Object source, EventArgs e) {
04:
05: if(cb.Checked){
06:
07: lblCharge.Text = cb.Text + " Was Charged";
08:
09: } else if(cb2.Checked){
10:
11: lblCharge.Text = cb2.Text + " Was Charged";
12:
13: } else if(cb3.Checked){
14:
15: lblCharge.Text = cb3.Text + " Was Charged";
16:
17: }
18:
19: }
20
21: </script>
[VisualBasic.NET & C#.NET]
22: <html>
23: <body Style="Font-Size:10">
24: <form runat="server">
25:
26: <h5>Method of Paymant</h5>
27:
28: <asp:RadioButton
29: runat="server"
30: id="cb"
31: Text="Visa"
32: GroupName="Charge"
33: Checked="true"
34: AutoPostBack="true"
35: OnCheckedChanged="Charge_CheckedChanged"
36: />
37:
38: <br>
39:
40: <asp:RadioButton
41: runat="server"
42: id="cb2"
43: Text="Master Card"
44: GroupName="Charge"
45: AutoPostBack="true"
46: OnCheckedChanged="Charge_CheckedChanged"
47: />
48:
49: <br>
50:
51: <asp:RadioButton
52: runat="server"
53: id="cb3"
54: Text="American Express"
55: GroupName="Charge"
56: AutoPostBack="true"
57: OnCheckedChanged="Charge_CheckedChanged"
58: />
59:
60: <p>
61:
62: <asp:label
63: runat="server"
64: id="lblCharge"
65: Font-Bold="false"
66: Font-Size="8"
67: ForeColor="Navy"
68: />
69:
70: </form>
71: </body>
72: </html>
|
The rendered page from Listing 8.21 can be seen in Figure 8.11. When you select one of the option buttons, text appears on the page and tells you which of the three credit cards you selected. I use a simple If...Then statement to figure out which of the RadioButton controls is selected.
