ptg 464 CHAPTER 10 Using List Controls LISTING 10.11 ShowListBox.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 = lstMovies.SelectedItem.Text; } </script> <html xmlns=”http://www.w3.org/1999/xhtml” > <head id=”Head1” runat=”server”> <title>Show ListBox</title> </head> <body> <form id=”form1” runat=”server”> <div> <asp:ListBox id=”lstMovies” DataSourceID=”srcMovies” DataTextField=”Title” DataValueField=”Id” Rows=”8” Runat=”server” /> <p> <asp:Button id=”btnSubmit” Text=”Submit” OnClick=”btnSubmit_Click” Runat=”server” /> </p> <hr /> <asp:Label id=”lblMovie” Runat=”server” /> <asp:SqlDataSource id=”srcMovies” From the Library of Wow! eBook ptg 465 Working with the ListBox Control 10 SelectCommand=”SELECT Id, Title FROM Movies” ConnectionString=”<%$ ConnectionStrings:Movies %>” Runat=”server” /> </div> </form> </body> </html> The ListBox control in Listing 10.11 includes a Rows property. The Rows property deter- mines 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=”C#” %> <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN” “http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd”> <script runat=”server”> From the Library of Wow! eBook ptg 466 CHAPTER 10 Using List Controls protected void btnSubmit_Click(object sender, EventArgs e) { foreach (ListItem item in lstMovies.Items) if (item.Selected) lblMovie.Text += “<li>” + item.Text; } </script> <html xmlns=”http://www.w3.org/1999/xhtml” > <head id=”Head1” runat=”server”> <title>Show Multiple ListBox</title> </head> <body> <form id=”form1” runat=”server”> <div> <asp:ListBox id=”lstMovies” DataSourceID=”srcMovies” DataTextField=”Title” DataValueField=”Id” SelectionMode=”Multiple” Runat=”server” /> <p> <asp:Button id=”btnSubmit” Text=”Submit” OnClick=”btnSubmit_Click” Runat=”server” /> </p> <hr /> <asp:Label id=”lblMovie” EnableViewState=”false” Runat=”server” /> <asp:SqlDataSource id=”srcMovies” SelectCommand=”SELECT Id, Title FROM Movies” From the Library of Wow! eBook ptg 467 Working with the CheckBoxList Control 10 ConnectionString=”<%$ ConnectionStrings:Movies %>” Runat=”server” /> </div> </form> </body> </html> 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 allow 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). When you click the Submit button in Listing 10.12, all the selected list items display 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. Working with the CheckBoxList Control The CheckBoxList control renders a list of check boxes, which can be rendered horizon- tally or vertically. Unlike the other List controls, a user always can select multiple items when using a CheckBoxList control. For example, the page in Listing 10.13 contains a CheckBoxList control that renders its list items in two columns (see Figure 10.12). From the Library of Wow! eBook ptg 468 CHAPTER 10 Using List Controls LISTING 10.13 ShowCheckBoxList.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) { foreach (ListItem item in cblMovies.Items) if (item.Selected) lblMovie.Text += “<li>” + item.Text; } </script> <html xmlns=”http://www.w3.org/1999/xhtml” > <head id=”Head1” runat=”server”> <title>Show CheckBoxList</title> </head> <body> <form id=”form1” runat=”server”> <div> FIGURE 10.12 Displaying list items with the CheckBoxList control. From the Library of Wow! eBook ptg 469 Working with the CheckBoxList Control 10 <asp:CheckBoxList id=”cblMovies” DataSourceID=”srcMovies” DataTextField=”Title” DataValueField=”Id” RepeatColumns=”2” Runat=”server” /> <p> <asp:Button id=”btnSubmit” Text=”Submit” OnClick=”btnSubmit_Click” Runat=”server” /> </p> <hr /> <asp:Label id=”lblMovie” EnableViewState=”false” Runat=”server” /> <asp:SqlDataSource id=”srcMovies” SelectCommand=”SELECT Id, Title FROM Movies” ConnectionString=”<%$ ConnectionStrings:Movies %>” Runat=”server” /> </div> </form> </body> </html> When you click the Submit button, the values of the Text property of any selected check boxes display in a Label control. The selected check boxes are retrieved from the CheckBoxList control’s Items property. The CheckBoxList control includes three properties that affect its layout: . RepeatColumns—The number of columns of check boxes to display. . RepeatDirection—The direction in which the check boxes are rendered. Possible values are Horizontal and Vertical. . RepeatLayout—Determines whether the check boxes display in an HTML table. Possible values are Table and Flow. From the Library of Wow! eBook ptg 470 CHAPTER 10 Using List Controls Normally, a CheckBoxList control renders its list items in an HTML table. When the RepeatLayout property is set to the value Flow, the items are not rendered in a table. Working with the BulletedList Control The BulletedList control renders either an unordered (bulleted) or ordered (numbered) list. Each list item can be rendered as plain text, a LinkButton control, or a link to another web page. For example, the page in Listing 10.14 uses the BulletedList control to render an unordered list of movies (see Figure 10.13). FIGURE 10.13 Displaying a list items with the BulletedList control. LISTING 10.14 ShowBulletedList.aspx <%@ Page Language=”C#” %> <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN” “http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd”> <html xmlns=”http://www.w3.org/1999/xhtml” > <head id=”Head1” runat=”server”> <title>Show BulletedList</title> </head> From the Library of Wow! eBook ptg 471 Working with the BulletedList Control 10 <body> <form id=”form1” runat=”server”> <div> <asp:BulletedList id=”blMovies” DataSourceID=”srcMovies” DataTextField=”Title” Runat=”server” /> <asp:SqlDataSource id=”srcMovies” SelectCommand=”SELECT Title FROM Movies” ConnectionString=”<%$ ConnectionStrings:Movies %>” Runat=”server” /> </div> </form> </body> </html> You can control the appearance of the bullets that appear for each list item with the BulletStyle property. This property accepts the following values: . Circle . CustomImage . Disc . LowerAlpha . LowerRoman . NotSet . Numbered . Square . UpperAlpha . UpperRoman You can set BulletStyle to Numbered to display a numbered list. If you set this property to the value CustomImage and assign an image path to the BulletImageUrl property, you can associate an image with each list item. For example, the page in Listing 10.15 displays an image named Bullet.gif with each list item (see Figure 10.14). From the Library of Wow! eBook ptg 472 CHAPTER 10 Using List Controls LISTING 10.15 ShowBulletedListImage.aspx <%@ Page Language=”C#” %> <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN” “http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd”> <html xmlns=”http://www.w3.org/1999/xhtml” > <head id=”Head1” runat=”server”> <title>Show BulletedList Image</title> </head> <body> <form id=”form1” runat=”server”> <div> <asp:BulletedList id=”blMovies” DataSourceID=”srcMovies” DataTextField=”Title” BulletStyle=”CustomImage” BulletImageUrl=”~/Images/Bullet.gif” Runat=”server” /> FIGURE 10.14 Displaying image bullets. From the Library of Wow! eBook ptg 473 Working with the BulletedList Control 10 <asp:SqlDataSource id=”srcMovies” SelectCommand=”SELECT Title FROM Movies” ConnectionString=”<%$ ConnectionStrings:Movies %>” Runat=”server” /> </div> </form> </body> </html> You can modify the appearance of each list item by modifying the value of the DisplayMode property. This property accepts one of the following values from the BulletedListDisplayMode enumeration: . HyperLink—Each list item renders as a link to another page. . LinkButton—Each list item renders by a LinkButton control. . Text—Each list item renders as plain text. For example, the page in Listing 10.16 displays a list of links to other websites (see Figure 10.15). FIGURE 10.15 Displaying list items as hyperlinks. From the Library of Wow! eBook . ptg 46 4 CHAPTER 10 Using List Controls LISTING 10.11 ShowListBox.aspx <%@ Page Language=”C#” %> <!DOCTYPE html PUBLIC -/ /W3C//DTD XHTML 1.1//EN” “http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd”>. UpperAlpha . UpperRoman You can set BulletStyle to Numbered to display a numbered list. If you set this property to the value CustomImage and assign an image path to the BulletImageUrl property,. control the appearance of the bullets that appear for each list item with the BulletStyle property. This property accepts the following values: . Circle . CustomImage . Disc . LowerAlpha . LowerRoman .