Control presentation with ASP.NET 2.0's FormView control

by Tony Patton | Mar 19, 2007 8:49:00 PM

Tags: .NET, Middleware, ASP.NET 2.0, Tony Patton, FormView, FormView control, Microsoft ASP.NET, .NET Newsletter

Takeaway: A survey of the new ASP.NET 2.0 data controls continues this week with the FormView control. A key feature of the control is customization, as developers may utilize user-defined templates to determine the presentation of data.

ASP.NET 2.0's FormView control resembles the DetailsView control in that it facilitates the display of single records from a backend data source. This article drills down on the control's syntax and application.

Customization

While both controls display one record at a time, the key difference between DetailsView and FormView is that FormView utilizes user-defined templates, as opposed to the row fields used by DetailsView. The FormView control does not have a pre-defined layout for data; instead, you create a template containing controls to display individual fields from the record. The template contains the formatting, controls, and binding expressions used to create the form.

You can control the appearance of the three states of the data record: edit, viewing, and adding a new record. In addition, you can include and format header and footer elements. You can utilize any one of the many available ASP.NET controls within the various sections of the FormView control.

Syntax

Declaring and using an instance of the FormView control closely follows its DetailsView counterpart. The main difference is that you must include formatting or templates for displaying the data as no default is used. Listing A shows a portion of the syntax for the opening FormView element tag.

You may notice that many properties correspond to HTML table elements, with caption and border being two examples. This lets you know that ASP.NET uses HTML tables to render FormView controls.

A more comprehensive listing of the various properties available with the FormView control is available online from Microsoft. A few of the more important properties deserve attention as the following list provides.

• AllowPaging: A Boolean value signaling whether users can page through the records from the assigned data source. If set to true, the default paging system of numbers (1 through the number of records) is displayed at the bottom of the record displayed. The paging links may be customized via the various pager properties available.
• DataKeyNames: The key fields from the data source.
• DataSourceID: The ID of the data source element used to populate the FormView control. This would correspond to the id assigned to the SqlDataSource element if SQL Server is used.
• DefaultMode: Allows you to specify the default behavior for the control. That is, how it is first displayed when accessed by a user. The possible values include ReadOnly, Insert, and Edit.
• EmptyDataText: The text to be displayed when empty data values are encountered.

With the FormView control declared, its contents must be formatted accordingly. Its data is presented via templates. There are five main templates to be used with the FormView control:

• ItemTemplate: Controls the presentation when the data is viewed by the user.
• EditItemTemplate: Determines the formatting and display of data elements when the record is being edited by the user. Within this template, you will use other controls like TextBox elements to allow users to edit values.
• InsertItemTemplate: Similar to editing a record, this template controls the display of fields allowing a user to add a new record to the backend data source. Since new values are entered, the users should be allowed to freely type text or restrict to certain values according to data requirements.
• FooterTemplate: Determines what, if anything, is displayed in the footer portion of the table rendered for the FormView control.
• HeaderTemplate: Determines what, if anything, is displayed in the header portion of the FormView table.

These templates allow you to control the presentation and behavior of data bound to a FormView control. As an example, the ASP.NET Web Form in Listing B connects to the standard Northwind database and allows the user to view, edit, delete, and add new employee records via the first name, last name, hire date, and home phone number fields.

It uses TextField controls to display data to be edited or added and values are simply displayed for viewing. The ItemTemplate uses simple CSS to format the table, while the InsertItemTemplate uses HTML styling—the final decision is in the hands of the developer. Note: Records are added, edited, deleted, and saved via Button controls.

With the Button controls, a CommandName value of New puts the record into insert mode and loads the InsertItemTemplate template, which allows the user to enter values for a new record. You can add a button with a CommandName value of Edit to the ItemTemplate template to put the FormView control into edit mode. A button with a CommandName value of Delete can be added to the ItemTemplate template to allow users to delete the current record from the data source. A CommandName of Update saves the data and Cancel aborts the operation.

Developer control

The ease-of-use associated with many new features of ASP.NET 2.0 is a welcome surprise. FormView extends the simplicity of DetailsView by allowing you to easily control its presentation to be formatted according to the requirements. This new control is just one more option available to you when delivering solutions.

Miss a column?

Check out the .NET Archive, and catch up on the most recent editions of Tony Patton's column.

Tony Patton began his professional career as an application developer earning Java, VB, Lotus, and XML certifications to bolster his knowledge.

Print/View all Posts Comments on this article

Just what Itoms45  | 03/26/07

RE: Control presentation with ASP.NET 2.0's FormView controlraghu_b99@...  | 06/21/07

RE: Control presentation with ASP.NET 2.0's FormView controlblackbr@...  | 03/10/08