RadioButton ASP.NET Server Control

RadioButton ASP.NET Server Control"-->

only for RuBoard

`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.

Figure 8.11. The Visa `RadioButton` is selected.

only for RuBoard