Selecting One Option from a List of Suitable Choices with RadioButton Web Controls

Another way of collecting user input is radio buttons, which, like drop-down lists, are suited for choosing one option from a list of valid options. You have probably seen and used radio buttons on web pages before. Radio buttons are small circles that, when selected, have a black circle displayed within them. See Figure 11.10.

Figure 11.10. Radio buttons allow the user to select one option from a list of options.

Radio buttons can be grouped into a series of related radio buttons. Given a related group of radio buttons, only one of the radio buttons from the group can be selected at a time. That means, if there are three related radio buttons and the first one is selected, the second cannot be selected; if the second is selected, neither the first nor third one can be selected; and so on. Another way to put it is that related radio buttons are mutually exclusive.

To create a radio button in an ASP.NET web page, we use the RadioButton Web control. The RadioButton Web control, when rendered, produces the HTML for creating a single radio button. Therefore, if we want the user to select one option from a list of, say, three, we must use three RadioButton Web controls.

Let's create a new ASP.NET web page named RadioButton.aspx and examine how to use the RadioButton Web control. The RadioButton.aspx page will be similar in functionality to the DropDownList.aspx page; that is, the users will be asked to provide their favorite ice cream flavor.

After you create the new ASP.NET web page, go ahead and type into the designer the text What is your favorite ice cream flavor?. Beneath this text, drag and drop a RadioButton Web control onto the designer. A radio button and the RadioButton Web control's ID property (in brackets) will be displayed in the designer.

By the Way

In the Toolbox you may have noticed that beneath the RadioButton Web control there is a RadioButtonList Web control. The RadioButtonList Web control is used when the options for the radio buttons are stored in a database. We'll examine using the RadioButtonList Web control in Hour 17.

Figure 11.11 shows the designer after the first RadioButton Web control has been added.

Figure 11.11. A RadioButton Web control has been added to RadioButton.aspx.

Now change the ID property of the RadioButton Web control just added from the default RadioButton1 to vanilla. Next, add two more RadioButton Web controls, each one beneath the other, and set their ID properties to chocolate and strawberry, respectively. Finally, add a Button Web control after all three RadioButton Web controls. Set the Button Web control's ID property to btnSubmit and its Text property to Click Me.

Figure 11.12 shows the Visual Web Developer after these additional two RadioButton Web controls and the Button Web control have been added.

Figure 11.12. The RadioButton.aspx page now contains three RadioButton Web controls and a Button Web control.

Take a moment to view the RadioButton.aspx ASP.NET web page through a browser. As you do this, take note of two things. First, there are only three radio buttons and no text explaining what each radio button represents. Second, you can select more than one radio button. (To see this, click the first radio button and then click the secondboth radio buttons will be selected.) Figure 11.13 shows the RadioButton.aspx web page when viewed through a browser, highlighting these two issues.

Figure 11.13. There is no text explaining what each radio button represents, and multiple radio buttons can be selected.

Using the Text and GroupName Properties

Notice that for each RadioButton Web control, you must add some text explaining what choice the resulting radio button represents. To accomplish this, simply set the RadioButton Web control's Text property to the appropriate text. For the RadioButton.aspx web page, set the first RadioButton Web control's Text property to Vanilla, the second's to Chocolate, and the third's to Strawberry. When you do this, your screen should look similar to Figure 11.14.

Figure 11.14. Text has been added next to each RadioButton Web control.

Now we need to be able to group the three RadioButton Web controls so that the user can select only one option from the three. The RadioButton Web control contains a string property named GroupName. Those RadioButton Web controls on a web page that have the same value for their GroupName properties are considered to be related. Therefore, to make the three RadioButton Web controls related (so that the user can select only one flavor of the three), set the GroupName property for the three RadioButton Web controls to the value flavors.

By the Way

What value you set the GroupName property to doesn't matter; what is important is that all related RadioButton Web controls have the same GroupName value. That is, we could have set the GroupName property of all three RadioButton Web controls to ScottMitchell, and the resultthe user now being able to select only one of the three radio buttonswould be the same.

Let's view the RadioButton.aspx web page through a browser now that we've specified the Text and GroupName properties for each of the three RadioButton Web controls. Figure 11.15 shows the web page when visited through a browser. Note that the three radio buttons are mutually exclusive; that is, only one radio button from the three can be selected at a time.

Figure 11.15. The radio buttons have text explaining what they represent now.

Determining What RadioButton Web Control Was Selected

Allowing the user to select a radio button from a list of radio button options is only half of the battle in collecting user input. The other half is determining what option the user selected in our ASP.NET web page's source code portion. Each RadioButton Web control has a Checked property, which returns true if the RadioButton Web control's resulting radio button is selected, and False if not.

Therefore, to determine if the vanilla RadioButton Web control was selected, we can use an If statement like this:

If vanilla.Checked then   'The vanilla radio button was selected. End If 

Imagine that we simply wanted to display the flavor the user chose using a Label Web control, much like we did with the DropDownList Web control example earlier in this hour. The first step would be to add a Label Web control after the Button Web control. After adding the Label Web control, clear out its Text property and set its ID property to results.

The code for setting the results Label Web control's Text property needs to appear in the Button Web control's Click event handler. Add the code shown in Listing 11.1 to the Click event handler.

Listing 11.1. The Code for the Button's Click Event Handler

1:   If vanilla.Checked then 2:     results.Text = "You like Vanilla" 3:   ElseIf chocolate.Checked Then 4:     results.Text = "You like Chocolate" 5:   ElseIf strawberry.Checked Then 6:     results.Text = "You like Strawberry" 7:   End If 

The code in Listing 11.1 starts by checking to see if the first RadioButton Web control, vanilla, was selected (line 1). If it was (that is, if vanilla.Checked is true), then the results Label Web control has its Text property set to You like Vanilla on line 2. Similarly, if chocolate was the selected RadioButton Web control, then the results Label Web control's Text property is set to You like Chocolate (lines 3 and 4). Finally, if the strawberry RadioButton Web control is checked, You like Strawberry is displayed (lines 5 and 6).

By the Way

Realize that all three conditionalsvanilla.Checked, chocolate.Checked, and strawberry.Checkedmay be False. This case occurs if the user does not select a radio button before clicking the Click Me button.

A Look at the Aesthetic Properties

Just like the DropDownList, TextBox, and Label Web controls, the RadioButton Web control has the same aesthetic properties. As you may have already guessed, all Web controls contain these aesthetic properties. (For this reason I won't mention those aesthetic properties in Table 11.2 when discussing future Web controls.)

By the Way

Recall that the DropDownList Web control lacks the border-related aesthetic properties. The RadioButton, on the other hand, does have these border-related properties (BorderColor, BorderStyle, and BorderWidth).