May 15, 2011, 8:11 p.m.
posted by magedrx
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.
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.
Figure shows the designer after the first RadioButton Web control has been added.
Figure. 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 shows the Visual Web Developer after these additional two RadioButton Web controls and the Button Web control have been added.
Figure. 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 shows the RadioButton.aspx web page when viewed through a browser, highlighting these two issues.
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.
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.
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 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.
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
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).
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 Figure when discussing future Web controls.)