ptg 654 CHAPTER 13 Using the Repeater and DataList Controls .edit { background-color:yellow; } a { color:blue; } </style> <title>Edit DataList</title> </head> <body> <form id=”form1” runat=”server”> <div> <asp:DataList id=”dlstMovies” DataSourceID=”srcMovies” DataKeyField=”Id” GridLines=”None” OnEditCommand=”dlstMovies_EditCommand” OnCancelCommand=”dlstMovies_CancelCommand” OnUpdateCommand=”dlstMovies_UpdateCommand” OnDeleteCommand=”dlstMovies_DeleteCommand” CssClass=”movies” EditItemStyle-CssClass=”edit” Runat=”server”> <ItemTemplate> <h1><%#Eval(“Title”)%></h1> Directed by: <%#Eval(“Director”) %> <br /> In Theaters: <%#Eval(“InTheaters”) %> <br /><br /> <asp:LinkButton id=”lnkEdit” CommandName=”Edit” Text=”Edit” Runat=”server” /> | <asp:LinkButton id=”lnkDelete” CommandName=”Delete” Text=”Delete” OnClientClick=”return confirm(‘Are you sure?’);” From the Library of Wow! eBook ptg 655 Using the DataList Control 13 Runat=”server” /> </ItemTemplate> <EditItemTemplate> <asp:Label id=”lblTitle” Text=”Title:” AssociatedControlID=”txtTitle” Runat=”server” /> <br /> <asp:TextBox id=”txtTitle” Text=’<%#Eval(“Title”)%>’ Runat=”server” /> <br /><br /> <asp:Label id=”lblDirector” Text=”Director:” AssociatedControlID=”txtDirector” Runat=”server” /> <br /> <asp:TextBox id=”txtDirector” Text=’<%#Eval(“Director”)%>’ Runat=”server” /> <br /><br /> <asp:CheckBox id=”chkInTheaters” Text=”In Theaters” Checked=’<%#Eval(“InTheaters”)%>’ Runat=”server” /> <br /><br /> <asp:LinkButton id=”lnkUpdate” CommandName=”Update” Text=”Update” Runat=”server” /> | <asp:LinkButton id=”lnkCancel” CommandName=”Cancel” Text=”Cancel” Runat=”server” /> </EditItemTemplate> </asp:DataList> <asp:SqlDataSource From the Library of Wow! eBook ptg 656 CHAPTER 13 Using the Repeater and DataList Controls id=”srcMovies” ConnectionString=”<%$ ConnectionStrings:Movies %>” SelectCommand=”SELECT Id,Title,Director,InTheaters FROM Movies” UpdateCommand=”UPDATE Movies SET Title=@Title, Director=@Director,InTheaters=@InTheaters WHERE Id=@Id” DeleteCommand=”DELETE Movies WHERE Id=@Id” Runat=”server”> <UpdateParameters> <asp:Parameter Name=”Id” /> <asp:Parameter Name=”Title” /> <asp:Parameter Name=”Director” /> <asp:Parameter Name=”InTheaters” /> </UpdateParameters> <DeleteParameters> <asp:Parameter Name=”Id” /> </DeleteParameters> </asp:SqlDataSource> </div> </form> </body> </html> The ItemTemplate contained in the DataList in Listing 13.11 includes an Edit LinkButton and a Delete LinkButton. When you click the Edit LinkButton, the DataList raises its EditCommand event and the dlstMovies_Edit() method is executed. Clicking the Delete LinkButton raises the DeleteCommand event and the dlstMovies_Delete() method is executed. The dlstMovies_Edit() method sets the EditItemIndex property of the DataList control. The EditItemTemplate is displayed for the item in the DataList that matches the EditItemIndex. The EditItemTemplate includes form fields for editing a movie record and an Update and Cancel LinkButton. These LinkButtons raise the UpdateCommand and CancelCommand events, and execute the corresponding event handlers. NOTE The <%@ Page %> directive includes a MaintainScrollPositionOnPostback attribute. This attribute causes a page to scroll to the same position whenever you post the page back to the server. For example, when you click the Edit link next to a row in the DataList, the page scrolls to the Edit link that you clicked. From the Library of Wow! eBook ptg 657 Using the DataList Control 13 Formatting the DataList Control The DataList control includes a rich set of properties that you can use to format the HTML rendered by the control. If you want to associate Cascading Style Sheet (CSS) rules with different elements of the DataList, you can take advantage of any of the following properties: . CssClass—Enables you to associate a CSS class with the DataList. . AlternatingItemStyle—Enables you to format every other row of DataList. . EditItemStyle—Enables you to format the DataList row selected for editing. . FooterStyle—Enables you to format the footer row of DataList. . HeaderStyle—Enables you to format the header row of DataList. . ItemStyle—Enables you to format each row displayed by DataList. . SelectedItemStyle—Enables you to format the selected row in DataList. . SeparatorStyle—Enables you to format the row separator displayed by DataList. When formatting the DataList, you also need to work with the following properties: . GridLines—Enables you to add rules around the cells in the DataList. Possible values are None, Horizontal, Vertical, and Both. . ShowFooter—Enables you to show or hide the footer row. . ShowHeader—Enables you to show or hide the header row. . UseAccessibleHeader—Enables you to render HTML <th> tags instead of <td> tags for the cells in the header row. WEB STANDARDS NOTE To make a page that contains a DataList more accessible to persons with disabilities, you should always include a HeaderTemplate and enable the UserAccessibleHeader property. The page in Listing 13.12 illustrates how you can take advantage of several of these formatting properties (see Figure 13.10). From the Library of Wow! eBook ptg 658 CHAPTER 13 Using the Repeater and DataList Controls FIGURE 13.10 Formatting a DataList. LISTING 13.12 FormatDataList.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; } .movies { font:14px Arial,Sans-Serif; } .header { font-size:18px; letter-spacing:15px; } .item { From the Library of Wow! eBook ptg 659 Using the DataList Control 13 padding:5px; background-color:#eeeeee; border-bottom:Solid 1px blue; } .alternating { padding:5px; background-color:LightBlue; border-bottom:Solid 1px blue; } </style> <title>Format DataList</title> </head> <body> <form id=”form1” runat=”server”> <div> <asp:DataList id=”dlstMovies” DataSourceID=”srcMovies” UseAccessibleHeader=”true” CssClass=”movies” HeaderStyle-CssClass=”header” ItemStyle-CssClass=”item” AlternatingItemStyle-CssClass=”alternating” Runat=”server”> <HeaderTemplate> Movies </HeaderTemplate> <ItemTemplate> <%#Eval(“Title”)%> </ItemTemplate> </asp:DataList> <asp:SqlDataSource id=”srcMovies” ConnectionString=”<%$ ConnectionStrings:Movies %>” SelectCommand=”SELECT Title FROM Movies” Runat=”server” /> </div> </form> </body> </html> From the Library of Wow! eBook ptg 660 CHAPTER 13 Using the Repeater and DataList Controls Summary In this chapter, you learned how to use the Repeater control and the DataList control to display a set of database records. First, you learned how to use the Repeater control to display and edit database records. For example, you learned how to use the Repeater control to enable users to edit, delete, and insert database records. In the second half of this chapter, you learned how to work with the DataList control. You learned how to render both single and multicolumn tables with the DataList control. You also learned how to select rows with the DataList control. Finally, you learned how to edit records using the DataList control. From the Library of Wow! eBook ptg CHAPTER 14 Using the ListView and DataPager Controls IN THIS CHAPTER . Using the ListView Control . Using the DataPager Control . Summary In this chapter, we examine the two databound controls that were introduced in version 3.5 of .NET Framework: the ListView and the DataPager controls. The ListView control is extremely flexible. You can use it in many of the same situations in which you would have used the GridView, DataList, FormView, or Repeater control in the past. The DataPager control works with the ListView control. It enables you to add support for paging to a ListView control. Using the ListView Control You can think of the ListView control as a super-flexible GridView control. Like a GridView control, the ListView control can be used to display, edit, delete, select, page through, and sort database data. However, unlike the GridView, the ListView control is entirely template-driven. Furthermore, unlike the GridView control, you can use the ListView control to insert new data into a database. You also can think of the ListView control as a replacement for the DataList control. Like a DataList control, the ListView control can be used to display database records in multiple columns. For example, you can use the ListView control to render a photo gallery. Finally, you can think of the ListView control as a super- fancy Repeater control. Like a Repeater control, the ListView control is entirely template driven. However, unlike a Repeater control, the ListView control can be used to edit, page through, and sort database data. From the Library of Wow! eBook ptg 662 CHAPTER 14 Using the ListView and DataPager Controls The ListView control supports the following templates: . LayoutTemplate—Specifies the containing element for the contents of the ListView. . ItemTemplate—Formats each item rendered by the ListView. . ItemSeparatorTemplate—Displays content between each item rendered by the ListView. . GroupTemplate—Specifies the containing element for a group of items rendered by the ListView. . GroupSeparatorTemplate—Displays content between each group of items rendered by the ListView. . EmptyItemTemplate—Renders content for the remaining items in a GroupTemplate. . EmptyDataTemplate—Specifies content that displays when no items are returned from the ListView control’s data source. . SelectedItemTemplate—Specifies the content displayed for the selected item in the ListView. . AlternatingItemTemplate—Renders different content for alternating items in a ListView. . EditItemTemplate—Renders content for editing an item in a ListView. . InsertItemTemplate—Renders content for inserting a new item in a ListView. You learn how to use these various types of templates in the following sections. Using the LayoutTemplate and ItemTemplate Let’s start with a ListView control simple scenario in which you might want to use the ListView control. Suppose that you have a set of database records that you want to display in a set of HTML <div> tags. The page in Listing 14.1 illustrates how you can use the LayoutTemplate and ItemTemplate templates to display the records from the Movie database table. LISTING 14.1 SimpleListView.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>Simple ListView</title> </head> <body> <form id=”form1” runat=”server”> <div> From the Library of Wow! eBook ptg 663 Using the ListView Control <asp:ListView ID=”lstMovies” DataSourceId=”srcMovies” runat=”server”> <LayoutTemplate> <div style=”border:dashed 1px black”> <asp:Placeholder id=”itemPlaceholder” runat=”server” /> </div> </LayoutTemplate> <ItemTemplate> <div style=”border:solid 1px black”> <%# Eval(“Title”) %> </div> </ItemTemplate> <AlternatingItemTemplate> <div style=”border:solid 1px black;background-color:Silver”> <%# Eval(“Title”) %> </div> </AlternatingItemTemplate> <EmptyDataTemplate> No records found </EmptyDataTemplate> </asp:ListView> <asp:SqlDataSource id=”srcMovies” SelectCommand=”SELECT Id, Title, Director FROM Movies” ConnectionString=’<%$ ConnectionStrings:Movies %>’ Runat=”server” /> </div> </form> </body> </html> The ListView control in Listing 14.1 contains five templates. First, the LayoutTemplate creates a single containing <div> tag for all the items rendered by the ListView. The content contained in the LayoutTemplate is rendered once and only once. In the page in Listing 14.1, the LayoutTemplate displays a <div> tag with a dashed border (see Figure 14.1). 14 From the Library of Wow! eBook . <UpdateParameters> < ;asp: Parameter Name=”Id” /> < ;asp: Parameter Name=”Title” /> < ;asp: Parameter Name=”Director” /> < ;asp: Parameter Name=”InTheaters” /> </UpdateParameters> <DeleteParameters> < ;asp: Parameter. Runat=”server” /> <br /><br /> < ;asp: LinkButton id=”lnkUpdate” CommandName=”Update” Text=”Update” Runat=”server” /> | < ;asp: LinkButton id=”lnkCancel” CommandName=”Cancel”. LayoutTemplate and ItemTemplate templates to display the records from the Movie database table. LISTING 14. 1 SimpleListView.aspx <%@ Page Language=”C#” %> <!DOCTYPE html PUBLIC -/ /W3C//DTD XHTML