The FormView Control





The FormView Control

The third new list control in ASP.NET version 2.0 is the FormView control. At first sight, it seems to be remarkably similar to the DetailsView control. In fact, the interface is almost identical, and virtually all of the techniques, syntax, and methods for using it are the same. The difference lies in the way it generates the appearance and content of the user interface.

The DetailsView control uses fields to define the content. The RowFields collection of the control is a reference to a DataControlFieldCollection that contains references to a mixture of the various types of fields that can be used in a GridView or DetailsView control. This includes the BoundField, CheckBoxField, HyperLinkField, and so on.

The FormView control is different in that it does not support any predefined column types at all. It is a completely templated control, in the same way as the existing Repeater control in ASP.NET 1.x. Unless you specify the user interface you want, inside the appropriate templates, you get no output at all from the control.

You can liken this to the differences between the version 1.x DataGrid and Repeater controls. Although a DataGrid can create the complete output itself, automatically generating the appropriate set of columns, you always have to provide a template for a Repeater control.

In most other ways, however, the FormView control behaves just like the DetailsView control. It displays rows from the data source one at a time, rather than in the grid format of the GridView and DataGrid controls. It also modifies its output automatically to suit small-screen and mobile devices, in the same way as you saw for the GridView control earlier in this chapter.

Declaring a FormView Control

The FormView control declaration is similar to that of the DetailsView, except that you use templates for the user interface rather than declaring a series of fields (or just relying on the appropriate fields to be created automatically). Because the FormView is fully templated (with no header or footer rows), there are just three templates you can use. Listing 4.28 shows these three templates within an outline view of the FormView control declaration.

An Outline Declaration of a FormView Control
<asp:FormView  DataSource runat="server"

     DataKeyNames="ShipperID" AllowPaging="True"

     PagerSettings-Mode="Numeric">



  <ItemTemplate>

    ...UI content for displaying row values goes here...

  </ItemTemplate>



  <EditItemTemplate>

    ...UI content for editing rows goes here...

  </EditItemTemplate>



  <InsertItemTemplate>

    ...UI content for adding new rows goes here...

  </InsertItemTemplate>



</asp:FormView>


In most cases, you'll want to enable paging (as shown in Listing 4.28) so that users can scroll through the rows, and you'll want to specify the DataKeyNames so that the key values from each row are stored in the DataKeys array. In fact, the only attributes/properties of the DetailsView control not available for the FormView control are the following:

  • AutoGenerateRows

  • AutoGenerateDeleteButton

  • AutoGenerateEditButton

  • AutoGenerateInsertButton

  • EnablePagingCallbacks

  • RowFields

Declaring Templates for a FormView Control

The templates you declare for a FormView control must contribute the entire UI content, including any command buttons or links you need. The advantage is that you can create almost any layout and appearance. As an example, Listings 4.29, 4.30, and 4.31 show three templates that use ordinary HTML tables to generate the required appearance and layout of the controls.

The ItemTemplate, shown in Listing 4.29, contains an Image control in the left-hand cell of the table, which displays the logo of each shipping company as you scroll through the rows. The right-hand cell contains the company name, phone number, and the links to switch the FormView control into edit mode for the current row or to switch it into insert mode to add a new row.

The Image control uses the new simplified data binding syntax for the Eval method to bind the ImageUrl and AlternateText attributes to columns in the data source row, and to insert the company name and phone number into the right-hand table cell. The image displayed in the Image control comes from a disk file whose name matches the ID values for each shipping company, for example, 2.gif for the shipping company whose ShipperID value is 2. (The new data binding syntax in ASP.NET 2.0, as demonstrated by the use of the Eval method here, is covered in more detail later in this chapter.)

To switch modes, the only requirement is that the links or buttons have the correct values for their CommandName properties. The permissible values are "Edit", "Update", "Delete", "New", "Add", and "Cancel". In this example we've used LinkButton controls, but you can use the ordinary Button control, or use the ImageButton control if you want to display the commands as clickable images.

The ItemTemplate Declaration for a FormView Control
<ItemTemplate>

  <table border="0" cellpadding="5">

  <tr>

    <td>

      <asp:Image Width="100" Height="123"

           runat="server"

           ImageUrl='<%# Eval("ShipperID", "{0}.gif") %>'

           AlternateText='<%# Eval("CompanyName", "{0} Logo") %>' />

    </td>

    <td>

      <b><%#Eval("CompanyName")%></b><p />

      <%#Eval("Phone")%><p />

      <asp:LinkButton  runat="server"

           CommandName="Edit" Text="Edit Details" /><br />

      <asp:LinkButton  runat="server"

           CommandName="New" Text="Add New Shipper" />

    </td>

  </tr>

  </table>

</ItemTemplate>


Listing 4.30 shows the declaration of the EditItemTemplate in this example. Again an HTML table is used. The ID of the shipping company is shown as text; however, it is required to populate the @ShipperID parameter of the SQL UPDATE statement that will be executed to push the changed values back into the database. This means that we must use a server control with a unique ID, along with the Bind method, to expose this value for use as a parameter. Meanwhile the company name and phone number are displayed in TextBox controls so they can be edited, again using the Bind method (instead of the Eval method) so that their values will be available as parameters for the SQL UPDATE statement.

The EditItemTemplate Declaration for a FormView Control
<EditItemTemplate>

  <table border="0" cellpadding="5">

    <tr>

      <td align="right">ShipperID:</td>

      <td>

        <asp:Label runat="server" 

             Text='<%# Bind("ShipperID") %>' /></td>

    </tr>

    <tr>

      <td align="right">Company Name:</td>

      <td>

        <asp:TextBox  runat="server"

             Text='<%# Bind("CompanyName") %>' />

      </td>

    </tr>

    <tr>

      <td align="right">Phone:</td>

      <td>

        <asp:TextBox  runat="server"

             Text='<%# Bind("Phone") %>' />

      </td>

    </tr>

    <tr>

      <td colspan="2">

        <asp:LinkButton  CommandName="Update"

             Text="Update" runat="server" />

        <asp:LinkButton  CommandName="Cancel"

             Text="Cancel" runat="server" />

      </td>

    </tr>

  </table>

</EditItemTemplate>


The final template is the InsertItemTemplate, shown in Listing 4.31. This is very similar to the EditItemTemplate seen in Listing 4.30. However, the ShipperID is an IDENTITY (or AutoNumber) column in the database, so it does not appear in the SQL INSERT statement. As there is no need to populate a parameter for the ShipperID, there is no requirement for a control where the user would enter a value. However, you would have to insert it if the column were not an IDENTITY type.

Of course, the company name and phone number are required, and two TextBox controls are provided for this. These TextBox controls use the Bind method, so as to populate the two matching parameters in the INSERT statement.

The only other differences between the InsertItemTemplate and the EditItemTemplate are the selection of command buttons that are declared in the right-hand cell. When adding new rows, you need only the Insert command and the Cancel command.

The InsertItemTemplate Declaration for a FormView Control
<InsertItemTemplate>

  <table border="0" cellpadding="5">

    <tr>

      <td align="right">Company Name:</td>

      <td>

        <asp:TextBox  runat="server"

             Text='<%# Bind("CompanyName") %>' />

      </td>

    </tr>

    <tr>

      <td align="right">Phone:</td>

      <td>

        <asp:TextBox  runat="server"

             Text='<%# Bind("Phone") %>' />

      </td>

    </tr>

    <tr>

      <td colspan="2">

        <asp:LinkButton  CommandName="Insert"

             Text="Add" runat="server" />

        <asp:LinkButton  CommandName="Cancel"

             Text="Cancel" runat="server" />

      </td>

    </tr>

  </table>

</InsertItemTemplate>


Listings 4.28 through 4.31 show all the code required to declare a complete FormView control that can provide attractive customized output that doesn't look like the standard GridView or DetailsView controls. The remaining task is to add a data source control to the page, with the appropriate settings for the SelectCommand, UpdateCommand, and InsertCommand, as shown in Listing 4.32. This data source control is connected to the FormView control through the DataSourceID property of the FormView, and no other code is required to make it all work. Figure shows the results, with the page in normal mode, edit mode, and insert mode.

The Declaration of the SqlDataSource Control for the FormView
<asp:SqlDataSource  runat="server"

  SelectCommand="SELECT ShipperID, CompanyName, Phone FROM Shippers

  UpdateCommand="UPDATE Shippers SET [email protected],

                 [email protected] WHERE [email protected]"

  InsertCommand="INSERT INTO Shippers (CompanyName, Phone)

                 VALUES (@CompanyName, @Phone)" />


10. The FormView control in normal, edit, and insert modes

graphics/04fig10.gif



     Python   SQL   Java   php   Perl 
     game development   web development   internet   *nix   graphics   hardware 
     telecommunications   C++ 
     Flash   Active Directory   Windows