ptg 594 CHAPTER 12 Using the DetailsView and FormView Controls The DetailsView control in Listing 12.14 includes an AutoGenerateInsertButton prop- erty that has the value True. This property automatically generates the user interface for inserting a new record. After you open the page in Listing 12.14, you can click the New button to display a form for inserting a new record. When you click the Insert button, the SQL command repre- sented by the SqlDataSource control’s InsertCommand property is executed. If you want the DetailsView control to display an insert form by default, you can assign the value Insert to the DetailsView control’s DefaultMode property. This approach is illustrated by the page in Listing 12.15 (see Figure 12.10). FIGURE 12.10 Inserting a record with the DetailsView control. LISTING 12.15 ShowInsertMode.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; From the Library of Wow! eBook ptg 595 Using the DetailsView Control 12 font:14px Arial,Sans-Serif; } td,th { padding:10px; } #divDisplay { border:solid 1px black; width:400px; padding:15px; background-color:#eeeeee; } #divInsert { display:none; border:solid 1px black; width:400px; position:absolute; top:30px; left:100px; padding:10px; background-color:white; } </style> <script type=”text/javascript”> function showInsert() { var divInsert = document.getElementById(‘divInsert’); divInsert.style.display = ‘block’; } </script> <title>Show Insert Mode</title> </head> <body> <form id=”form1” runat=”server”> <div id=”divDisplay”> <asp:GridView id=”grdMovies” DataSourceID=”srcMovies” Runat=”server” /> <br /> <a href=”JavaScript:showInsert();”>Insert Movie</a> </div> From the Library of Wow! eBook ptg 596 CHAPTER 12 Using the DetailsView and FormView Controls <div id=”divInsert”> <h1>Insert Movie</h1> <asp:DetailsView id=”dtlMovies” DataSourceID=”srcMovies” AutoGenerateInsertButton=”true” AutoGenerateRows=”false” DefaultMode=”Insert” Runat=”server”> <Fields> <asp:BoundField DataField=”Title” HeaderText=”Title:” /> <asp:BoundField DataField=”Director” HeaderText=”Director:” /> <asp:CheckBoxField DataField=”InTheaters” HeaderText=”In Theaters:” /> </Fields> </asp:DetailsView> </div> <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” /> </form> </body> </html> The page in Listing 12.15 contains both a GridView and DetailsView control. The DetailsView control is hidden until you click the Insert Movie link. This link executes a JavaScript function named ShowInsert(), which displays the DetailsView control. NOTE You can hide a column when a DetailsView control is in Insert mode with the BoundField control’s InsertVisible property. This property is useful, for example, when you want to prevent users from inserting a value for an identity column. From the Library of Wow! eBook ptg 597 Using the DetailsView Control 12 Deleting Data with the DetailsView Control You can delete records with the DetailsView control by enabling its AutoGenerateDelete Button property. The page in Listing 12.16 enables you to both insert and delete records in the Movies database table. LISTING 12.16 ShowDelete.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”> <title>Show Delete</title> </head> <body> <form id=”form1” runat=”server”> <div> <asp:DetailsView id=”dtlMovies” AllowPaging=”true” DataSourceID=”srcMovies” DataKeyNames=”Id” AutoGenerateInsertButton=”true” AutoGenerateDeleteButton=”true” AutoGenerateRows=”false” Runat=”server”> <Fields> <asp:BoundField DataField=”Id” HeaderText=”ID:” InsertVisible=”false” /> <asp:BoundField DataField=”Title” HeaderText=”Title:” /> <asp:BoundField DataField=”Director” HeaderText=”Director:” /> <asp:CheckBoxField DataField=”InTheaters” HeaderText=”In Theaters:” /> </Fields> </asp:DetailsView> <asp:SqlDataSource From the Library of Wow! eBook ptg 598 CHAPTER 12 Using the DetailsView and FormView Controls id=”srcMovies” ConnectionString=”<%$ ConnectionStrings:Movies %>” SelectCommand=”SELECT Id,Title,Director,InTheaters FROM Movies” InsertCommand=”INSERT Movies (Title,Director,InTheaters) VALUES (@Title,@Director, DeleteCommand=”DELETE Movies WHERE id=@Id” Runat=”server” /> </div> </form> </body> </html> When deleting records, you need to supply a value for the DetailsView control’s DataKeyNames property. A parameter named @Id represents the value of the ID column in the DeleteCommand property. Working with DetailsView Control Events The DetailsView control supports the following events: . DataBinding—Raised immediately before the DetailsView control is bound to its data source. . DataBound—Raised immediately after the DetailsView control is bound to its data source. . ItemCommand—Raised when any control contained in the DetailsView raises an event (for example, when you click a button rendered by a ButtonField). . ItemCreated—Raised when a DetailsView renders a data item. . ItemDeleting—Raised immediately before a data item is deleted. . ItemDeleted—Raised immediately after a data item is deleted. . ItemInserting—Raised immediately before a data item is inserted. . ItemInserted—Raised immediately after a data item is inserted. . ItemUpdating—Raised immediately before a data item is updated. . ItemUpdated—Raised immediately after a data item is updated. . ModeChanging—Raised immediately before the DetailsView control’s mode is changed. . ModeChanged—Raised immediately after the DetailsView control’s mode is changed. . PageIndexChanging—Raised immediately before the current page is changed. . PageIndexChanged—Raised immediately after the current page is changed. From the Library of Wow! eBook ptg 599 Using the DetailsView Control 12 FIGURE 12.11 Handling database insert errors. LISTING 12.17 InsertErrors.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”> protected void dtlMovies_ItemInserted(object sender, ➥ DetailsViewInsertedEventArgs e) { if (e.Exception != null) { e.ExceptionHandled = true; e.KeepInInsertMode = true; lblError.Visible = true; Several of these events reflect similar events exposed by the DataSource controls. For example, the SqlDataSource control includes Inserting and Inserted events, which mirror the DetailsView control’s ItemInserting and ItemInserted events. The page in Listing 12.17 demonstrates how to use the ItemInserted event to handle any errors that might be raised when inserting a new record into a database table (see Figure 12.11). From the Library of Wow! eBook ptg 600 CHAPTER 12 Using the DetailsView and FormView Controls } } </script> <html xmlns=”http://www.w3.org/1999/xhtml” > <head id=”Head1” runat=”server”> <style type=”text/css”> .error { color:red; font:bold 14px Arial,Sans-Serif; } </style> <title>Insert Errors</title> </head> <body> <form id=”form1” runat=”server”> <div> <asp:Label id=”lblError” Text=”Could not insert record” Visible=”false” EnableViewState=”false” CssClass=”error” Runat=”server” /> <asp:DetailsView id=”dtlMovies” AllowPaging=”true” DataSourceID=”srcMovies” AutoGenerateInsertButton=”true” OnItemInserted=”dtlMovies_ItemInserted” 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> From the Library of Wow! eBook ptg 601 Using the DetailsView Control 12 If you attempt to insert a record without providing values for the Title or Director column, the error message contained in the Label control displays. When you insert a record, the DetailsView control raises the ItemInserted event. The second parameter passed to the event handler for this method contains a property that exposes any exceptions raised when inserting the record. In Listing 12.17, if there is an exception, the exception is suppressed with the ExceptionHandled property. Furthermore, the KeepInInsertMode property prevents the DetailsView from automatically switching out of Insert mode. Formatting the DetailsView Control The DetailsView control includes an abundance of properties for formatting the control. I recommend that you format the DetailsView control by taking advantage of Cascading Style Sheets (CSS). All the following properties expose a Style object that includes a CssClass property: . CssClass—Enables you to associate a style sheet class with the DetailsView control. . AlternatingRowStyle—Represents every other row rendered by the DetailsView control. . CommandRowStyle—Represents the row that contains the edit buttons. . EditRowStyle—Represents rows when the DetailsView control is in Edit mode. . EmptyDataRowStyle—Represents the row displayed when the data source does not return any data items. . FieldHeaderStyle—Represents the cell displayed for the field labels. . FooterStyle—Represents the footer row. . HeaderStyle—Represents the header row. . InsertRowStyle—Represents rows when the DetailsView control is in Insert mode. . PagerStyle—Represents the row or rows that display the paging user interface. . RowStyle—Represents the rows displayed by the DetailsView control. Furthermore, you can take advantage of the following properties when formatting a DetailsView control: . GridLines—Enables you to specify the appearance of the rules that appear around the cells of the table rendered by a DetailsView control. Possible values are None, Horizontal, Vertical, and Both. . HeaderText—Enables you to specify text that appears in the header of the DetailsView control. From the Library of Wow! eBook ptg 602 CHAPTER 12 Using the DetailsView and FormView Controls LISTING 12.18 FormatDetailsView.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”> .movies td,.movies th { padding:10px; } .movies { border:double 4px black; } .header FIGURE 12.12 Formatting a DetailsView control with CSS. . FooterText—Enables you to specify text that appears in the footer of the DetailsView control. The page in Listing 12.18 uses several of these properties to format a DetailsView control (see Figure 12.12). From the Library of Wow! eBook ptg 603 Using the DetailsView Control 12 { letter-spacing:8px; font:bold 16px Arial,Sans-Serif; background-color:silver; } .fieldHeader { font-weight:bold; } .alternating { background-color:#eeeeee; } .command { background-color:silver; } .command a { color:black; background-color:#eeeeee; font:14px Arials,Sans-Serif; text-decoration:none; padding:3px; border:solid 1px black; } .command a:hover { background-color:yellow; } .pager td { padding:2px; } </style> <title>Format DetailsView</title> </head> <body> <form id=”form1” runat=”server”> <div> <asp:DetailsView id=”dtlMovies” DataSourceID=”srcMovies” AutoGenerateInsertButton=”true” AllowPaging=”true” From the Library of Wow! eBook . width :40 0px; padding:15px; background-color:#eeeeee; } #divInsert { display:none; border:solid 1px black; width :40 0px; position:absolute; top:30px; left:100px; padding:10px; background-color:white; } </style>. { background-color:silver; From the Library of Wow! eBook ptg 595 Using the DetailsView Control 12 font:14px Arial,Sans-Serif; } td,th { padding:10px; } #divDisplay { border:solid 1px black;. ptg 5 94 CHAPTER 12 Using the DetailsView and FormView Controls The DetailsView control in Listing 12. 14 includes an AutoGenerateInsertButton prop- erty that has the value True. This property