ptg 664 CHAPTER 14 Using the ListView and DataPager Controls NOTE In ASP.NET 3.5, the LayoutTemplate was required and it needed to contain a server- side control with an ID of itemContainer. In ASP.NET 4, LayoutTemplate is no longer required. The ItemTemplate renders each of the items from the data source (or every other item when an AlternatingItemTemplate is present). In Listing 14.1, the ItemTemplate renders a <div> tag with a solid border. A data-binding expression is used with the <div> tag to display the value of the database Title column. The AlternatingItemTemplate is optional. If it is present, every other item displayed by the ListView control is rendered with the AlternatingItemTemplate. In Listing 14.1, the AlternatingItemTemplate is used to give alternating items a silver background color. Finally, the EmptyDataTemplate displays content when no results are retrieved from the data source. In Listing 14.1, the EmptyDataTemplate is used to display the text No Records Found when no items are returned from the data source. You can use the ListView control to render any HTML elements you can imagine. You can use the ListView control to render bulleted lists, an HTML table, a blog tag cloud, or even the elements of a JavaScript array. For example, the page in Listing 14.2 uses a ListView control to render an HTML table. LISTING 14.2 TableListView.aspx <%@ Page Language=”C#” %> <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”> <html xmlns=”http://www.w3.org/1999/xhtml”> <head id=”Head1” runat=”server”> FIGURE 14.1 Displaying database records with a ListView control. From the Library of Wow! eBook ptg 665 Using the ListView Control 14 <title>Table ListView</title> </head> <body> <form id=”form1” runat=”server”> <div> <asp:ListView ID=”lstMovies” DataSourceId=”srcMovies” runat=”server”> <LayoutTemplate> <table> <thead> <tr> <th>Title</th> <th>Director</th> </tr> </thead> <tbody> <asp:Placeholder id=”itemPlaceholder” runat=”server” /> </tbody> </table> </LayoutTemplate> <ItemTemplate> <tr> <td><%# Eval(“Title”) %></td> <td><%# Eval(“Director”) %></td> </tr> </ItemTemplate> <EmptyDataTemplate> No records found </EmptyDataTemplate> </asp:ListView> <asp:SqlDataSource id=”srcMovies” SelectCommand=”SELECT Id, Title, Director FROM Movie” ConnectionString=’<%$ ConnectionStrings:con %>’ Runat=”server” /> </div> </form> </body> </html> From the Library of Wow! eBook ptg 666 Notice that the itemContainer in Listing 14.2 is the <tbody> element. The <tbody> element contains each row of the table. Each row is rendered by the ItemTemplate (see Figure 14.2). CHAPTER 14 Using the ListView and DataPager Controls Using the GroupTemplate You can use the ListView control’s GroupTemplate to group multiple items together. Grouping items is useful when you want to display items in multiple columns. For example, you might want to display a photo gallery in which three pictures are displayed per row. The page in Listing 14.3 displays a set of photographs within a series of HTML <div> tags. A maximum of three photographs display in each <div> tag (see Figure 14.3). FIGURE 14.2 Displaying a table with a ListView control. From the Library of Wow! eBook ptg 667 Using the ListView Control 14 LISTING 14.3 PhotoGallery.aspx <%@ Page Language=”C#” %> <%@ Import Namespace=”System.Collections.Generic” %> <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”> <script runat=”server”> void Page_Load() { List<string> photos = new List<string>(); photos.Add( “~/Images/Ascent.jpg” ); photos.Add( “~/Images/Autumn.jpg” ); photos.Add( “~/Images/Azul.jpg” ); photos.Add( “~/Images/Home.jpg” ); photos.Add( “~/Images/Peace.jpg” ); photos.Add( “~/Images/Stonehenge.jpg” ); photos.Add( “~/Images/Tulips.jpg” ); lstPhotos.DataSource = photos; lstPhotos.DataBind(); } </script> <html xmlns=”http://www.w3.org/1999/xhtml”> FIGURE 14.3 Displaying a photo gallery with a ListView control. From the Library of Wow! eBook ptg 668 CHAPTER 14 Using the ListView and DataPager Controls <head runat=”server”> <title>Photo Gallery</title> </head> <body> <form id=”form1” runat=”server”> <div> <asp:ListView ID=”lstPhotos” GroupItemCount=”3” runat=”server”> <LayoutTemplate><asp:Placeholder id=”groupPlaceholder” runat=”server” /> </LayoutTemplate> <GroupTemplate> <div> <asp:Placeholder id=”itemPlaceholder” runat=”server” /> </div> </GroupTemplate> <ItemTemplate> <asp:Image id=”imgPhoto” ImageUrl=’<%# Container.DataItem %>’ Width=”200px” Runat=”server” /> </ItemTemplate> </asp:ListView> </div> </form> </body> </html> In Listing 14.3, the photographs are represented with a List collection. The List is bound to the ListView programmatically in the Page_Load() method. Notice that the ListView includes a LayoutTemplate, GroupTemplate, and ItemTemplate. In previous listings, the LayoutTemplate included an element with an ID of itemContainer. In this listing, the LayoutTemplate includes an element with an ID of groupContainer. The contents of the GroupTemplate are added to the element in the LayoutTemplate with an ID of groupContainer. The GroupTemplate includes the itemContainer element. The contents of the ItemTemplate are rendered within the itemContainer element in the GroupTemplate. From the Library of Wow! eBook ptg 669 Using the ListView Control 14 Notice that the ListView control includes a GroupItemCount attribute. This property determines the number of items displayed in a GroupTemplate before a new GroupTemplate is created. NOTE The ListView control also supports an EmptyItemTemplate that can be used to ren- der content for the leftover items in a GroupTemplate. For example, if you set the GroupItemCount property to 3 and there are four items, the contents of the EmptyItemTemplate display for the final two items. Selecting a Row You can set up the ListView control so you can use it to select items. This is useful when you want to create a master/detail form. For example, the page in Listing 14.4 contains two ListView controls. The first ListView works like a tab strip. It enables you to select a movie category. The second ListView displays a numbered list of matching movies. LISTING 14.4 MasterDetail.aspx <%@ Page Language=”C#” %> <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”> <html xmlns=”http://www.w3.org/1999/xhtml”> <head runat=”server”> <title>Master/Detail</title> <style type=”text/css”> .categoryContainer div { width: 100px; font-size:small; border: 1px solid black; float:left; padding:3px; margin:3px; } .categoryContainer a { text-decoration:none; } .categoryContainer div:hover { From the Library of Wow! eBook ptg 670 CHAPTER 14 Using the ListView and DataPager Controls background-color:#eeeeee; } #selected { background-color:silver; } </style> </head> <body> <form id=”form1” runat=”server”> <div> <asp:ListView ID=”lstMovieCategories” DataSourceId=”srcMovieCategory” DataKeyNames=”Id” runat=”server”> <LayoutTemplate> <div id=”itemContainer” class=”categoryContainer” runat=”server”> </div> </LayoutTemplate> <ItemTemplate> <div> <asp:LinkButton id=”lnkSelect” Text=’<%# Eval(“Name”) %>’ CommandName=”Select” Runat=”server” /> </div> </ItemTemplate> <SelectedItemTemplate> <div id=”selected”> <%# Eval(“Name”) %> </div> </SelectedItemTemplate> </asp:ListView> <br style=”clear:both” /><br /> <asp:ListView ID=”lstMovies” From the Library of Wow! eBook ptg 671 Using the ListView Control 14 DataSourceId=”srcMovies” runat=”server”> <LayoutTemplate> <ol id=”itemContainer” runat=”server”> </ol> </LayoutTemplate> <ItemTemplate> <li><%# Eval(“Title”) %></li> </ItemTemplate> </asp:ListView> <asp:SqlDataSource id=”srcMovieCategory” SelectCommand=”SELECT Id, Name FROM MovieCategory” ConnectionString=’<%$ ConnectionStrings:con %>’ Runat=”server” /> <asp:SqlDataSource id=”srcMovies” SelectCommand=”SELECT Title FROM Movie WHERE CategoryId=@CategoryId” ConnectionString=’<%$ ConnectionStrings:con %>’ Runat=”server”> <SelectParameters> <asp:ControlParameter Name=”CategoryId” ControlID=”lstMovieCategories” /> </SelectParameters> </asp:SqlDataSource> </div> </form> </body> </html> The first ListView control in Listing 14.4 renders something resembling a tab strip (see Figure 14.4). Notice that this ListView control has its DataKeyNames property set. Setting the DataKeyNames property causes the ListView control to build a hidden collection of primary key values when the ListView is bound to its data source. Each item in the ListView is asso- ciated with an ID value. From the Library of Wow! eBook ptg 672 CHAPTER 14 Using the ListView and DataPager Controls Furthermore, notice that the ListView control includes a SelectedItemTemplate. The contents of this template are rendered for the selected item in the ListView. You select an item by clicking one of the links rendered by the ListView control’s ItemTemplate. The links are rendered with a LinkButton control. Notice that the CommandName property of the LinkButton has the value Select. This magic command name causes the ListView to change the selected item. The second ListView control uses the first ListView control as the source value for a select parameter. When you select a new item in the first ListView control, the second ListView control displays matching movies. Sorting Database Data You can sort the items in a ListView control by adding one or more button controls to ListView that have a CommandName property set to the value Sort and a CommandArgument property set to the name of a property to sort by. For example, the page in Listing 14.5 contains a ListView control that renders an HTML table. You can click the column headers to sort the table by a particular column (see Figure 14.5). FIGURE 14.4 Displaying a master/detail form with a ListView control. From the Library of Wow! eBook ptg 673 Using the ListView Control 14 LISTING 14.5 SortListView.aspx <%@ Page Language=”C#” %> <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”> <html xmlns=”http://www.w3.org/1999/xhtml”> <head id=”Head1” runat=”server”> <title>Sort ListView</title> </head> <body> <form id=”form1” runat=”server”> <div> <asp:ListView ID=”lstMovies” DataSourceId=”srcMovies” runat=”server”> <LayoutTemplate> <table> <thead> <tr> <th> <asp:LinkButton id=”lnkTitle” FIGURE 14.5 Sorting data with the ListView control. From the Library of Wow! eBook . display items in multiple columns. For example, you might want to display a photo gallery in which three pictures are displayed per row. The page in Listing 14. 3 displays a set of photographs. “~/Images/Autumn.jpg” ); photos.Add( “~/Images/Azul.jpg” ); photos.Add( “~/Images/Home.jpg” ); photos.Add( “~/Images/Peace.jpg” ); photos.Add( “~/Images/Stonehenge.jpg” ); photos.Add( “~/Images/Tulips.jpg”. <div> < ;asp: ListView ID=”lstPhotos” GroupItemCount=”3” runat=”server”> <LayoutTemplate>< ;asp: Placeholder id=”groupPlaceholder” runat=”server” /> </LayoutTemplate> <GroupTemplate>