ptg 644 CHAPTER 13 Using the Repeater and DataList Controls Displaying Data in Multiple Columns You can render the contents of a DataList control into a multicolumn table in which each data item occupies a separate table cell. Two properties modify the layout of the HTML table rendered by the DataList control: . RepeatColumns—The number of columns to display. . RepeatDirection—The direction to render the cells. Possible values are Horizontal and Vertical. For example, the page in Listing 13.8 displays the contents of the Movies database table in a three-column layout (see Figure 13.6). FIGURE 13.6 Displaying a multicolumn DataList. LISTING 13.8 MultiColumnDataList.aspx <%@ Page Language=”C#” %> <html xmlns=”http://www.w3.org/1999/xhtml” > <head id=”Head1” runat=”server”> <title>MultiColumn DataList</title> </head> <body> <form id=”form1” runat=”server”> <div> From the Library of Wow! eBook ptg 645 Using the DataList Control 13 <asp:DataList id=”dlstMovies” DataSourceID=”srcMovies” RepeatColumns=”3” GridLines=”Both” Runat=”server”> <ItemTemplate> <h1><%#Eval(“Title”)%></h1> Directed by: <%#Eval(“Director”) %> <br /> Box Office Totals: <%#Eval(“BoxOfficeTotals”,”{0:c}”) %> </ItemTemplate> </asp:DataList> <asp:SqlDataSource id=”srcMovies” ConnectionString=”<%$ ConnectionStrings:Movies %>” SelectCommand=”SELECT Title,Director,BoxOfficeTotals FROM Movies” Runat=”server” /> </div> </form> </body> </html> The DataList control in Listing 13.8 includes a RepeatColumns property that has the value 3. If you set the RepeatDirection property to the value Horizontal and do not assign a value to the RepeatColumns property, the DataList renders its data items horizontally without end. NOTE You c an display data i tems in mu ltiple columns when the DataList is in Flow layout mode. In that case, <br> tags create the row breaks. Using Templates with the DataList Control The DataList control supports all the same templates as the Repeater control: . ItemTemplate—Formats each item from the data source. . AlternatingItemTemplate—Formats every other item from the data source. . SeparatorTemplate—Formats between each item from the data source. From the Library of Wow! eBook ptg 646 CHAPTER 13 Using the Repeater and DataList Controls . HeaderTemplate—Formats before all items from the data source. . FooterTemplate—Formats after all items from the data source. In addition, the DataList supports the following templates: . EditItemTemplate—Displays when a row is selected for editing. . SelectedItemTemplate—Displays when a row is selected. The DataList control in Listing 13.9 includes both a HeaderTemplate and a FooterTemplate. The HeaderTemplate contains the caption for the table. The FooterTemplate contains a Label control that displays the total for all the preceding rows (see Figure 13.7). LISTING 13.9 ShowDataListTemplates.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”> decimal totals; protected void dlstMovies_ItemDataBound(object sender, DataListItemEventArgs e) { FIGURE 13.7 Displaying a HeaderTemplate and FooterTemplate. From the Library of Wow! eBook ptg 647 Using the DataList Control 13 if (e.Item.DataItem != null) totals += (decimal)DataBinder.Eval(e.Item.DataItem, “BoxOfficeTotals”); if (e.Item.ItemType == ListItemType.Footer) { Label lblTotal = (Label)e.Item.FindControl(“lblTotal”); lblTotal.Text = totals.ToString(“c”); } } </script> <html xmlns=”http://www.w3.org/1999/xhtml” > <head id=”Head1” runat=”server”> <style type=”text/css”> .movies td { padding:10px; text-align:right; } </style> <title>Show DataList Templates</title> </head> <body> <form id=”form1” runat=”server”> <div> <asp:DataList id=”dlstMovies” DataSourceID=”srcMovies” GridLines=”Horizontal” UseAccessibleHeader=”true” OnItemDataBound=”dlstMovies_ItemDataBound” CssClass=”movies” Runat=”server” > <HeaderTemplate> Movie Box Office Totals </HeaderTemplate> <ItemTemplate> <%#Eval(“Title”)%>: <%#Eval(“BoxOfficeTotals”,”{0:c}”) %> </ItemTemplate> <FooterTemplate> <b>Total:</b> <asp:Label id=”lblTotal” Runat=”server” /> </FooterTemplate> </asp:DataList> From the Library of Wow! eBook ptg 648 CHAPTER 13 Using the Repeater and DataList Controls <asp:SqlDataSource id=”srcMovies” ConnectionString=”<%$ ConnectionStrings:Movies %>” SelectCommand=”SELECT Title,BoxOfficeTotals FROM Movies” Runat=”server” /> </div> </form> </body> </html> The total displayed in the FooterTemplate is calculated by the ItemDataBound event handler. The Label control is extracted by the FindControl() method and the total is assigned to the control’s Text property. Selecting Data with the DataList Control You can use a DataList control as a menu by taking advantage of the control’s SelectedValue property. For example, the page in Listing 13.10 enables you to pick a movie category and display a list of matching movies (see Figure 13.8). FIGURE 13.8 Selecting a row in the DataList. From the Library of Wow! eBook ptg 649 Using the DataList Control 13 LISTING 13.10 SelectDataList.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:orange; } .content { margin:auto; width:600px; background-color:white; } .column { float:left; width:250px; padding:20px; } .movies td { padding:10px; } a { padding:10px; color:red; } a:hover { background-color:Gold; } </style> <title>Select DataList</title> </head> <body> <form id=”form1” runat=”server”> <div class=”content”> <div class=”column”> <asp:DataList From the Library of Wow! eBook ptg 650 CHAPTER 13 Using the Repeater and DataList Controls id=”dlstMovieCategories” DataSourceID=”srcMovieCategories” DataKeyField=”Id” GridLines=”Both” CssClass=”movies” Runat=”server”> <ItemTemplate> <asp:LinkButton id=”lnkMovie” Text=’<%#Eval(“Name”) %>’ CommandName=”Select” Runat=”server” /> </ItemTemplate> </asp:DataList> </div> <div class=”column”> <asp:DataList id=”dlstMovieDetails” DataSourceID=”srcMovieDetails” Runat=”server”> <ItemTemplate> <h1><%#Eval(“Title”)%></h1> Directed by: <%#Eval(“Director”) %> <br /> Box Office Totals: <%#Eval(“BoxOfficeTotals”,”{0:c}”) %> </ItemTemplate> </asp:DataList> </div> <br style=”clear:both” /> </div> <asp:SqlDataSource id=”srcMovieCategories” ConnectionString=”<%$ ConnectionStrings:Movies %>” SelectCommand=”SELECT Id, Name FROM MovieCategories” Runat=”server” /> <asp:SqlDataSource id=”srcMovieDetails” ConnectionString=”<%$ ConnectionStrings:Movies %>” SelectCommand=”SELECT Title,Director,BoxOfficeTotals FROM Movies WHERE CategoryId=@CategoryId” From the Library of Wow! eBook ptg 651 Using the DataList Control 13 Runat=”server”> <SelectParameters> <asp:ControlParameter Name=”CategoryId” ControlID=”dlstMovieCategories” PropertyName=”SelectedValue” /> </SelectParameters> </asp:SqlDataSource> </form> </body> </html> The page in Listing 13.10 contains two DataList controls. The first control displays a menu of movie categories and the second DataList control displays a list of matching movies. The first DataList in Listing 13.10 includes a DataKeyField property. The DataKeyField property accepts the name of a primary key column from the data source. When this property is set, the DataList control’s DataKeys collection is populated with the primary keys from the data source when the control is bound to its data source. The first DataList contains a LinkButton inside its ItemTemplate, which looks like this: <asp:LinkButton id=”lnkMovie” Text=’<%#Eval(“Name”) %>’ CommandName=”Select” Runat=”server” /> Because the LinkButton control’s CommandName property has the value Select, clicking the button changes the value of the DataList control’s SelectedValue property. The DataList control’s SelectedValue property is used by the second SqlDataSource control to return movies that match the selected category. NOTE Unlike the GridView, DetailsView, ListView, and FormView controls, you cannot assign the names of multiple primary key columns to the DataKeyField property. Editing Data with the DataList Control You can use the DataList control to edit database records. However, editing with the DataList control requires more coding than editing with other DataBound controls, such as the GridView, FormView, or DetailsView controls. The page in Listing 13.11 illustrates how you can edit and delete database records with the DataList control (see Figure 13.9). From the Library of Wow! eBook ptg 652 CHAPTER 13 Using the Repeater and DataList Controls LISTING 13.11 EditDataList.aspx <%@ Page Language=”C#” MaintainScrollPositionOnPostback=”true” %> <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN” “http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd”> <script runat=”server”> protected void dlstMovies_EditCommand(object source, DataListCommandEventArgs e) { dlstMovies.EditItemIndex = e.Item.ItemIndex; dlstMovies.DataBind(); } protected void dlstMovies_UpdateCommand(object source, ➥ DataListCommandEventArgs e) { // Get form fields TextBox txtTitle = (TextBox)e.Item.FindControl(“txtTitle”); TextBox txtDirector = (TextBox)e.Item.FindControl(“txtDirector”); CheckBox chkInTheaters = (CheckBox)e.Item.FindControl(“chkInTheaters”); // Assign parameters srcMovies.UpdateParameters[“Id”].DefaultValue = dlstMovies.DataKeys[e.Item.ItemIndex].ToString(); FIGURE 13.9 Editing database records with the DataList control. From the Library of Wow! eBook ptg 653 Using the DataList Control 13 srcMovies.UpdateParameters[“Title”].DefaultValue = txtTitle.Text; srcMovies.UpdateParameters[“Director”].DefaultValue = txtDirector.Text; srcMovies.UpdateParameters[“InTheaters”].DefaultValue = chkInTheaters.Checked.ToString(); // Call SqlDataSource Update srcMovies.Update(); // Take out of Edit mode dlstMovies.EditItemIndex = -1; } protected void dlstMovies_DeleteCommand(object source, ➥ DataListCommandEventArgs e) { // Assign parameters srcMovies.DeleteParameters[“Id”].DefaultValue = dlstMovies.DataKeys[e.Item.ItemIndex].ToString(); // Call SqlDataSource Delete srcMovies.Delete(); } protected void dlstMovies_CancelCommand(object source, ➥ DataListCommandEventArgs e) { dlstMovies.EditItemIndex = -1; dlstMovies.DataBind(); } </script> <html xmlns=”http://www.w3.org/1999/xhtml”> <head id=”Head1” runat=”server”> <style type=”text/css”> html { background-color:silver; } .movies { background-color:white; } .movies td,.movies th { padding:10px; border:solid 1px black; } From the Library of Wow! eBook . < ;asp: Label id=”lblTotal” Runat=”server” /> </FooterTemplate> < /asp: DataList> From the Library of Wow! eBook ptg 648 CHAPTER 13 Using the Repeater and DataList Controls < ;asp: SqlDataSource. 13.8 includes a RepeatColumns property that has the value 3. If you set the RepeatDirection property to the value Horizontal and do not assign a value to the RepeatColumns property, the DataList. Controls LISTING 13.11 EditDataList.aspx <%@ Page Language=”C#” MaintainScrollPositionOnPostback=”true” %> <!DOCTYPE html PUBLIC -/ /W3C//DTD XHTML 1.1//EN” “http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd”>