Using the CheckBox Web Control

In the "Examining the Different Types of User Input Classifications" section at the beginning of this hour, we examined three different classes of user input. The most restrictive class of user input was the Yes/No input class, which is Boolean input. That is, input in the Yes/No input classification is input that can be answered in only one of two ways. The check box is an ideal candidate for collecting user input that falls into this category. The check box, as you've no doubt seen in use before, is a square box that can be checked or unchecked.

Check boxes can also be used for presenting a list of options from which the user can select multiple choices. For example, in our previous two examplesDropDownList.aspx and RadioButton.aspxusers can select only one flavor of ice cream as their favorite. If we use three check boxes, however, users can select zero, one, two, or three of the options.

The CheckBox Web control is used to add a check box to an ASP.NET web page. Like the RadioButton Web control, a single CheckBox Web control displays a single check box, so to create a page with three check boxes, for example, we must add three CheckBox Web controls.

Let's create an ASP.NET page to demonstrate using the CheckBox Web control. Start by creating a new page named CheckBox.aspx. This web page will be similar to the previous two examples in that we will be prompting the users for their favorite ice cream flavors. With the check boxes, however, the users will be able to choose more than one flavor, if they so desire.

After you have created the new ASP.NET page, type in the text What are your favorite ice cream flavors?. After this text, drag and drop three CheckBox Web controls from the Toolbox onto the designer, one after another. After the three CheckBox Web controls, place a Button Web control. Let's go ahead and also add a Label Web control after the button.

By the Way

In the Toolbox you may have noticed that, beneath the CheckBox Web control, there is a CheckBoxList Web control. The CheckBoxList Web control produces a list of check boxes from data found in a database. We'll examine using the CheckBoxList in Hour 17.

Now let's set the properties for the Web controls we just added. First, clear the Label Web control's Text property and set its ID to results. Next, click the Button Web control and set its Text property to Click Me and its ID property to btnSubmit. For the three CheckBox Web controls, specify their Text and ID properties just like we did for the three RadioButton Web controls in our previous example. That is, set the first CheckBox Web control's Text property to Vanilla and its ID to vanilla; set the second CheckBox Web control's Text property to Chocolate; and so on.

After you have set these Web controls' properties, your screen should look similar to Figure 11.16.

Figure 11.16. The ASP.NET web page has three CheckBox Web controls.

Take a moment to view the CheckBox.aspx web page through a browser. In Figure 11.17 you can see that the page lists three check boxes and that more than one of the three check boxes can be checked.

Figure 11.17. The user can select zero to three ice cream flavors.

Determining What Check Boxes Have Been Checked

To determine what CheckBox Web controls have been checked, we use the same syntax as with the RadioButton Web controls, which returns either a true or False value, namely:

CheckBoxID.Checked 

So, to determine if the vanilla check box is checked, the following code will suffice:

If vanilla.Checked then   'The vanilla CheckBox is checked End If 

Let's add an event handler for the Button Web control's Click event, in which we'll add code that lists what check boxes the user checked. You may be tempted to use the same code that was used in Listing 11.1 for the RadioButton Web controls example. However, if you look back over Listing 11.1, you will see that on lines 3 and 5 ElseIf statements are used, which means the conditional statements following them will be evaluated only if the previous conditional statement was False. To put it another way, line 3 in Listing 11.1 will be evaluated only if the condition on line 1vanilla.Checkedis False.

Therefore, the code in Listing 11.1 will display only the name of the ice cream flavor that it first finds selected. This is not a problem for the RadioButton Web control example because the user can select only one of the three radio buttons. However, with this CheckBox Web control example, we'll need to allow for multiple ice cream flavors to be listed in the Label Web control because multiple ice cream flavors may be selected.

Listing 11.2 contains the source code needed.

Listing 11.2. The User's Ice Cream Preferences Are Displayed

 1:   'Clear out the value of the results Text property  2:   results.Text = ""  3:  4:   If vanilla.Checked then  5:     results.Text &= "You like Vanilla."  6:   End If  7:  8:   If chocolate.Checked then  9:     results.Text &= "You like Chocolate." 10:   End If 11: 12:   If strawberry.Checked then 13:     results.Text &= "You like Strawberry." 14:   End If 

The first thing that happens in Listing 11.2 is that the Text value of the results Label Web control is cleared out (line 2). Next, on lines 4, 8, and 12, the Checked property is examined for each of the three CheckBox Web controls. If the check box is checked, an appropriate message is concatenated with the current value of the results Label Web control's Text property.

For example, on line 8, the chocolate.Checked property is examined. If this property returns true, this means that the Chocolate check box has been selected, and line 9 is executed. On line 9, the results Label Web control's Text property has its current value concatenated with the string "You like Chocolate.".

By the Way

Recall from Hour 5, "Understanding Visual Basic's Variables and Operators," that the &= operator takes the value of the variable on its left side, concatenates it with the expression on the right side, and then assigns the resulting concatenated value to the left-side variable. That is, the following two statements are equivalent:

Variable = Variable & "Some string" 

and

Variable &= "Some string" 

We concatenate the current value of the Label Web control's Text property with our message instead of just assigning our message to the Label Web control's Text property because we do not want to overwrite the Label Web control's property. Why? Because if the Vanilla check box is checked, it will add the message You like Vanilla. to the Label Web control.

Figure 11.18 shows the CheckBox.aspx web page when visited through a browser and after the user has selected multiple check box choices and submitted the form. Note that all of the user's checked choices are listed in the Label Web control at the bottom of the web page.

Figure 11.18. Users can select multiple ice cream flavors as their favorites.