Web Forms - Working with ASP.NET server controls

Using Drop-Down Lists

Drop-down lists hide the lists of items the users can select from until the users click the control's down-arrow button. Clicking that button makes the control display its drop-down list, and the user can select an item in that list—she can't select multiple items because the list closes as soon as a selection is made.

You can see a drop-down list in the DropDownList example in the code for this book, which appears in Figure 14.7.

When you've selected an item in a drop-down list, you can use the control's SelectedIndex and SelectedItem properties in code to determine what selection was made. The SelectedIndex property gives you the index in the list of the selected item, and the SelectedItem property gives you the actual ListItem object that corresponds to the selected item. You can use the ListItem class's Value, Text, and Selected properties to get more information about the selection.

The DropDownList example in the code for this book uses the SelectedItem property to get the selected ListItem object and displays that item's text, as you see in Figure 14.8.


Figure 14.7

The DropDownList example.


Figure 14.8

Selecting an item in a drop-down list example.

Similar to Web server list boxes, drop-down lists are supported with <select> controls. In this case, the <select> controls are created without a size attribute, which means that the browser will create a drop-down list instead of a list box. (The size attribute indicates how many items in the list to display at one time, and if you omit it, the browser displays a drop-down list.) Here's the HTML that creates the drop-down list you see in Figure 14.7:

<select name="DropDownList1" onchange="__
doPostBack('DropDownList1','')" language="javascript"
id="DropDownList1" style="width:110px;Z-INDEX: 102; LEFT: 182px;
POSITION: absolute; TOP: 90px">
  <option value="Item 0">Item 0</option>
  <option value="Item 1">Item 1</option>
  <option value="Item 2">Item 2</option>
  <option value="Item 3">Item 3</option>
  <option value="Item 4">Item 4</option>
  <option value="Item 5">Item 5</option>
  <option value="Item 6">Item 6</option>
  <option value="Item 7">Item 7</option>
  <option value="Item 8">Item 8</option>
  <option value="Item 9">Item 9</option>
</select>

This control is supported with the System.Web.UI.WebControls.DropDownList class, and here is the hierarchy of that class:

System.Object
  System.Web.UI.Control
    System.Web.UI.WebControls.WebControl
      System.Web.UI.WebControls.ListControl
        System.Web.UI.WebControls.DropDownList

You can find the significant public properties of System.Web.UI.WebControls. DropDownList objects in Table 14.5. (This control has no non-inherited methods or events.) Note that as with other Web server controls, this table does not list the significant properties, methods, and events this class inherits from the Control and WebControl classes—you can find them in Tables 12.1 to 12.5. This class inherits the ListControl class, and you can find the significant public properties of ListControl objects in Table 13.4 and their significant public event in Table 13.5 (the ListControl class has no non-inherited methods).

Table 14.5 Significant Public Properties of DropDownList Objects

Property Means
Items Returns the collection of items (as ListItem objects) in the control.
SelectedIndex Returns or sets the selected item's index.
SelectedItem Returns the ListItem object corresponding to the selected item.
SelectedValue Returns the value of the Value property of the selected item.

Note that the ListControl class's Items property returns a collection of ListItem objects, which you can use to access an item in a list box. You can find the significant public properties of ListItem objects in Table 13.6. (The ListItem class has no non-inherited methods or events.)

As with list boxes, you need to set this control's AutoPostBack property to True if you want events handled on the server as soon as they happen. Determining the selection the user has made in a drop-down list is easy—because you can only select one item at a time in a drop-down list, you use the SelectedItem and SelectedIndex properties of this control. Here's how that works in the DropDownLists example:

Private Sub DropDownList1_SelectedIndexChanged(ByVal _
sender As System.Object, ByVal e As System.EventArgs) _
Handles DropDownList1.SelectedIndexChanged
  TextBox1.Text = "You selected " & DropDownList1.SelectedItem.Text
End Sub

There's another property worth looking at both here and in standard list boxes—the Value property.

You might also like...

Comments

Contribute

Why not write for us? Or you could submit an event or a user group in your area. Alternatively just tell us what you think!

Our tools

We've got automatic conversion tools to convert C# to VB.NET, VB.NET to C#. Also you can compress javascript and compress css and generate sql connection strings.

“Debugging is twice as hard as writing the code in the first place. Therefore, if you write the code as cleverly as possible, you are, by definition, not smart enough to debug it.” - Brian Kernighan