Simplify Gathering User Input with the ASP.NET DropDown List Control

Written by: cra8051 • Edited by: Michele McDonough
Updated Jul 29, 2010 • Related Guides: Windows | Asp.net

Users often prefer selecting choices on Web forms to typing information. For example, why require a user to type Yes or No, when a simple checkbox will accomplish the same thing? ASP.NET has an easy dropdown list control, which gathers information this way.

Overview

Several of the most common input boxes on Web forms require the user to select among a list of choices to continue with some other operation. These may include geographic names such as countries, states, or even cities. Choice of language is another typical question for users. Online multiple-questionnaires will offer the user pre-determined answers. This kind of list depends on the Web developer creating (or using an already existing) list. Another use of list boxes is open ended, that is, the list is filled from some external database. This happens when users log on to a banking or investment account where they have several accounts and must select a particular account. The only difference between the two types is whether the developer types in the choices at design time or creates a database to hold the choices. You can learn how to use this control by working through the following example of the first type of DropDown list.

Add a DropDown List Control

Start this example by creating a new ASP.NET page in the Microsoft Visual Web Developer. You can do this with Dreamweaver or Microsoft Expression Web by choosing an Active Server Pages Plus page and working with insertable ASP.NET objects, but the free Visual Web Developer has a shorter learning curve and works directly with ASP.NET. Save the new page with the name DropDownList.aspx. The least troublesome folder to use is the inetpub/wwwroot folder on the C: drive. If this does not exist, the use the Add Windows Features option to install Internet Information Services, which creates this and other folders. For simplicity, create a sub-folder in the wwwroot folder to hold examples like this one.

Using the Design view, type “What is your favorite programming language?” on the page. Next, select the DropDownList control from the Toolbox in the left column of Visual Web Developer and drag it onto the page at the end of the question. Be sure you do not select the ListBox control also in the Toolbox because this allows a user to select more than one option or none at all. In the Properties box, rename the ID of the DropDownList1 to “Language.”

Populate the DropDownList

click to enlarge

In the Properties box, scroll down to the “Items” line. It should show “(Collection)” in the right column next to the Property name. Click on the ellipsis (…) next to the Collection and a ListItem Collection Editor will open with two windows, “Members:” and “Properties.” At the bottom on the left are “Add” and “Remove” buttons plus “OK” and “Cancel” on the bottom right. When you click on “Add” four items appear in the ListItem properties box: Enable, Selected, Text and Value. Leave “Enabled” to True or else the item will not appear in a browser. If you want one item to appear by defaulted, make the “Selected” value True. Enter “Visual Basic” for the text section. Leave the “Value” part blank because this is used when an external source must load values. Click “Add” again and continue adding these items: “Visual Basic.NET,” “Visual C++,” “Visual C++.NET,” “ASP.NET,” “COBOL,” and “FORTRAN,” and “FORTH.” Change the Selected value on the last item to “True.” If no value is set True, the default one will be the first item entered. The image shows how the members of the list should look at this point. Finish by clicking “OK.”

Demonstrate the Control

To demonstrate how the control works, first add a label to the form from the Toolbox. Clear the Text property in the label and rename the ID “Result.” Change the ID of the Button control you added earlier to “Submit” and the text to “Click Here.” In the code for the Submit button, add this line: Result.Text=”You prefer “ & Language.SelectedItem.Text. View this page in a Browser. When it appears, FORTH is the chosen language. The added image shows the result in a Browser after loading. Select any other language from the drop-down list and click on the Button. A label should appear reading, “You selected” followed by whatever language you chose. There are only a few format properties you can modify in this control: BackColor, Font, and ForeColor.

click to enlarge

Result

click to enlarge

Here is what you should see after clicking the button