Examining the DropDownList Web Control

For certain forms of input, users must select precisely one option from a list of suitable choices. For example, a software company might want to create a support site where users can find answers to common questions about the company's various software products. When a user is searching for an answer to his question, it would be helpful if, along with searching for certain keywords, he could select what particular software product he was having trouble with.

In such a scenario, a suitable Web control for collecting this bit of input would be a DropDownList Web control. The DropDownList Web control creates a drop-down list of one to many options from which the user can choose.

Figure 11.1 shows an example of a drop-down list in an HTML web page.

Figure 11.1. With a drop-down list, the user can select one option from a list of options.

Adding Options to the DropDownList Web Control

When using the DropDownList Web control, you must specify the drop-down list's various list items. The list items are the legal 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 be examining 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 just 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. So the list items in the DropDownList Web control will depend on the user's accounts with the bank. Therefore, the list items shown in the DropDownList Web control depend on external inputnamely, the accounts that the user has opened with the bank.

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."

Adding a DropDownList Web Control to an ASP.NET Web Page

To demonstrate using a DropDownList Web control and adding list items to it, let's create a new ASP.NET page named DropDownList.aspx. Within the Web Form, type in the text What is your favorite ice cream flavor?. After this text, drag and drop a DropDownList Web control from the Toolbox.

Watch Out!

Be certain that you add a DropDownList Web control to the ASP.NET web page, not a ListBox Web control. The DropDownList Web control allows the user to select precisely one list item from a list of acceptable ones. The ListBox Web control, on the other hand, allows the user to select zero or more list items. (We will not cover the ListBox Web control in this book.)

Next, add a Button Web control beneath the DropDownList Web control. After you have typed in the text prior to the DropDownList Web control and have added both the DropDownList and Button Web controls, 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 Items property of the DropDownList Web control contains the list items that appear in the DropDownList Web control. So, to add list items to the DropDownList Web control, we will need to edit this property. Start by clicking on the DropDownList Web control so that its properties are loaded in the Properties window. Next, scroll down to the Items property. You should see that the property value currently reads (Collection). If you click this property value, a button with a pair of ellipses will appear to the right of (Collection) (see Figure 11.4).

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

Go ahead and click this button; when you do so, a 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.

Because users will be using our web page to specify their favorite ice cream flavor, let's add a couple of ice cream flavors as list items. To add a new list item, click the Add button.

After you click the Add button, a new entry is added to the left text box in the ListItem Collection Editor dialog box. On the right side, the properties of the newly added list item are displayed. 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.

That is, if you have a DropDownList Web control with three list itemsVanilla, Chocolate, and Strawberryand set Chocolate's Enabled property to False, the drop-down list in the user's browser would have only two itemsVanilla and Strawberry.

The second property, Selected, also expects a Boolean value, and indicates if the list item is the item that is selected by default when the web page loads. To elaborate, realize that there may be many list items 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 we're visiting the ASP.NET page with our DropDownList Web control that contains the list items Vanilla, Chocolate, and Strawberry, the drop-down list will, by default, show the first optionVanilla. However, what if you want the Strawberry option to be the selected item, by default? One option is simply to make it the first list item. Another option is to 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 that you may not want the user to see.

By the Way

The Value property is typically used when displaying list items from a database. In this hour we won't examine the Value property further; instead, we will be setting only the Text property.

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

By the Way

For the three list items added, you don't need to set the Value properties. If you don't specify a Value property for the list item, the ListItem Collection Editor will automatically set the Value property to the same value as the Text property.

After you have added the three 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.

Did you Know?

You can rearrange the order of the list items through the ListItem Collection Editor. To do so, click the list item in the left text box whose position you want to alter. Then click the up and down arrows in the middle of the ListItem Collection Editor dialog box to move that particular list item up or down with respect to the other list items.

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

Now let's take a moment to 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.

By the Way

When you're visiting the DropDownList.aspx web page, if you choose a list item from the drop-down list (say the Strawberry list item) and then submit the form by clicking on the button, the ASP.NET web page will be posted back and the Strawberry item will remain selected. This indicates that the DropDownList Web control continues the selected item across postbacks, just like the TextBox Web control continues its Text property value across postbacks.

To have the ASP.NET web page take some action when the form is submitted, we need to provide code in the ASP.NET page's source code portion. Specifically, we must add some code to the Button Web control's Click event handler.

For now, let's just have the web page output equal the option selected by the user, placing the output in a Label Web control. To facilitate this, start by adding a Label Web control to the DropDownList.aspx web page and then specify the Label Web control's ID property as results. Also, clear out the Text property.

Let's also take a moment to specify some properties for our other Web controls. Set the Button Web control's ID property to btnSubmit and its Text property to Click Me. Then set the DropDownList Web control's ID property to flavors.

Next, double-click the Button Web control. This will, as you know, add an event handler for the Button's Click event. In this event handler we need to provide code that will set the results Label Web control's Text property to some message that indicates what option the user just selected. This can be accomplished with the following line of code:

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 get the Value property, we could use

DropDownListID.SelectedItem.Value 

By the Way

In addition to the Enabled, Selected, Text, and Value properties of the DropDownList Web control's SelectedItem property, you may have noticed a fifth, additional property: Attributes. You can use this property, which is not accessible through the ListItem Collection Editor dialog box, to set HTML attributes in the markup rendered by the DropDownList Web control. This property is rarely needed in practice, so we won't invest any more time discussing it.

After you have added the needed source code to the Button Web control's Click event handler, go ahead and view the ASP.NET web page through a browser. When the page loads up, select a particular flavor and click the Click Me button. This will cause the form to be posted back. Upon the ASP.NET web page's reloading, 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 web page presents the user with the three ice cream flavor options.

The DropDownList Web Control's Aesthetic Properties

Along with the Items property, the DropDownList Web control has a number of aesthetic properties. These aesthetic properties are the same as the aesthetic properties for the Label and TextBox Web controls and are listed in Table 11.2 for reference. As with the Label and TextBox Web controls, these aesthetic properties are specified in the same manner.

Table 11.2. The Aesthetic Properties of the DropDownList Web Control

Property	Description
BackColor	Specifies the background color of the drop-down list.
Font	Specifies the font properties for the text entered by the user into the drop-down list. Recall that the Font property has a number of subproperties, such as Name, Size, Bold, and so on.
ForeColor	Specifies the color of the text in the drop-down list.

By the Way

You may have noticed that Table 11.2 is missing some of the aesthetic properties examined in earlier chapters, namely the border-related properties. Although these are, technically, properties of the DropDownList Web control, you won't find them in the Properties window in Visual Web Developer.

Most browsers do not render border-related CSS settings for drop-downs.