When collecting user input, you must decide what Web control to use. For example, when prompting users for their gender, you could use a TextBox Web control, having them type in whether they are Male or Female. However, this approach lends itself to user error. A visitor may misspell Female or type in Woman instead. A less error-prone approach would be to use a DropDownList Web control with two options: Male and Female.

Other Boolean inputs work best with check boxes. For example, many websites require you to create an account to access certain portions of the site. When registering for a user account, you typically find a check box labeled something like I Agree to the Terms or Keep Me Abreast of New Products from Your Company.

In this same account-creation page, users may be prompted to specify how they learned about the website. Rather than requiring users to type in an explanation, many websites will provide a drop-down list that contains a number of potential choices, such as Read About It in Print, Heard About It from a Friend, and so on. A drop-down list or a series of radio buttons work well here.

Input that falls into the general text input category, such as a person’s name or mailing address, must be entered via text boxes.

The point of this discussion is to highlight that different classes of user input exist, and the best Web control for one class of input may not be the best for another. Keep this in mind as you work through this hour.

Table 11.1 summarizes the classifications of user input and what types of Web controls typically work best.

When using the DropDownList Web control, you must specify the drop-down list’s list items. The list items are the allowable choices that the user can select from. Each individual option in the list of choices is a list item.

There are two ways to specify a DropDownList Web control’s list items. This first method, which we’ll examine in this hour, is to enter the list items by typing them in, one after another. This approach works well if you know in advance what list items the user should be presented with. For example, if you are using a DropDownList Web control to present the user with a list of the 50 states in the United States, this method is sufficient.

Imagine, however, that you wanted to populate the choices shown in the DropDownList Web control based on some external input. An online banking website, for example, might allow customers to have more than one account, such as a savings account, a checking account, a money market account, and so on. Some customers may have only a checking account, whereas others may have checking and savings accounts.

When the user first logs on to the website, you might want to have the user select which of her accounts (assuming she has multiple accounts) she wants to start working with. These options could be presented in a DropDownList Web control. However, the accounts shown depend on what accounts the customer has opened with the bank. Therefore, the list items shown in the DropDownList Web control depend on external input—namely, the currently logged on user’s open accounts.

To handle situations like this, you can store the list items in a database. Then, when using the DropDownList Web control, you can indicate that the list items to be displayed in the drop-down list should come from the database. We’ll examine this mode of specifying list items in Hour 17, “Working with Data-Bound DropDownLists, RadioButtons, and CheckBoxes.”

To demonstrate using a DropDownList Web control and adding list items to it, create a new ASP.NET page named DropDownList.aspx. Type in the text What is your favorite ice cream flavor? and then drag a DropDownList Web control from the Toolbox onto the page. Set the DropDownList control’s ID property to Flavors.

Next, add a Button Web control beneath the DropDownList. At this point your screen should look similar to Figure 11.2.

Figure 11.2. A DropDownList Web control and Button Web control have been added to the designer.

At this point we’ve yet to add any list items to the DropDownList Web control. If you view the ASP.NET web page through a browser at this point, you’ll be presented with an empty drop-down list, as shown in Figure 11.3.

Figure 11.3. The drop-down list is empty; it contains no items for the user to choose from.

The DropDownList control’s list items are contained in the control’s Items property. To add list items to the DropDownList Web control, we need to edit this property. Select the DropDownList so that its properties are loaded in the Properties window, and then scroll down to the Items property. You should see that the property value currently reads (Collection). As Figure 11.4 shows, if you click this property value, a button with a pair of ellipses will appear to the right of (Collection).

Figure 11.4. Clicking the Items property reveals a button with a pair of ellipses.

Go ahead and click this button; when you do so, the ListItem Collection Editor dialog box will appear. This dialog box, shown in Figure 11.5, allows you to add and remove list items from the DropDownList Web control.

Figure 11.5. The ListItem Collection Editor dialog box allows you to manage the options for a DropDownList Web control.

Let’s add the ice cream flavors Vanilla, Chocolate, and Strawberry to the DropDownList. To add a new list item, click the Add button.

After you click the Add button, a new list item is added; its properties are displayed on the right. As Figure 11.6 shows, list items have four properties: Enabled, Selected, Text, and Value.

Figure 11.6. After you have added a new list item, you can specify its properties.

The first property, Enabled, expects a Boolean value (either True or False). Enabled indicates whether the particular list item is present in the rendered drop-down list. For example, if you have a DropDownList Web control with three list items—Vanilla, Chocolate, and Strawberry—and set Chocolate’s Enabled property to False, the drop-down list shown in the user’s browser would have only two items—Vanilla and Strawberry.

The second property, Selected, also expects a Boolean value and indicates whether the list item is the item that is selected by default when the web page loads. Because many list items may be in a drop-down list, and because only one item is shown at a time, the Selected property specifies what list item is selected when the web page is first loaded. For example, when visiting our ASP.NET page, the drop-down list will, by default, show the first option—Vanilla. If you want the Strawberry option to be the item selected by default, you can either make it the first list item or set its Selected property to True.

The Text and Value properties expect string values. The Text property is the text that is displayed to the user in the drop-down list. For our flavors of ice cream, we’d want the Text property to be Vanilla for the first list item, Chocolate for the second, and Strawberry for the third. The Value property, on the other hand, is not seen by the user. It serves as a means to pass along additional information with each list item.

Now that you understand the roles of the four list item properties, go ahead and set the Text property for the list item just added to Vanilla. Add another list item and set its Text property to Chocolate. Finally, add a third list item and set its Text property to Strawberry.

After you have added the Vanilla, Chocolate, and Strawberry list items, the ListItem Collection Editor should look similar to the one shown in Figure 11.7.

Figure 11.7. Three list items have been added.

Finally, click OK on the ListItem Collection Editor dialog box. Note that the DropDownList Web control in the designer has changed so that it shows the word Vanilla as its selected list item.

Let’s check out our progress by visiting DropDownList.aspx through a browser (see Figure 11.8). Note that all three ice cream flavors, which weren’t present before we added the three list items via the ListItem Collection Editor, are now listed. (Refer to Figure 11.3 to see the output prior to adding list items.)

Figure 11.8. The web page presents the user with the three ice cream flavor options.

To have the ASP.NET page take some action when the form is submitted, we need to create a Click event handler for the Button Web control.

For now, let’s just output the ice cream choice selected by the user in a Label Web control. To facilitate this, add a Label to DropDownList.aspx, setting its ID property to Results and clearing out its Text property. Also, set the Button Web control’s ID property to SubmitButton and its Text property to “Click Me.”

Next, double-click the Button Web control. This will, as you know, add an event handler for the Button’s Click event. Add the following line of code to the event handler:

Results.Text = "You like " & Flavors.SelectedItem.Text

As this source code illustrates, the DropDownList Web control’s selected list item can be accessed using

DropDownListID.SelectedItem

Recall that each list item has the properties Enabled, Selected, Text, and Value. So, to retrieve the Text property, we use

DropDownListID.SelectedItem.Text

If we wanted to work with the Value property, we could use

DropDownListID.SelectedItem.Value

After you have added the code to the Button Web control’s Click event handler, view the page through a browser. When the page loads, select a particular flavor and click the Click Me button. This will cause the form to postback, at which point you should see the message “You like flavor” (where flavor is the ice cream flavor you selected from the drop-down list).

Figure 11.9 shows DropDownList.aspx after the Strawberry flavor has been selected and the Click Me button has been clicked.

Figure 11.9. The text of the selected ice cream flavor is display in the Label Web control.

The DropDownList Web control has a handful of formatting properties. These formatting properties function the same way as those found in the Label and TextBox Web controls. Table 11.2 lists these formatting properties.

As Figure 11.13 shows, there is no text next to the radio buttons. We need to add some text explaining what choice the resulting radio button represents. To accomplish this, 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.” After 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 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 belong to the same group. Therefore, to group the three RadioButton Web controls (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.

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, each radio button includes descriptive text and the three radio buttons are mutually exclusive. Figure 11.15 shows the page when visited through a browser.

Figure 11.15. The radio buttons have text explaining what they represent and are mutually exclusive.

Adding the RadioButton Web controls to the ASP.NET page, setting their Text properties, and making them mutually exclusive is only half of the battle in collecting and processing user input via radio buttons. The other half is determining what option the user selected. Each RadioButton Web control has a Checked property, which returns True if the RadioButton control is selected, False otherwise.

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

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

Let’s have this page 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. Add a Label to the page, clear out its Text property, and set its ID property to Results.

Next, create an event handler for the Button control’s Click event and add the code shown in Listing 11.1 to it.

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, then the Results Label’s Text property is set to “You like Chocolate” (lines 3 and 4). Finally, if the Strawberry RadioButton control is checked, “You like Strawberry” is displayed (lines 5 and 6).

Just like the DropDownList, TextBox, and Label Web controls, the RadioButton Web control offers the same set of formatting properties. As you may have already guessed, all Web controls contain these properties. (For this reason I won’t mention the formatting properties when discussing future Web controls.)

To determine what CheckBox Web controls have been checked, we use the same syntax as with the RadioButton Web controls, namely:

CheckBoxID.Checked

The Checked property returns True if the check box is checked, False otherwise. Consequently, 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

Add an event handler for the Button Web control’s Click event. 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 ElseIf statements are used on lines 3 and 5, 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 1—Vanilla.Checked—is False.

Therefore, the code in Listing 11.1 displays only the name of the first selected ice cream flavor. 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 check boxes we need to allow for multiple ice cream flavors to be listed in the Label Web control because multiple ice cream flavors may be selected. Therefore we need to use three separate If statements.

Listing 11.2 contains the source code to add to the Click event handler.

 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 code in Listing 11.2 starts by clearing out the Results Label Web control’s Text property (line 2). Next, on lines 4, 8, and 12, the Checked property is examined for the three CheckBox Web controls. If the check box is checked, an appropriate message is concatenated with the current value of the Results Label control’s Text property.

For example, on line 8, the Chocolate.Checked property is examined. If this property returns True, that means the Chocolate check box was 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.”

Variable = Variable & "Some string"

Variable &= "Some string"

Figure 11.18 shows the CheckBox.aspx web page when viewed through a browser. Here the visitor 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.