ASP.NET 2.0 Unleashed

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 end up using 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 a FormView is easier than adding validation controls to a DetailsView control.

Web Standards Note

Unfortunately, from a web standards perspective, the FormView control does, in fact, render an HTML table. It creates an HTML table that contains a single cell.

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).

Figure 12.13. Displaying a database record with the FormView control.

Listing 12.19. ShowFormView.aspx

<%@ Page Language="VB" %> <!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 runat="server"> <style type="text/css"> html { background-color:silver; } #content { margins:auto; width:600px; padding:10px; background-color:white; font:14px Georgia,Serif; } </style> <title>Show FormView</title> </head> <body> <form runat="server"> <div > <asp:FormView DataSource 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 ConnectionString="<%$ ConnectionStrings:Movies %>" SelectCommand="SELECT Id,Title,Director,BoxOfficeTotals FROM Movies WHERE Id=1" Runat="server" /> </div> </form> </body> </html>

Notice that the FormView control's DataSourceID property points to the SqlDataSource control. The SqlDataSource control retrieves the first record from the Movies database table.

Notice that 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.

Paging Through Data with the FormView Control

You can enable users to navigate through a set of data items by enabling 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="VB" %> <!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 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 runat="server"> <div > <asp:FormView DataSource 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}") %> </ItemTemplate> </asp:FormView> <asp:SqlDataSource ConnectionString="<%$ ConnectionStrings:Movies %>" SelectCommand="SELECT Id,Title,Director,BoxOfficeTotals FROM Movies" Runat="server" /> </div> </form> </body> </html>

Notice that the FormView in Listing 12.20 includes an AllowPaging property that is assigned the value True. Adding this property generates the paging interface automatically.

Note

Unlike the DetailsView and GridView controls, the FormView control does not support AJAX.

Warning

This section describes user interface paging. User interface paging is not an efficient method to use when paging through large record sets because all the data must be loaded into memory. In Chapter 15, "Using the ObjectDataSource Control," 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.

  • 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, 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, then 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.

Listing 12.21. ShowFormViewPagerTemplate.aspx

<%@ Page Language="VB" %> <!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 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 runat="server"> <div > <asp:FormView DataSource AllowPaging="true" Css Runat="server"> <ItemTemplate> <h1><%# Eval("Title") %></h1> <b>Directed By:</b> <%# Eval("Director") %> <br /> <b>Box Office Totals:</b> <%#Eval("BoxOfficeTotals", "{0:c}") %> </ItemTemplate> <PagerTemplate> <hr /> <div > Page: <%# frmMovies.PageIndex + 1 %> </div> <div > <asp:LinkButton Text="Previous Page" CommandName="Page" CommandArgument="Prev" Runat="server" /> | <asp:LinkButton Text="Next Page" CommandName="Page" CommandArgument="Next" Runat="server" /> </div> </PagerTemplate> </asp:FormView> <asp:SqlDataSource ConnectionString="<%$ ConnectionStrings:Movies %>" SelectCommand="SELECT Id,Title,Director,BoxOfficeTotals FROM Movies" Runat="server" /> </div> </form> </body> </html>

Notice that each button contained in the PagerTemplate has both a CommandName and CommandArgument property. The CommandName is set to the value Page. The 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

  • 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).

Figure 12.15. Editing a record with the FormView control.

Listing 12.22. ShowFormViewEditing.aspx

<%@ Page Language="VB" %> <!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 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 Editing</title> </head> <body> <form runat="server"> <div > <asp:FormView DataSource 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 Text="Edit Movie" CommandName="Edit" Runat="server" /> </ItemTemplate> <EditItemTemplate> <asp:Label Text="Movie Title:" AssociatedControl Runat="server" /> <br /> <asp:TextBox Text='<%# Bind("Title") %>' Runat="server" /> <br /><br /> <asp:Label Text="Movie Director:" AssociatedControl Runat="server" /> <br /> <asp:TextBox Text='<%# Bind("Director") %>' Runat="server" /> <br /><br /> <asp:Label Text="Box Office Totals:" AssociatedControl Runat="server" /> <br /> <asp:TextBox Text='<%# Bind("BoxOfficeTotals") %>' Runat="server" /> <br /><br /> <asp:LinkButton Text="Update Movie" CommandName="Update" Runat="server" /> | <asp:LinkButton Text="Cancel Update" CommandName="Cancel" Runat="server" /> </EditItemTemplate> </asp:FormView> <asp:SqlDataSource ConnectionString="<%$ ConnectionStrings:Movies %>" SelectCommand="SELECT Id,Title,Director,BoxOfficeTotals FROM Movies" UpdateCommand="UPDATE Movies SET Title=@Title, Director=@Director,BoxOfficeTotals=@BoxOfficeTotals WHERE Id=@Id" Runat="server" /> </div> </form> </body> </html>

You should notice several things about the FormView control in Listing 12.22. First, notice that the FormView control includes a DataKeyNames property that contains the name of the primary key from the data source. You need to specify a primary key when editing records.

Next, notice that the FormView control's ItemTemplate includes a LinkButton that looks like this:

<asp:LinkButton Text="Edit Movie" CommandName="Edit" Runat="server" />

This LinkButton includes a CommandName property with the value Edit. Clicking the link switches the FormView control into Edit mode. You could use any other control here that supports the CommandName property such as a Button or ImageButton control.

Next, notice that the FormView control includes an EditItemTemplate. This template contains the form for editing the record. Each form field uses a two-way databinding expression. For example, the form field for editing the movie title looks like this:

<asp:TextBox Text='<%# Bind("Title") %>' Runat="server" />

The Bind("Title") method binds the Title column to the Text property of the TextBox control.

Finally, notice that the EditItemTemplate includes both a LinkButton for updating the database record and a LinkButton for canceling the update. The LinkButton for updating the record looks like this:

<asp:LinkButton Text="Update Movie" CommandName="Update" Runat="server" />

This LinkButton includes a CommandName property, which has the value Update. When you click this LinkButton, the SQL statement represented by the SqlDataSource control's UpdateCommand is executed.

Note

If you want the FormView control to be in Edit mode by default, then you can assign the value Edit to the FormView control's DefaultMode property.

Inserting Data with the FormView Control

You can use the FormView control to insert new records into a database table. For example, the page in Listing 12.23 enables you to insert a new movie record into the Movies database table.

Listing 12.23. ShowFormViewInserting.aspx

<%@ Page Language="VB" %> <!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 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 Inserting</title> </head> <body> <form runat="server"> <div > <asp:FormView DataSource AllowPaging="true" Runat="server"> <ItemTemplate> <h1><%# Eval("Title") %></h1> <b>Directed By:</b> <%# Eval("Director") %> <br /> <b>In Theaters:</b> <%#Eval("InTheaters") %> <hr /> <asp:LinkButton Text="New Movie" CommandName="New" Runat="server" /> </ItemTemplate> <InsertItemTemplate> <asp:Label Text="Movie Title:" AssociatedControl Runat="server" /> <br /> <asp:TextBox Text='<%# Bind("Title") %>' Runat="server" /> <br /><br /> <asp:Label Text="Movie Director:" AssociatedControl Runat="server" /> <br /> <asp:TextBox Text='<%# Bind("Director") %>' Runat="server" /> <br /><br /> <asp:CheckBox Text="In Theaters" Checked='<%# Bind("InTheaters") %>' Runat="server" /> <br /><br /> <asp:LinkButton Text="Insert Movie" CommandName="Insert" Runat="server" /> | <asp:LinkButton Text="Cancel Insert" CommandName="Cancel" Runat="server" /> </InsertItemTemplate> </asp:FormView> <asp:SqlDataSource ConnectionString="<%$ ConnectionStrings:Movies %>" SelectCommand="SELECT Id,Title,Director,InTheaters FROM Movies" InsertCommand="INSERT Movies (Title,Director,InTheaters) VALUES (@Title,@Director,@InTheaters)" Runat="server" /> </div> </form> </body> </html>

You should notice several things about the page in Listing 12.23. First, notice that the ItemTemplate includes a LinkButton control that looks like this:

<asp:LinkButton Text="New Movie" CommandName="New" Runat="server" />

When you click this LinkButton control, the FormView switches into Insert mode and displays the contents of the InsertTemplate. Notice that the CommandName property has the value New.

The FormView control includes an InsertItemTemplate that contains the form for inserting a new movie record. Each form field uses a two-way databinding expression. For example, the InTheaters CheckBox looks like this:

<asp:CheckBox Text="In Theaters" Checked='<%# Bind("InTheaters") %>' Runat="server" />

The Bind("InTheaters") method binds the value of the CheckBox control's Checked property to the InTheaters database column.

The InsertItemTemplate contains a LinkButton for inserting the record and a LinkButton for canceling the insert operation. The LinkButton for inserting a record looks like this:

<asp:LinkButton Text="Insert Movie" CommandName="Insert" Runat="server" />

Notice that this LinkButton control includes a CommandName property that has the value Insert. When you click the LinkButton, the SQL command represented by the SqlDataSource control's InsertCommand is executed.

Note

You can place the FormView control into Insert mode by default by assigning the value Insert to the control's DefaultMode property.

Deleting Data with the FormView Control

You can use the FormView control to delete database records. For example, the page in Listing 12.24 enables you to delete records from the Movies database table (see Figure 12.16).

Figure 12.16. Deleting a record with the FormView control.

Listing 12.24. ShowFormViewDeleting.aspx

<%@ Page Language="VB" %> <!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 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 Deleting</title> </head> <body> <form runat="server"> <div > <asp:FormView DataSource DataKeyNames="Id" AllowPaging="true" Runat="server"> <ItemTemplate> <h1><%# Eval("Title") %></h1> <b>Directed By:</b> <%# Eval("Director") %> <br /> <b>In Theaters:</b> <%#Eval("InTheaters") %> <hr /> <asp:LinkButton Text="Delete Movie" CommandName="Delete" OnClientClick="return confirm('Are you sure?');" Runat="server" /> </ItemTemplate> </asp:FormView> <asp:SqlDataSource ConnectionString="<%$ ConnectionStrings:Movies %>" SelectCommand="SELECT Id,Title,Director,InTheaters FROM Movies" DeleteCommand="DELETE Movies WHERE Id=@Id" Runat="server" /> </div> </form> </body> </html>

Notice that the FormView control includes a DataKeyNames property, which contains the name of the primary key column from the data source. When deleting records with the FormView control, you need to indicate the primary key column.

Furthermore, notice that the ItemTemplate includes a LinkButton for deleting a record. The LinkButton looks like this:

<asp:LinkButton Text="Delete Movie" CommandName="Delete" OnClientClick="return confirm('Are you sure?');" Runat="server" />

This LinkButton includes a CommandName property that has the value Delete. When you click the LinkButton, the SQL command represented by the SqlDataSource control's DeleteCommand property is executed.

Notice, also, that the LinkButton includes an OnClientClick property that calls the JavaScript confirm() method to display a confirmation dialog box. This extra script prevents users from accidentally deleting database records.

Related

Категории