Working with the ListBox Control

Working with the `ListBox` Control

The ListBox control is similar to the DropDownList control with two important differences. First, the ListBox control requires more screen real estate because it always displays a certain number of list items. Furthermore, unlike the DropDownList control, the ListBox control enables a user to select multiple items.

The page in Listing 10.11 illustrates how you can enable a user to select a single item from a ListBox control (see Figure 10.10).

Figure 10.10. Displaying list items with the `ListBox` control.

Listing 10.11. `ShowListBox.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 = lstMovies.SelectedItem.Text     End Sub </script> <html xmlns="http://www.w3.org/1999/xhtml" > <head  runat="server">     <title>Show ListBox</title> </head> <body>     <form  runat="server">     <div>     <asp:ListBox                  DataSource         DataTextField="Title"         DataValueField="Id"         Rows="8"         Runat="server" />     <p>     <asp:Button                  Text="Submit"         OnClick="btnSubmit_Click"         Runat="server" />     </p>     <hr />     <asp:Label                  Runat="server" />     <asp:SqlDataSource                  SelectCommand="SELECT Id, Title FROM Movies"         ConnectionString="<%$ ConnectionStrings:Movies %>"         Runat="server" />     </div>     </form> </body> </html>

Notice that the ListBox control in Listing 10.11 includes a Rows property. The Rows property determines the number of list items that the ListBox displays.

You can also configure the ListBox control to enable a user to select multiple items. This is illustrated in the page in Listing 10.12 (see Figure 10.11).

Figure 10.11. Selecting multiple list items.

Listing 10.12. `ShowMultipleListBox.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)         For Each item As ListItem In lstMovies.Items             If item.Selected Then                 lblMovie.Text &= "<li>" & item.Text             End If         Next     End Sub </script> <html xmlns="http://www.w3.org/1999/xhtml" > <head  runat="server">     <title>Show Multiple ListBox</title> </head> <body>     <form  runat="server">     <div>     <asp:ListBox                  DataSource         DataTextField="Title"         DataValueField="Id"         SelectionMode="Multiple"         Runat="server" />     <p>     <asp:Button                  Text="Submit"         OnClick="btnSubmit_Click"         Runat="server" />     </p>     <hr />     <asp:Label                  EnableViewState="false"         Runat="server" />     <asp:SqlDataSource                  SelectCommand="SELECT Id, Title FROM Movies"         ConnectionString="<%$ ConnectionStrings:Movies %>"         Runat="server" />     </div>     </form> </body> </html>

Notice that the ListBox in Listing 10.12 includes a SelectionMode property that is set to the value Multiple. A user can select multiple items from the ListBox by using the Ctrl or Shift key when clicking more than one list item.

Warning

Most users don't understand how to select multiple items from a ListBox control. If you want to enable users to pick multiple items, a better approach is to use either the CheckBoxList control (discussed in the next section) or the MultiSelectList control (discussed in the final section of this chapter).

When you click the Submit button in Listing 10.12, all the selected list items are displayed in a Label control. The SelectedItem, SelectedIndex, and SelectedValue properties return only the first list item selected. When multiple items are selected, you need to iterate through the Items collection of the ListBox control to detect the selected items.