Data Bound Controls in ASP.Net - Part 4 (FormView and DetailsView controls)

FormView

The FormView control is used to display a single record from a data source. It is similar to the DetailsView control, except it displays user-defined templates instead of row fields. Creating your own templates gives you greater flexibility in controlling how the data is displayed. The FormView control supports the following features:

·         Binding to data source controls, such as SqlDataSource and ObjectDataSource.

·         Built-in inserting, updating and deleting capabilities.

·         Built-in paging capabilities.

·         Programmatic access to the FormView object model to dynamically set properties, handle events, and so on.

·         Customizable appearance through user-defined templates, themes, and styles.

Templates

For the FormView control to display content, you need to create templates for the different parts of the control. Most templates are optional; however, you must create a template for the mode in which the control is configured. For example, a FormView control that supports inserting records must have an insert item template defined. The following table lists the different templates that you can create.

Template type	Description
EditItemTemplate	Defines the content for the data row when the FormView control is in edit mode. This template usually contains input controls and command buttons with which the user can edit an existing record.
EmptyDataTemplate	Defines the content for the empty data row displayed when the FormView control is bound to a data source that does not contain any records. This template usually contains content to alert the user that the data source does not contain any records.
FooterTemplate	Defines the content for the footer row. This template usually contains any additional content you would like to display in the footer row. As an alternative, you can simply specify text to display in the footer row by setting the FooterText property.
HeaderTemplate	Defines the content for the header row. This template usually contains any additional content you would like to display in the header row. As an alternative, you can simply specify text to display in the header row by setting the HeaderText property.
ItemTemplate	Defines the content for the data row when the FormView control is in read-only mode. This template usually contains content to display the values of an existing record.
InsertItemTemplate	Defines the content for the data row when the FormView control is in insert mode. This template usually contains input controls and command buttons with which the user can add a new record.
PagerTemplate	Defines the content for the pager row displayed when the paging feature is enabled (when the AllowPaging property is set to true). This template usually contains controls with which the user can navigate to another record.

Input controls in the edit item template and insert item template can be bound to the fields of a data source by using a two-way binding expression. This allows the FormView control to automatically extract the values of the input control for an update or insert operation. Two-way binding expressions also allow input controls in an edit item template to automatically display the original field values.

FormView control uses templates, it does not provide a way to automatically generate command buttons to perform updating, deleting, or inserting operations. You must manually include these command buttons in the appropriate template. 

<td><asp:LinkButton ID="New" CommandName="New" runat="server" Text="New"> </asp:LinkButton></td>

<td><asp:LinkButton ID="EditButton" CommandName="Edit" runat="server" Text="Edit"> </asp:LinkButton> </td>

The FormView control recognizes certain buttons that have their CommandNameproperties set to specific values. The following table lists the command buttons that the FormView control recognizes.

Button	Commandname value	Description
Cancel	"Cancel"	Used in updating or inserting operations to cancel the operation and to discard the values entered by the user. The FormView control then returns to the mode specified by the DefaultMode property.
Delete	"Delete"	Used in deleting operations to delete the displayed record from the data source. Raises the ItemDeleting and ItemDeleted events.
Edit	"Edit"	Used in updating operations to put the FormView control in edit mode. The content specified in the EditItemTemplate property is displayed for the data row.
Insert	"Insert"	Used in inserting operations to attempt to insert a new record in the data source using the values provided by the user. Raises the ItemInserting and ItemInserted events.
New	"New"	Used in inserting operations to put the FormView control in insert mode. The content specified in the InsertItemTemplate property is displayed for the data row.
Page	"Page"	Used in paging operations to represent a button in the pager row that performs paging. To specify the paging operation, set theCommandArgument property of the button to "Next", "Prev", "First", "Last", or the index of the page to which to navigate. Raises the PageIndexChanging and PageIndexChanged events.
Update	"Update"	Used in updating operations to attempt to update the displayed record in the data source with the values provided by the user. Raises the ItemUpdating and ItemUpdated events.

Example:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="FormView.aspx.cs" Inherits="FormView" %>

<!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>FormView Example</title>

</head>

<body>

    <form id="form1" runat="server">

      <h3>FormView Example</h3>

        <table cellspacing="10">

          <tr>              

            <td valign="top">

              <asp:FormView DefaultMode="ReadOnly" ID="ProductsFormView" DataSourceID="ProductsSqlDataSource" AllowPaging="true" runat="server"

                            BackColor="LightGoldenrodYellow" BorderColor="Tan" BorderWidth="1px" CellPadding="2" DataKeyNames="ProductID"

                            Font-Bold="True" Font-Names="Verdana" Font-Size="Small" ForeColor="Maroon" Height="215px" Width="262px" >

               

                <HeaderStyle BackColor="Tan" Font-Bold="True" Font-Size="Large" />

                <HeaderTemplate>

                    Product Information

                </HeaderTemplate>

                <FooterStyle BackColor="Tan" />

               

                 <EditItemTemplate>

                    ProductID:

                    <asp:Label ID="ProductIDLabel1" runat="server" Text='<%# Eval("ProductID") %>' />

                    <br />

                    ProductName:

                    <asp:TextBox ID="ProductNameTextBox" runat="server" Text='<%# Bind("ProductName") %>' />

                    <br />

                    Category:

                    <asp:TextBox ID="CategoryIDTextBox" runat="server" Text='<%# Bind("CategoryID") %>' />

                    <br />

                    Quantity Per Unit:

                    <asp:TextBox ID="QuantityPerUnitTextBox" runat="server" Text='<%# Bind("QuantityPerUnit") %>' />

                    <br />

                    Unit Price:

                    <asp:TextBox ID="UnitPriceTextBox" runat="server" Text='<%# Bind("UnitPrice") %>' />

                    <br />

                    <asp:LinkButton ID="UpdateButton" runat="server" CausesValidation="True" CommandName="Update" Text="Update" />

                    &nbsp;<asp:LinkButton ID="UpdateCancelButton" runat="server" CausesValidation="False" CommandName="Cancel" Text="Cancel" />

                </EditItemTemplate>

                 <EditRowStyle BackColor="DarkSlateBlue" ForeColor="GhostWhite" />

                 <InsertItemTemplate>

                    ProductID:

                    <asp:TextBox ID="ProductIDTextBox" runat="server" Text='<%# Bind("ProductID") %>' />

                    <br />

                    ProductName:

                    <asp:TextBox ID="ProductNameTextBox" runat="server" Text='<%# Bind("ProductName") %>' />

                    <br />

                    Category:

                    <asp:TextBox ID="CategoryIDTextBox" runat="server" Text='<%# Bind("CategoryID") %>' />

                    <br />

                    Quantity Per Unit:

                    <asp:TextBox ID="QuantityPerUnitTextBox" runat="server" Text='<%# Bind("QuantityPerUnit") %>' />

                    <br />

                    Unit Price:

                    <asp:TextBox ID="UnitPriceTextBox" runat="server" Text='<%# Bind("UnitPrice") %>' />

                    <br />

                    <asp:LinkButton ID="InsertButton" runat="server" CausesValidation="True" CommandName="Insert" Text="Add" />

                    &nbsp;<asp:LinkButton ID="UpdateCancelButton" runat="server" CausesValidation="False" CommandName="Cancel" Text="Cancel" />

                </InsertItemTemplate>

                <ItemTemplate>

                  <table>

                    <tr>

                      <td align="right"><b>Product ID:</b></td>

                      <td><asp:Label id="ProductIDLabel" runat="server" Text='<%# Eval("ProductID") %>' /></td>

                    </tr>

                    <tr>

                      <td align="right"><b>Product Name:</b></td>

                      <td><asp:Label id="ProductNameLabel" runat="server" Text='<%# Eval("ProductName") %>' /></td>

                    </tr>

                    <tr>

                      <td align="right"><b>Category ID:</b></td>

                      <td><asp:Label id="CategoryIDLabel" runat="server" Text='<%# Eval("CategoryID") %>' /></td>

                    </tr>

                    <tr>

                      <td align="right"><b>Quantity Per Unit:</b></td>

                      <td><asp:Label id="QuantityPerUnitLabel" runat="server" Text='<%# Eval("QuantityPerUnit") %>' /></td>

                    </tr>

                    <tr>

                      <td align="right"><b>Unit Price:</b></td>

                      <td><asp:Label id="UnitPriceLabel" runat="server" Text='<%# Eval("UnitPrice") %>' /></td>

                    </tr>

                    <tr>

                        <td><asp:LinkButton ID="New" CommandName="New" runat="server" Text="New"></asp:LinkButton></td>

                        <td><asp:LinkButton ID="EditButton" CommandName="Edit" runat="server" Text="Edit"></asp:LinkButton> </td>

                    </tr>

                  </table>

                </ItemTemplate>

                <PagerTemplate>

                  <table>

                    <tr>

                      <td><asp:LinkButton ID="FirstButton" CommandName="Page" CommandArgument="First" Text="<<" RunAt="server"/></td>

                      <td><asp:LinkButton ID="PrevButton"  CommandName="Page" CommandArgument="Prev"  Text="<"  RunAt="server"/></td>

                      <td><asp:LinkButton ID="NextButton"  CommandName="Page" CommandArgument="Next"  Text=">"  RunAt="server"/></td>

                      <td><asp:LinkButton ID="LastButton"  CommandName="Page" CommandArgument="Last"  Text=">>" RunAt="server"/></td>

                    </tr>

                  </table>

                </PagerTemplate>

                <PagerStyle BackColor="PaleGoldenrod" ForeColor="DarkSlateBlue" HorizontalAlign="Center" />

              </asp:FormView>

            </td>

          </tr>

        </table>

        <asp:SqlDataSource ID="ProductsSqlDataSource"  DataSourceMode="DataSet"

          SelectCommand="SELECT ProductID, ProductName, CategoryID, QuantityPerUnit, UnitPrice FROM [Products]"

          connectionstring="<%$ ConnectionStrings:NorthwindConnectionString %>"

          RunAt="server"/>

      </form>

  </body>

</html>

DetailsView

The DetailsView control is used to display a single record from a data source in a table, where each field of the record is displayed in a row of the table. It can be used in combination with a GridView control for master-detail scenarios. The DetailsView control supports the following features:

·         Binding to data source controls, such as SqlDataSource.

·         Built-in inserting, updating and deleting capabilities.

·         Built-in paging capabilities.

·         Programmatic access to the DetailsView object model to dynamically set properties, handle events, and so on.

·         Customizable appearance through themes and styles.

Row Fields

Each data row in the DetailsView control is created by declaring a field control. Different row field types determine the behavior of the rows in the control. Field controls derive from DataControlField. The following table lists the different row field types that can be used.

Column field type	Description
BoundField	Displays the value of a field in a data source as text.
ButtonField	Displays a command button in the DetailsView control. This allows you to display a row with a custom button control, such as an Add or a Remove button.
CheckBoxField	Displays a check box in the DetailsView control. This row field type is commonly used to display fields with a Boolean value.
CommandField	Displays built-in command buttons to perform edit, insert, or delete operations in the DetailsView control.
HyperLinkField	Displays the value of a field in a data source as a hyperlink. This row field type allows you to bind a second field to the hyperlink's URL.
ImageField	Displays an image in the DetailsView control.
TemplateField	Displays user-defined content for a row in the DetailsView control according to a specified template. This row field type allows you to create a custom row field.

By default, the AutoGenerateRows property is set to true, which automatically generates a bound row field object for each field of a bindable type in the data source. Valid bindable types are String, DateTime, Decimal, Guid, and the set of primitive types. Each field is then displayed in a row as text, in the order in which each field appears in the data source.

Automatically generating the rows provides a quick and easy way to display every field in the record. However, to make use of the DetailsView control's advanced capabilities you must explicitly declare the row fields to include in the DetailsView control. To declare the row fields, first set the AutoGenerateRows property to false. Next, add opening and closing <Fields> tags between the opening and closing tags of the DetailsView control. Finally, list the row fields that you want to include between the opening and closing <Fields> tags. The row fields specified are added to the Fields collection in the order listed. The Fields collection allows you to programmatically manage the row fields in the DetailsView control.

<asp:DetailsView ID="DetailsView1" runat="server" AutoGenerateRows="False" DataSourceID="AddProductDataSource"

                        DefaultMode="Insert" CellPadding="4" ForeColor="#333333" GridLines="None">

           <Fields>

              <asp:BoundField DataField="ProductName" HeaderText="Product Name:" />

              <asp:BoundField DataField="UnitPrice" HeaderText="Unit Price:" />

              <asp:CheckBoxField DataField="Discontinued" HeaderText="Discontinued:" />

              <asp:CommandField ShowInsertButton="True" />

           </Fields>

      </asp:DetailsView>

Note: Automatically generated row fields are not added to the Fields collection.

The DetailsView control can automatically add a CommandField row field with an Edit, Delete, or New button by setting the AutoGenerateEditButton, AutoGenerateDeleteButton, or AutoGenerateInsertButton properties to true, respectively.

The DetailsView vs. the FormView Controls

The DetailsView and FormView controls have a lot in common - they both display one record at a time and can display interfaces for inserting and updating data. The difference between the two is that the DetailsView control is composed of DataFields (BoundFields, CheckBoxFields, TemplateFields, and so on), just like the GridView. This results in a very boxy appearance. The FormView, on the other hand, uses templates instead of DataFields; consequently, it allows for a much more flexible layout of its display, inserting, and updating interfaces.