Creating Radio Buttons

You create and work with radio buttons in Web forms much as you do in Windows forms. However, you can't just group Web server radio buttons together by container here; you must set their GroupName property to the same value to group them together. When radio buttons are grouped together logically in this way, you don't have to place them next to each other; they can be anywhere in the Web page.

To see how to work with Web server radio buttons, take a look at the RadioButtons example on the CD-ROM, which you can see at work in Figure 16.2. This example shows you where I'm selecting various options for a new vehicle to buy; in the figure, I'm selecting a car and choosing the color red.

For reference, here isWebForm1.aspx for this example:

<%@ Page Language="vb" AutoEventWireup="false"
Codebehind="WebForm1.aspx.vb" Inherits="RadioButtons.WebForm1"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
  <HEAD>
    <title>RadioButtons example</title>
<meta content="Microsoft Visual Studio.NET 7.0" name=GENERATOR>
<meta content="Visual Basic 7.0" name=CODE_LANGUAGE>
<meta content=JavaScript name=vs_defaultClientScript>
<meta content=http://schemas.microsoft.com/intellisense/ie5
name=vs_targetSchema>
  </HEAD>
<body MS_POSITIONING="GridLayout">
<form id=Form1 method=post runat="server"><asp:radiobuttonlist
id=RadioButtonList1 style="Z-INDEX: 101; LEFT: 259px; POSITION:
absolute; TOP: 36px" runat="server" Width="116px" Height="172px"
AutoPostBack="True">
<asp:ListItem Value="blue" Selected="True">Blue</asp:ListItem>
<asp:ListItem Value="red">Red</asp:ListItem>
<asp:ListItem Value="yellow">Yellow</asp:ListItem>
<asp:ListItem Value="white">White</asp:ListItem>
</asp:RadioButtonList>
<asp:Label id=Label2 style="Z-INDEX: 107; LEFT: 265px; POSITION:
absolute; TOP: 18px" runat="server">Color:</asp:Label>
<asp:Label id=Label1 style="Z-INDEX: 106; LEFT: 86px; POSITION:
absolute; TOP: 16px" runat="server">Vehicle:</asp:Label><asp:textbox
id=TextBox2 style="Z-INDEX: 105; LEFT: 57px; POSITION: absolute;
TOP: 182px" runat="server"></asp:TextBox><asp:radiobutton
id=RadioButton2 style="Z-INDEX: 104; LEFT: 80px; POSITION:
absolute; TOP: 88px" runat="server" Text="Truck" AutoPostBack="True"
GroupName="Type"></asp:RadioButton>
<asp:radiobutton id=RadioButton1 style="Z-INDEX: 103; LEFT: 80px;
POSITION: absolute; TOP: 48px" runat="server" Text="Car"
AutoPostBack="True" GroupName="Type" Checked="True">
</asp:RadioButton><asp:textbox id=TextBox1 style="Z-INDEX: 102;
LEFT: 56px; POSITION: absolute; TOP: 128px"
runat="server"></asp:TextBox></FORM>

  </body>
</HTML>

And here is WebForm1.aspx.vb in this example:

Public Class WebForm1
    Inherits System.Web.UI.Page
    Protected WithEvents TextBox1 As _
        System.Web.UI.WebControls.TextBox
    Protected WithEvents RadioButton1 As _
        System.Web.UI.WebControls.RadioButton
    Protected WithEvents RadioButton2 As _
        System.Web.UI.WebControls.RadioButton
    Protected WithEvents TextBox2 As _
        System.Web.UI.WebControls.TextBox
    Protected WithEvents Label1 As System.Web.UI.WebControls.Label
    Protected WithEvents Label2 As System.Web.UI.WebControls.Label
    Protected WithEvents RadioButtonList1 As _
        System.Web.UI.WebControls.RadioButtonList

#Region " Web Form Designer Generated Code "

    'This call is required by the Web Form Designer.
    <System.Diagnostics.DebuggerStepThrough()> _
        Private Sub InitializeComponent()

    End Sub

    Private Sub Page_Init(ByVal sender As System.Object, _
        ByVal e As System.EventArgs) Handles MyBase.Init
        'CODEGEN: This method call is required by the Web Form Designer
        'Do not modify it using the code editor.
        InitializeComponent()
    End Sub

#End Region

    Private Sub Page_Load(ByVal sender As System.Object, _
        ByVal e As System.EventArgs) Handles MyBase.Load
        If RadioButton1.Checked Then
            TextBox1.Text = "Car is selected."
            TextBox2.Text = "Your car is: blue"
        End If
    End Sub

    Private Sub RadioButtonList1_SelectedIndexChanged(ByVal sender _
        As System.Object, ByVal e As System.EventArgs) Handles _
        RadioButtonList1.SelectedIndexChanged
        If RadioButton1.Checked Then
            TextBox2.Text = "Your car is: "
        Else
            TextBox2.Text = "Your truck is: "
        End If

        TextBox2.Text &= RadioButtonList1.SelectedItem.Value
    End Sub

    Private Sub RadioButton1_CheckedChanged(ByVal sender As _
        System.Object, ByVal e As System.EventArgs) Handles _
        RadioButton1.CheckedChanged
        If CType(sender, RadioButton).Checked Then
            TextBox1.Text = "Car is selected."
        End If

        If RadioButton1.Checked Then
            TextBox2.Text = "Your car is: "
        Else
            TextBox2.Text = "Your truck is: "
        End If

        TextBox2.Text &= RadioButtonList1.SelectedItem.Value
    End Sub

    Private Sub RadioButton2_CheckedChanged(ByVal sender As _
        System.Object, ByVal e As System.EventArgs) Handles _
        RadioButton2.CheckedChanged
        If CType(sender, RadioButton).Checked Then
            TextBox1.Text = "Truck is selected."
        End If

        If RadioButton1.Checked Then
            TextBox2.Text = "Your car is: "
        Else
            TextBox2.Text = "Your truck is: "
        End If

        TextBox2.Text &=RadioButtonList1.SelectedItem.Value
    End Sub
End Class

In the RadioButtons example, the user can click the radio buttons labeled "Car" or "Truck", and when they do, the code updates the text displayed in the text box immediately under the radio buttons (e.g., "Truck is selected."). The code does this in the CheckChanged event handler. If the control's Checked property is True, the radio button is selected, and the code will display the message "Car is selected" when the user selects radio button 1, and "Truck is selected" when then user clicks radio button 2:

    Private Sub RadioButton1_CheckedChanged(ByVal sender As _
        System.Object, ByVal e As System.EventArgs) Handles _
        RadioButton1.CheckedChanged
        If CType(sender, RadioButton).Checked Then
            TextBox1.Text = "Car is selected."
        End If
    End Sub

    Private Sub RadioButton2_CheckedChanged(ByVal sender As _
        System.Object, ByVal e As System.EventArgs) Handles _
        RadioButton2.CheckedChanged
        If CType(sender, RadioButton).Checked Then
            TextBox1.Text = "Truck is selected."
        End If
    End Sub

The reason this code works is that I have grouped these two radio buttons in the same group by setting their GroupName properties to the same value—I've used the name "Type" (for type of vehicle) here. When you click one radio button and so select it, the others in the same group are deselected. (The browser does this; it doesn't take a round trip to the server.)

You also can set a radio button's Checked property to make it appear selected when it's first displayed, as I do in the RadioButtons example. In the Page_Load event, I also initialize the text boxes to display the text corresponding to the initially selected radio buttons:

    Private Sub Page_Load(ByVal sender As System.Object, _
        ByVal e As System.EventArgs) Handles MyBase.Load
        If RadioButton1.Checked Then
            TextBox1.Text = "Car is selected."
            TextBox2.Text = "Your car is: blue"
        End If
    End Sub

Note

Don't forget—if you want to handle this control's events immediately, you must set its AutoPostBack property to True.

As discussed in the In Depth section of this chapter, the radio buttons at right in this example—the Blue, Red, Yellow, and White radio buttons—are actually items in a radio button list control, not individual radio buttons. See the next two topics for the details.