Using the DropDownList Control

Learning Resources
 

Using the DropDownList Control

The DropDownList Web server control allows users to select an item from a predefined list. It differs from the ListBox Web server control in that the list of items remains hidden until users click the drop-down button. In addition, the DropDownList control differs from the ListBox control in that it does not support multi-selection mode.

You can control the look of the DropDownList control by setting its height and width in pixels. Some browsers do not support setting the height and width in pixels and will use the row-count setting instead.

You cannot specify the number of items that are displayed in the list when users click the drop-down button. The length of the displayed list is determined by the browser.

As with other Web server controls, you can use style objects to specify the appearance of the DropDownList control. For details, see ASP.NET Web Server Controls and CSS Styles.

The DropDownList control is actually a container for the list items, which are of type ListItem. Each ListItem object is a separate object with its own properties. These properties are described in the following table.
`
Property Description

Text

Specifies the text that is displayed in the list.

Value

Contains the value that is associated with an item. Setting this property allows you to associate a value with a specific item without displaying it. For example, you can set the Text property to the name of a U.S. state and the Value property to its postal abbreviation.

Selected

Indicates whether the item is selected by means of a Boolean.

To work with list items programmatically, use the Items collection of the DropDownList control. The Items collection is a standard collection, and you can add item objects to it, delete items, clear the collection, and so on.

The currently selected item is available in the DropDownList control's SelectedItem property.

You can use a DropDownList Web server control to list options that are made available to the page using a data source control. Each item in the DropDownList control corresponds to an item — typically a row — in the data source.

The control displays one field from the source. Optionally, you can bind the control to a second field to set the value of an item, which does not display.

As with other Web server controls, you can bind any control properties, such as the color or size of the control, to data. For details, see How to: Populate List Web Server Controls from a Data Source.

DropDownList Events

The DropDownList control raises an event — the SelectedIndexChanged event — when users select an item. By default, this event does not cause the page to be posted to the server, but you can cause the control to force an immediate post by setting the AutoPostBack property to true.

 

To add a DropDownList Web server control to a Web Forms page

  1. Type an element into the page. For syntax, see DropDownList Web Server Control.

  2. Create items for the control in one of the following two ways:

    • By creating them as individual items. as

To add static items at design time

  1. Type an element into the page as a child of the list control. For syntax, see ListBox Web Server Control.

  2. Set the Text and Value properties of the new list item.

  3. Optionally, set the Selected property for one or more items. (Note that certain controls allow only one item to be selected.)

  4. Repeat steps 1 through 3 for each item to add.

    The following code example shows a ListBox control with three statically defined items.

To add items programmatically

  1. Create a new object of type ListItem and set its Text and Value properties.

  2. Call the Add method of the control's Items collection and pass it the new object.

    The following code example shows how to add ListItem objects to a ListBox control, but the procedure is identical for all list Web server controls.

    An C# example
     
    Protected void Button1_Click (object sender, System.EventArgs e)
{
    ListBox1.Items.Add(new ListItem("Carbon", "C"));
    ListBox1.Items.Add(new ListItem("Oxygen", "O"));
}

  • By binding data to the control as

To populate a list control from a data source

  1. If the list control includes items that you have defined at design time, and you want to append the item from the data source to the static items, set the control's AppendDataBoundItems property to true.

  2. Add a data source control to the page, such as a SqlDataSource or ObjectDataSource control. For details, see Data Source Controls Overview.

  3. Configure the data source control with connection string and query information. (To populate a list control, you need to define only a SELECT query.)

  4. Set the list control's DataSourceID property to the ID of the data source control.

  5. Specify which fields in the data source should be used to populate each item by setting the following properties:

    • DataTextField   The name of the field whose value will be displayed in the list.

    • DataTextFormatString    A formatting expression for the list item text. The following table shows examples of formatting strings:

      `
      Expression Description

      Price: {0:C}

      For numeric/decimal data. Displays the literal "Price:" followed by numbers in currency format. The currency format depends on the culture setting specified in the culture attribute on the Page directive or in the Web.config file.

      {0:D4}

      For integer data. Cannot be used with decimal numbers. Integers are displayed in a zero-padded field that is four characters wide.

      {0:N2}%

      For numeric data. Displays the number with 2-decimal place precision followed by the literal "%".

      {0:000.0}

      For numeric/decimal data. Numbers are rounded to one decimal place. Numbers less than three digits are zero-padded.

      {0:D}

      For date/time data. Displays long date format ("Thursday, August 06, 1996"). Date format depends on the culture setting of the page or the Web.config file.

      {0:d}

      For date/time data. Displays short date format ("12/31/99").

      {0:yy-MM-dd}

      For date/time data. Displays date in numeric year-month-day format (96-08-06)

      For information about creating a formatting expression, see Composite Formatting.

    • DataValueField   The name of the field to be used for the Value property of each list item.

    If the data source has only one field, you do not have to explicitly set these fields, because the control will simply display the single field.

  6. Optionally set the control's AutoPostBack property to allow the list control to post back when a selection is made.

    If the AutoPostBack property is set to false, you must provide some other means for the user to submit the page, such as a Button control.

    The following example shows how to populate a ListBox control with data from a SQL Server database by binding it to a SqlDataSource control. The SqlDataSource control reads data from the Categories table in the Northwind database. (The connection string for the control is stored in the Web.config file). The ListBox control displays the CategoryName field and uses the CategoryID field as the value of each item.

  7. Optionally, include one or more static items that you define at design time. To populate the list control with both static items and items generated from a data source, set the list control's AppendDataBoundItems property to true. The following example shows a DropDownList control that includes a static item that reads "Select from list" but otherwise is populated from a database table. A CompareValidator control is bound to the DropDownList control and is configured not to allow users to select the static item.

    

   Select from list




    Please select an item!
--MSDN
 For Support