ptg 604 CHAPTER 12 Using the DetailsView and FormView Controls GridLines=”None” HeaderText=”Movies” CssClass=”movies” HeaderStyle-CssClass=”header” FieldHeaderStyle-CssClass=”fieldHeader” AlternatingRowStyle-CssClass=”alternating” CommandRowStyle-CssClass=”command” PagerStyle-CssClass=”pager” Runat=”server” /> <asp:SqlDataSource id=”srcMovies” ConnectionString=”<%$ ConnectionStrings:Movies %>” SelectCommand=”SELECT Title,Director,InTheaters FROM Movies” InsertCommand=”INSERT Movies (Title,Director,InTheaters) VALUES (@Title,@Director, Runat=”server” /> </div> </form> </body> </html> Using the FormView Control You can use the FormView control to do anything that you can do with the DetailsView control. Just as you can with the DetailsView control, you can use the FormView control to display, page, edit, insert, and delete database records. However, unlike the DetailsView control, the FormView control is entirely template-driven. I use the FormView control much more than the DetailsView control. The FormView control provides you with more control over the layout of a form. Furthermore, adding validation controls to FormView is easier than adding validation controls to a DetailsView control. WEB STANDARDS NOTE By default, the FormView control renders an HTML table. It creates an HTML table that contains a single cell. In ASP.NET 4, you can disable this by setting the RenderOuterTable property to False. This enables you to style the output using CSS styles. From the Library of Wow! eBook ptg 605 Using the FormView Control 12 FIGURE 12.13 Displaying a database record with the FormView control. LISTING 12.19 ShowFormView.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 { margins:auto; width:600px; padding:10px; Displaying Data with the FormView Control You can display a database record with the FormView control by using an ItemTemplate. For example, the page in Listing 12.19 displays a record from the Movies database table (see Figure 12.13). From the Library of Wow! eBook ptg 606 CHAPTER 12 Using the DetailsView and FormView Controls background-color:white; font:14px Georgia,Serif; } </style> <title>Show FormView</title> </head> <body> <form id=”form1” runat=”server”> <div id=”content”> <asp:FormView id=”frmMovies” DataSourceID=”srcMovies” Runat=”server”> <ItemTemplate> <h1><%# Eval(“Title”) %></h1> <b>Directed By:</b> <%# Eval(“Director”) %> <br /> <b>Box Office Totals:</b> <%#Eval(“BoxOfficeTotals”, “{0:c}”) %> </ItemTemplate> </asp:FormView> <asp:SqlDataSource id=”srcMovies” ConnectionString=”<%$ ConnectionStrings:Movies %>” SelectCommand=”SELECT Id,Title,Director,BoxOfficeTotals FROM Movies WHERE Id=1” Runat=”server” /> </div> </form> </body> </html> The FormView control’s DataSourceID property points to the SqlDataSource control. The SqlDataSource control retrieves the first record from the Movies database table. The ItemTemplate contains databinding expressions that display the values of the Title, Director, and BoxOfficeTotals columns. The Eval() method retrieves the values of these columns. The databinding expression for the BoxOfficeTotals column formats the value of the column as a currency amount. From the Library of Wow! eBook ptg 607 Using the FormView Control 12 Paging Through Data with the FormView Control You can allow users to navigate through a set of data items by allowing paging. You can allow the FormView control to automatically render the paging interface, or you can use a PagerTemplate to customize the paging interface. The page in Listing 12.20 automatically renders an additional row that contains buttons for navigating between data items. LISTING 12.20 ShowFormViewPaging.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 { margins:auto; width:600px; padding:10px; background-color:white; font:14px Georgia,Serif; } a { color:blue; } </style> <title>Show FormView Paging</title> </head> <body> <form id=”form1” runat=”server”> <div id=”content”> <asp:FormView id=”frmMovies” DataSourceID=”srcMovies” AllowPaging=”true” Runat=”server”> <ItemTemplate> <h1><%# Eval(“Title”) %></h1> From the Library of Wow! eBook ptg 608 CHAPTER 12 Using the DetailsView and FormView Controls <b>Directed By:</b> <%# Eval(“Director”) %> <br /> <b>Box Office Totals:</b> <%#Eval(“BoxOfficeTotals”, “{0:c}”) %> </ItemTemplate> </asp:FormView> <asp:SqlDataSource id=”srcMovies” ConnectionString=”<%$ ConnectionStrings:Movies %>” SelectCommand=”SELECT Id,Title,Director,BoxOfficeTotals FROM Movies” Runat=”server” /> </div> </form> </body> </html> The FormView in Listing 12.20 includes an AllowPaging property assigned the value True. Adding this property generates the paging interface automatically. NOTE You can enable Ajax paging for a FormView control in exactly the same way you enable Ajax paging for a GridView or DetailsView control. If you wrap the FormView control in an UpdatePanel, you can page through the records in FormView without performing a noticeable postback to the server. WARNING This section describes user interface paging, which is not an efficient method to use when paging through large record sets because all the data must be loaded into mem- ory. In Chapter 18, you learn how to implement data source paging. You can customize the appearance of the automatically rendered paging interface with the PagerSettings property, which exposes the PagerSettings class. The PagerSettings class supports the following properties: . FirstPageImageUrl—Enables you to display an image for the first page link. . FirstPageText—Enables you to specify the text for the first page link. From the Library of Wow! eBook ptg 609 Using the FormView Control 12 . LastPageImageUrl—Enables you to display an image for the last page link. . LastPageText—Enables you to specify the text for the last page link. . Mode—Enables you to select a display mode for the pager user interface. Possible values are NextPrevious, NextPreviousFirstLast, Numeric, and NumericFirstLast. . NextPageImageUrl—Enables you to specify the text for the next page link. . NextPageText—Enables you to specify the text for the next page link. . PageButtonCount—Enables you to specify the number of page number links to display. . Position—Enables you to specify the position of the paging user interface. Possible values are Bottom, Top, and TopAndBottom. . PreviousPageImageUrl—Enables you to display an image for the previous page link. . PreviousPageText—Enables you to specify the text for the previous page link. . Visible—Enables you to hide the paging user interface. If you need to customize the appearance of the paging interface completely, you can create a PagerTemplate. The page in Listing 12.21 uses the PagerTemplate to create a custom paging interface. The PagerTemplate displays the current page number. It also contains buttons for navigating to the previous and next page (see Figure 12.14). FIGURE 12.14 Using a PagerTemplate with the FormView control. From the Library of Wow! eBook ptg 610 CHAPTER 12 Using the DetailsView and FormView Controls LISTING 12.21 ShowFormViewPagerTemplate.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 { margins:auto; width:600px; padding:10px; background-color:white; font:14px Georgia,Serif; } .frmMovies { width:100%; } </style> <title>Show FormView Pager Template</title> </head> <body> <form id=”form1” runat=”server”> <div id=”content”> <asp:FormView id=”frmMovies” DataSourceID=”srcMovies” AllowPaging=”true” CssClass=”frmMovies” Runat=”server”> <ItemTemplate> <h1><%# Eval(“Title”) %></h1> <b>Directed By:</b> <%# Eval(“Director”) %> <br /> <b>Box Office Totals:</b> <%#Eval(“BoxOfficeTotals”, “{0:c}”) %> From the Library of Wow! eBook ptg 611 Using the FormView Control 12 </ItemTemplate> <PagerTemplate> <hr /> <div style=”float:left”> Page: <%# frmMovies.PageIndex + 1 %> </div> <div style=”float:right;white-space:nowrap”> <asp:LinkButton id=”lnkPrevious” Text=”Previous Page” CommandName=”Page” CommandArgument=”Prev” Runat=”server” /> | <asp:LinkButton id=”lnkNext” Text=”Next Page” CommandName=”Page” CommandArgument=”Next” Runat=”server” /> </div> </PagerTemplate> </asp:FormView> <asp:SqlDataSource id=”srcMovies” ConnectionString=”<%$ ConnectionStrings:Movies %>” SelectCommand=”SELECT Id,Title,Director,BoxOfficeTotals FROM Movies” Runat=”server” /> </div> </form> </body> </html> Each button contained in the PagerTemplate has both a CommandName and CommandArgument property. The CommandName is set to the value Page. CommandArgument specifies a particular type of paging operation. You can use the following values for the CommandArgument property: . First—Navigates to the first page. . Last—Navigates to the last page. From the Library of Wow! eBook ptg 612 CHAPTER 12 Using the DetailsView and FormView Controls . Prev—Navigates to the previous page. . Next—Navigates to the next page. . number—Navigates to a particular page number. Editing Data with the FormView Control You can edit a database record with the FormView control. For example, you can use the page in Listing 12.22 to edit any of the records in the Movies database table (see Figure 12.15). LISTING 12.22 ShowFormViewEditing.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 FIGURE 12.15 Editing a record with the FormView control. From the Library of Wow! eBook ptg 613 Using the FormView Control 12 { margins:auto; width:600px; padding:10px; background-color:white; font:14px Georgia,Serif; } a { color:blue; } </style> <title>Show FormView Editing</title> </head> <body> <form id=”form1” runat=”server”> <div id=”content”> <asp:FormView id=”frmMovies” DataSourceID=”srcMovies” DataKeyNames=”Id” AllowPaging=”true” Runat=”server”> <ItemTemplate> <h1><%# Eval(“Title”) %></h1> <b>Directed By:</b> <%# Eval(“Director”) %> <br /> <b>Box Office Totals:</b> <%#Eval(“BoxOfficeTotals”, “{0:c}”) %> <hr /> <asp:LinkButton id=”lnkEdit” Text=”Edit Movie” CommandName=”Edit” Runat=”server” /> </ItemTemplate> <EditItemTemplate> <asp:Label id=”lblTitle” Text=”Movie Title:” AssociatedControlID=”txtTitle” Runat=”server” /> <br /> <asp:TextBox From the Library of Wow! eBook . style=”float:right;white-space:nowrap”> < ;asp: LinkButton id=”lnkPrevious” Text=”Previous Page” CommandName=”Page” CommandArgument=”Prev” Runat=”server” /> | < ;asp: LinkButton id=”lnkNext” Text=”Next Page”. to specify the position of the paging user interface. Possible values are Bottom, Top, and TopAndBottom. . PreviousPageImageUrl—Enables you to display an image for the previous page link. . PreviousPageText—Enables. source paging. You can customize the appearance of the automatically rendered paging interface with the PagerSettings property, which exposes the PagerSettings class. The PagerSettings class supports