Working with the DropDownList Control

Working with the `DropDownList` Control

The DropDownList control enables you to display a list of options while requiring a minimum of screen real estate. A user can select only one option at a time when using this control.

The page in Listing 10.9 illustrates how you can use the DropDownList control to display all the movie titles from the Movies database table (see Figure 10.8).

Figure 10.8. Displaying list items with the `DropDownList` control.

Listing 10.9. `ShowDropDownList.aspx`

<%@ Page Language="VB" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <script runat="server">     Protected  Sub btnSubmit_Click(ByVal sender As Object, ByVal e As EventArgs)         lblMovie.Text = ddlMovies.SelectedItem.Text     End Sub </script> <html xmlns="http://www.w3.org/1999/xhtml" > <head  runat="server">     <title>Show DropDownList</title> </head> <body>     <form  runat="server">     <div>     <asp:DropDownList                  DataSource         DataTextField="Title"         DataValueField="Id"         Runat="server" />     <asp:Button                  Text="Submit"         OnClick="btnSubmit_Click"         Runat="server" />     <hr />     <asp:Label                  Runat="server" />     <asp:SqlDataSource                  SelectCommand="SELECT Id, Title FROM Movies"         ConnectionString="<%$ ConnectionStrings:Movies %>"         Runat="server" />     </div>     </form> </body> </html>

The DropDownList control renders an HTML <select> tag. One problem with the HTML <select> tag is that it has an infinite z index. In other words, you can't place other objects, such as an absolutely positioned <div> tag, in front of a DropDownList control in a page.

One way to get around this problem is to use a third-party control such as the EasyListBox control (available at http://www.EasyListBox.com). This control works fine when other objects are layered over it. It also supports several advanced features such as multiple columns and images in list items.

Working with the DropDownList Control