ptg 624 CHAPTER 13 Using the Repeater and DataList Controls Displaying Data with the Repeater Control To display data with the Repeater control, you must create an ItemTemplate. For example, the page in Listing 13.1 displays the contents of the Movies database table (see Figure 13.1). LISTING 13.1 ShowRepeater.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”> <style type=”text/css”> html { background-color:silver; } .content { width:600px; border:solid 1px black; background-color:#eeeeee; } FIGURE 13.1 Displaying data with a Repeater control. From the Library of Wow! eBook ptg 625 Using the Repeater Control 13 .movies { margin:20px 10px; padding:10px; border:dashed 2px black; background-color:white; } </style> <title>Show Repeater</title> </head> <body> <form id=”form1” runat=”server”> <div class=”content”> <asp:Repeater id=”rptMovies” DataSourceID=”srcMovies” Runat=”server”> <ItemTemplate> <div class=”movies”> <h1><%#Eval(“Title”) %></h1> <b>Directed by:</b> <%# Eval(“Director”) %> <br /> <b>Box Office Totals:</b> <%# Eval(“BoxOfficeTotals”,”{0:c}”) %> </div> </ItemTemplate> </asp:Repeater> <asp:SqlDataSource id=”srcMovies” ConnectionString=”<%$ ConnectionStrings:Movies %>” SelectCommand=”SELECT Title,Director,BoxOfficeTotals FROM Movies” Runat=”server” /> </div> </form> </body> </html> The Repeater control in Listing 13.1 displays each record in a separate HTML <div> tag. A databinding expression is used to display the value of each column. In Listing 13.1, declarative databinding is used to bind the Repeater to the SqlDataSource. You also can databind a Repeater control programmatically. From the Library of Wow! eBook ptg 626 For example, the page in Listing 13.2 contains a Repeater control that renders a JavaScript array. The Repeater control is programmatically databound to the list of files in the Photos directory. LISTING 13.2 ShowRepeaterPhotos.aspx <%@ Page Language=”C#” %> <%@ Import Namespace=”System.IO” %> <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN” “http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd”> <script runat=”server”> void Page_Load() { if (!Page.IsPostBack) { DirectoryInfo dir = new DirectoryInfo(MapPath(“~/Photos”)); rptPhotos.DataSource = dir.GetFiles(“*.jpg”); rptPhotos.DataBind(); } } </script> <html xmlns=”http://www.w3.org/1999/xhtml” > <head id=”Head1” runat=”server”> <style type=”text/css”> .photo { width:400px; background-color:white; filter:progid:DXImageTransform.Microsoft.Fade(duration=2); } </style> <script type=”text/javascript”> var photos = new Array(); window.setInterval(showImage, 5000); function showImage() { if (photos.length > 0) { var index = Math.floor(Math.random() * photos.length); var image = document.getElementById(‘imgPhoto’); image.src = photos[index]; if (image.filters) { image.filters[0].Apply(); CHAPTER 13 Using the Repeater and DataList Controls From the Library of Wow! eBook ptg 627 Using the Repeater Control 13 image.filters[0].Play(); } } } </script> <title>Show Repeater Photos</title> </head> <body> <form id=”form1” runat=”server”> <div> <img id=”imgPhoto” alt=”” class=”photo” /> <script type=”text/javascript”> <asp:Repeater id=”rptPhotos” Runat=”server”> <ItemTemplate> <%# Eval(“Name”, “photos.push(‘Photos/{0}’)”) %> </ItemTemplate> </asp:Repeater> showImage(); </script> </div> </form> </body> </html> The page in Listing 13.2 randomly displays a different photo every 5 seconds. A random image is selected from the JavaScript array and displayed by the JavaScript showImage() function. An Internet Explorer transition filter is used to create a fade-in effect. WEB STANDARDS NOTE The transition filter is an Internet Explorer-only extension to Cascading Style Sheets (CSS). The page still works with Opera and Firefox, but you don’t get the fade-in effect. Using Templates with the Repeater Control The Repeater control supports five different types of templates: . ItemTemplate—Formats each item from the data source. . AlternatingItemTemplate—Formats every other item from the data source. From the Library of Wow! eBook ptg 628 . SeparatorTemplate—Formats between each item from the data source. . HeaderTemplate—Formats before all items from the data source. . FooterTemplate—Formats after all items from the data source. You are required to use only an ItemTemplate; the other types of templates can be used at your own discretion. The order in which you declare the templates in the Repeater control does not matter. You can use the SeparatorTemplate to create a banding effect (as in old-time computer paper). In other words, you can use the SeparatorTemplate to display alternating rows with a different background color. This approach is illustrated by the page in Listing 13.3 (see Figure 13.2). CHAPTER 13 Using the Repeater and DataList Controls FIGURE 13.2 Displaying an HTML table with the Repeater control. LISTING 13.3 ShowRepeaterTable.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”> <style type=”text/css”> html { From the Library of Wow! eBook ptg 629 Using the Repeater Control 13 background-color:silver; } .content { width:600px; border:solid 1px black; background-color:white; } .movies { border-collapse:collapse; } .movies th,.movies td { padding:10px; border-bottom:1px solid black; } .alternating { background-color:#eeeeee; } </style> <title>Show Repeater Table</title> </head> <body> <form id=”form1” runat=”server”> <div class=”content”> <asp:Repeater id=”rptMovies” DataSourceID=”srcMovies” Runat=”server”> <HeaderTemplate> <table class=”movies”> <tr> <th>Movie Title</th> <th>Movie Director</th> <th>Box Office Totals</th> </tr> </HeaderTemplate> <ItemTemplate> <tr> <td><%#Eval(“Title”) %></td> <td><%#Eval(“Director”) %></td> <td><%#Eval(“BoxOfficeTotals”,”{0:c}”) %></td> From the Library of Wow! eBook ptg 630 CHAPTER 13 Using the Repeater and DataList Controls </tr> </ItemTemplate> <AlternatingItemTemplate> <tr class=”alternating”> <td><%#Eval(“Title”) %></td> <td><%#Eval(“Director”) %></td> <td><%#Eval(“BoxOfficeTotals”,”{0:c}”) %></td> </tr> </AlternatingItemTemplate> <FooterTemplate> </table> </FooterTemplate> </asp:Repeater> <asp:SqlDataSource id=”srcMovies” ConnectionString=”<%$ ConnectionStrings:Movies %>” SelectCommand=”SELECT Title,Director,BoxOfficeTotals FROM Movies” Runat=”server” /> </div> </form> </body> </html> The Repeater control in Listing 13.3 renders an HTML table in which every other row appears with a gray background color. This Repeater control uses four out of five of the templates supported by Repeater: the ItemTemplate, AlternatingItemTemplate, HeaderTemplate, and FooterTemplate. The AlternatingItemTemplate contains almost exactly the same content as the ItemTemplate. The only difference is that the <tr> tag includes a class attribute that changes its background color. The SeparatorTemplate is used to add content between each data item from the data source. For example, the page in Listing 13.4 uses a SeparatorItemTemplate to create a tab strip with the Repeater control (see Figure 13.3). From the Library of Wow! eBook ptg 631 Using the Repeater Control 13 LISTING 13.4 ShowSeparatorTemplate.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”> <style type=”text/css”> html { background-color:silver; } .content { width:600px; height:400px; padding:10px; border:solid 1px black; background-color:white; } a { color:blue; FIGURE 13.3 Displaying a tab strip with the Repeater control. From the Library of Wow! eBook ptg 632 CHAPTER 13 Using the Repeater and DataList Controls } </style> <title>Show SeparatorTemplate</title> </head> <body> <form id=”form1” runat=”server”> <div class=”content”> <asp:Repeater id=”rptMovieCategories” DataSourceID=”srcMovieCategories” Runat=”server”> <ItemTemplate> <asp:HyperLink id=”lnkMenu” Text=’<%#Eval(“Name”)%>’ NavigateUrl=’<%#Eval(“Id”,”ShowSeparatorTemplate.aspx?id={0}”)%>’ Runat=”server” /> </ItemTemplate> <SeparatorTemplate> | </SeparatorTemplate> </asp:Repeater> <asp:Repeater id=”rptMovies” DataSourceID=”srcMovies” Runat=”server”> <HeaderTemplate> <ul> </HeaderTemplate> <ItemTemplate> <li><%#Eval(“Title”)%></li> </ItemTemplate> <FooterTemplate> </ul> </FooterTemplate> </asp:Repeater> <asp:SqlDataSource id=”srcMovieCategories” ConnectionString=”<%$ ConnectionStrings:Movies %>” SelectCommand=”SELECT Id, Name FROM MovieCategories” Runat=”server” /> From the Library of Wow! eBook ptg 633 Using the Repeater Control 13 <asp:SqlDataSource id=”srcMovies” ConnectionString=”<%$ ConnectionStrings:Movies %>” SelectCommand=”SELECT Title FROM Movies WHERE CategoryId=@CategoryId” Runat=”server”> <SelectParameters> <asp:QueryStringParameter Name=”CategoryId” QueryStringField=”Id” /> </SelectParameters> </asp:SqlDataSource> </div> </form> </body> </html> The page in Listing 13.4 contains two Repeater controls. The first Repeater control displays a tab strip of movie categories. The second Repeater control displays a bulleted list of matching movies. Handling Repeater Control Events The Repeater control supports the following events: . DataBinding—Raised when the Repeater control is bound to its data source. . ItemCommand—Raised when a control contained in the Repeater control raises an event. . ItemCreated—Raised when each Repeater item is created. . ItemDataBound—Raised when each Repeater item is bound. The page in Listing 13.5 illustrates how you can use the DataBinding, ItemCommand, and ItemDataBound events. This page uses a Repeater control to update, delete, and insert database records (see Figure 13.4). From the Library of Wow! eBook . NavigateUrl=’<%#Eval(“Id”,”ShowSeparatorTemplate.aspx?id={0}”)%>’ Runat=”server” /> </ItemTemplate> <SeparatorTemplate> | </SeparatorTemplate> < /asp: Repeater> < ;asp: Repeater. type=”text/javascript”> < ;asp: Repeater id=”rptPhotos” Runat=”server”> <ItemTemplate> <%# Eval(“Name”, “photos.push(‘Photos/{0}’)”) %> </ItemTemplate> < /asp: Repeater> showImage();. Wow! eBook ptg 631 Using the Repeater Control 13 LISTING 13 .4 ShowSeparatorTemplate.aspx <%@ Page Language=”C#” %> <!DOCTYPE html PUBLIC -/ /W3C//DTD XHTML 1.1//EN” “http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd”>