ptg 454 CHAPTER 10 Using List Controls SelectCommand=”SELECT Id, Title FROM Movies” ConnectionString=”<%$ ConnectionStrings:Movies %>” Runat=”server” /> </div> </form> </body> </html> When you enable the AutoPostBack property, a JavaScript onchange() event handler is added to the List control. The onchange event is supported by all recent browsers includ- ing Firefox 1.0 and Opera 8.0. The DropDownList control has a SelectedIndexChanged event handler named ddlMovies_SelectedIndexChanged(). The SelectedIndexChanged event is raised whenever you make a new selection in the List control (independent of the AutoPostBack property). The ddlMovies_SelectedIndexChanged() method displays the selected list item in a Label control. WEB STANDARDS NOTE You should avoid using the AutoPostBack property because it creates accessibility problems for persons with disabilities. If you can’t use a mouse, and you are interact- ing with a website through the keyboard, having a page post back to the server whenev- er you make a selection change is a frustrating experience. Using the Items Collection All the list items rendered by a List control are contained in the List control’s list item collection. This collection is exposed by the Items property. You can work directly with the list items in this collection. For example, you can add or remove particular list items, or you can change the order of the list items. The page in Listing 10.8 contains two ListBox controls and two button controls. When you click the Add button, a list item is moved from the first ListBox to the second ListBox control. When you click Remove, the list item is moved back to the original List control (see Figure 10.7). From the Library of Wow! eBook ptg 455 Overview of the List Controls 10 LISTING 10.8 ListPicker.aspx <%@ Page Language=”C#” %> <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN” “http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd”> <script runat=”server”> /// <summary> /// Move item from All Movies to Favorite Movies /// </summary> protected void btnAdd_Click(object sender, EventArgs e) { ListItem item = lstAllMovies.SelectedItem; if (item != null) { lstAllMovies.Items.Remove(item); lstFavoriteMovies.ClearSelection(); lstFavoriteMovies.Items.Add(item); } } /// <summary> /// Move item from Favorite Movies to All Movies FIGURE 10.7 Using the ListPicker to select list items. From the Library of Wow! eBook ptg 456 CHAPTER 10 Using List Controls /// </summary> protected void btnRemove_Click(object sender, EventArgs e) { ListItem item = lstFavoriteMovies.SelectedItem; if (item != null) { lstFavoriteMovies.Items.Remove(item); lstAllMovies.ClearSelection(); lstAllMovies.Items.Add(item); } } /// <summary> /// When the form is submitted, /// show the contents of the /// Favorite Movies ListBox /// </summary> protected void btnSubmit_Click(object sender, EventArgs e) { foreach (ListItem item in lstFavoriteMovies.Items) lblResults.Text += “<li>” + item.Text; } </script> <html xmlns=”http://www.w3.org/1999/xhtml” > <head id=”Head1” runat=”server”> <style type=”text/css”> .listPicker { border:solid 1px black; padding:5px; width:380px; background-color:silver; } .listPicker select { width:100%; } </style> <title>List Picker</title> </head> <body> <form id=”form1” runat=”server”> From the Library of Wow! eBook ptg 457 Overview of the List Controls 10 <div class=”listPicker”> <div style=”float:left;width:40%”> <asp:ListBox id=”lstAllMovies” DataSourceID=”srcMovies” DataTextField=”Title” DataValueField=”Id” Runat=”server” /> </div> <div style=”float:left;width:20%;text-align:center”> <asp:Button id=”btnAdd” Text=” >” ToolTip=”Add List Item” Runat=”server” OnClick=”btnAdd_Click” /> <br /> <asp:Button id=”btnRemove” Text=”< ” ToolTip=”Remove List Item” Runat=”server” OnClick=”btnRemove_Click” /> </div> <div style=”float:left;width:40%”> <asp:ListBox id=”lstFavoriteMovies” Runat=”server” /> </div> <br style=”clear:both” /> </div> <p> <asp:Button id=”btnSubmit” Text=”Submit Form” Runat=”server” OnClick=”btnSubmit_Click” /> </p> <hr /> <asp:Label id=”lblResults” EnableViewState=”false” Runat=”server” /> From the Library of Wow! eBook ptg 458 CHAPTER 10 Using List Controls <asp:SqlDataSource id=”srcMovies” SelectCommand=”SELECT Id, Title FROM Movies” ConnectionString=”<%$ ConnectionStrings:Movies %>” Runat=”server” /> </form> </body> </html> The first ListBox in Listing 10.8 is bound to the Movies database table. You can use the ListBox controls to pick your favorite movies by moving movie titles from the first ListBox to the second ListBox. When you click the Add button, the btnAdd_Click() method executes. This method grabs the selected item from the All Movies ListBox and adds it to the Favorite Movies ListBox. The Remove button does exactly the opposite. Both the btnAdd_Click() and btnRemove_Click() methods call the ClearSelection() method of the ListBox class. This method iterates through all the list items and sets the Selected property for each list item to the value False. If multiple list items are selected, an exception is thrown. NOTE One problem with the page discussed in this section is that the page must be post- ed back to the server each time you move an item from the first ListBox to the sec- ond ListBox. At the end of this chapter, you learn how to create a MultiSelectList control, which uses a client-side script to get around this limitation. 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). From the Library of Wow! eBook ptg 459 Working with the DropDownList Control 10 LISTING 10.9 ShowDropDownList.aspx <%@ Page Language=”C#” %> <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN” “http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd”> <script runat=”server”> protected void btnSubmit_Click(object sender, EventArgs e) { lblMovie.Text = ddlMovies.SelectedItem.Text; } </script> <html xmlns=”http://www.w3.org/1999/xhtml” > <head id=”Head1” runat=”server”> <title>Show DropDownList</title> </head> <body> <form id=”form1” runat=”server”> <div> FIGURE 10.8 Displaying list items with the DropDownList control. From the Library of Wow! eBook ptg 460 CHAPTER 10 Using List Controls <asp:DropDownList id=”ddlMovies” DataSourceID=”srcMovies” DataTextField=”Title” DataValueField=”Id” Runat=”server” /> <asp:Button id=”btnSubmit” Text=”Submit” OnClick=”btnSubmit_Click” Runat=”server” /> <hr /> <asp:Label id=”lblMovie” Runat=”server” /> <asp:SqlDataSource id=”srcMovies” 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. From the Library of Wow! eBook ptg 461 Working with the RadioButtonList Control 10 Working with the RadioButtonList Control The RadioButtonList control, like the DropDownList control, enables a user to select only one list item at a time. The RadioButttonList control displays a list of radio buttons that can be arranged either horizontally or vertically. The page in Listing 10.10 illustrates how you can use the RadioButtonList control to display a list of movie titles (see Figure 10.9). FIGURE 10.9 Displaying list items with the RadioButtonList control. LISTING 10.10 ShowRadioButtonList.aspx <%@ Page Language=”C#” %> <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN” “http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd”> <script runat=”server”> protected void btnSubmit_Click(object sender, EventArgs e) { lblMovie.Text = rblMovies.SelectedItem.Text; } </script> <html xmlns=”http://www.w3.org/1999/xhtml” > <head id=”Head1” runat=”server”> From the Library of Wow! eBook ptg 462 CHAPTER 10 Using List Controls <title>Show RadioButtonList</title> </head> <body> <form id=”form1” runat=”server”> <div> <asp:RadioButtonList id=”rblMovies” DataSourceID=”srcMovies” DataTextField=”Title” DataValueField=”Id” RepeatColumns=”3” Runat=”server” /> <asp:Button id=”btnSubmit” Text=”Submit” Runat=”server” OnClick=”btnSubmit_Click” /> <hr /> <asp:Label id=”lblMovie” Runat=”server” /> <asp:SqlDataSource id=”srcMovies” SelectCommand=”SELECT Id, Title FROM Movies” ConnectionString=”<%$ ConnectionStrings:Movies %>” Runat=”server” /> </div> </form> </body> </html> In Listing 10.10, the radio buttons are rendered in a three-column layout. The RadioButtonList control includes three properties that have an effect on its layout: . RepeatColumns—The number of columns of radio buttons to display. . RepeatDirection—The direction that the radio buttons repeat. Possible values are Horizontal and Vertical. . RepeatLayout—Determines whether the radio buttons display in an HTML table. Possible values are Table and Flow. From the Library of Wow! eBook ptg 463 Working with the ListBox Control 10 By default, the radio buttons rendered by the RadioButtonList control are rendered in an HTML table. If you set the RepeatLayout property to the value Flow, the radio buttons are not rendered in a table. Even when the RadioButtonList renders its items in Flow layout mode, you can specify multiple columns. Working with the ListBox Control The ListBox control is similar to the DropDownList control with two important differ- ences. 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. From the Library of Wow! eBook . Wow! eBook ptg 45 9 Working with the DropDownList Control 10 LISTING 10.9 ShowDropDownList.aspx <%@ Page Language=”C#” %> <!DOCTYPE html PUBLIC -/ /W3C//DTD XHTML 1.1//EN” “http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd”>. Library of Wow! eBook ptg 45 5 Overview of the List Controls 10 LISTING 10.8 ListPicker.aspx <%@ Page Language=”C#” %> <!DOCTYPE html PUBLIC -/ /W3C//DTD XHTML 1.1//EN” “http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd”>. AutoPostBack property, a JavaScript onchange() event handler is added to the List control. The onchange event is supported by all recent browsers includ- ing Firefox 1.0 and Opera 8.0. The DropDownList