Part 2 of the ASP.NET Data Control Series continues. In this article, the FormView DataControl is given a closer inspection.

ASP.NET 2.0 Data Controls

Author: Douglas Minnaar

The intent of this series is to provide more information concerning the functionality and limitations of the available ASP.NET 2.0 data controls. This will mostly be demonstrated through the use of code samples. Once this series is complete, I will demonstrate how one can AJAX enable some of these samples to improve the overall user experience. Therefore, this series will address the basics first before moving onto more advanced tools. Many will feel that there is enough information available concerning these matters. However, for completeness sake, I feel it is important to provide a good foundation from which to launch future articles from. The articles in this series will address typical scenarios that one might encounter in terms of developing with ASP.NET data controls.

There will be three parts in this series:

• Part 1 – ASP.NET GridView
• Part 2 – ASP.NET FormView and DetailsView
• Part 3 – ASP.NET Repeater and DataList

The SqlDataSource control is used throughout the series for simplicities sake.

Part 2 - ASP.NET FormView Data Control

This is the second article in a three part series of articles pertaining to the understanding and application of ASP.NET 2.0 data controls. This article will address common functionality that may be required from ASP.NET FormView data controls.

Level: Novice - Intermediate

Prerequisites:

• In order for the sample code to run, one will require the Pubs database running on either SqlExpress or Sql2005.

• An understanding of C# and ASP.NET development code

Please download the code here

Introduction

Based on various Microsoft documentation, the ASP.NET FormView can be summarised as follows.

Displays the values of a single record from a data source using user-defined templates. The FormView control allows you to edit, delete, and insert records. It is similar to the DetailsView control, except it displays user-defined templates instead of row fields.

The FormView control supports the following features:

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

• Built-in inserting capabilities.

• Built-in 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.

Example Details

For this example, a SqlDataSource is used to retrieve a list of authors from the database. A FormView will be used to display Author information. For each Author, a list of book titles is loaded into a GridView data control. The Titles GridView is nested within the FormView data control as a master/detail setup. The FormView behaving as the master and the Tiels GridView as the detail. Also, one is able to open a modal dialog displaying publisher information that an Author is related to. It is alos possible to add a new Title to an author from the Author FormView data control. Therefore, not only does the Author FormView have a GridView nested within it, but also another FormView data control. The whole point of this exercise is to highlight how easy it is to provide rich edit functionality using the FormView data control.

We will be using the SqlDataSource as a data provider in this example. The example will demonstrate the following features:

• Bind FormView to a SqlDataSource (It should be noted that I only use the SqlDataSource for demonstration purposes. I favour the ObjectDataSource over the SqlDataSource in terms of the development I have been involved in)

• Search data using a query statement, ASP.NET control parameters, and ASP.NET controls (TextBox and DropDownList) as the input

• Edit and Update behaviour with the ASP.NET RequiredFieldValidator and CompareValidator controls.

• Delete with confirmation dialog

• Master/Details using a modal dialog

• Master/Detail between FormView (master) and GridView (detail)

• Using the DataBound event

• Implement custom Paging

Note: Please refer to the solution code concerning the following scenarios.

Bind FormView to a SqlDataSource

For this example, a SqlDataSource is used as the FormView data source. The FormView DataSourceID is set to the id of the SqlDataSource. Because paging functionality will be demonstrated, AllowPaging is set to true. The DataKeyNames property is used as a primary key/s (value that uniquely identifies a record) and is set to the author id (au_id).

The OnModeChanged event is used to determine what mode the Author FormView data control is in. In this case we use it to determine whether the Author FormView is in edit or insert mode. If it is, the Search Panel is disabled.

The result from binding to the SqlDataSource is demonstrated as follows.

Search data

This example demonstrates how to search data within the context of a FormView control

The following code highlights the setup for the ASP.NET controls that are used as part of the search.

This is the ASP.NET code required for the setup of the Search Panel

The result is as follows.

The Author FormView SqlDataSource is setup as follows to retrieve data based on search criteria. ASP Control Parameters are used as Select parameters

The SQL Select command is setup as follows.

One can search by Author AND/OR Publisher. The results are as follows.

Edit and Update behaviour with the ASP.NET RequiredFieldValidator and CompareValidator controls

For this scenario please refer to the solution code.

The point of this scenario is to illustrate how one might nest data controls in order to achieve rich edit functionality. In this scenario, a FormView (New Title) and a GridView (Title Detail) is nested within a FormView (Author Detail).

The following screen shot illustrates that when a record is in edit mode; all author detail is required and cannot be left empty. If an attempt is made to update the row, a client-side validation event is raised to indicate that the author fields are required. It should also be noted that the Title GridView now provides an edit option. Also, one is able to add a new Title from this point.

The code to setup the Command Buttons to put the FormView in Edit or New mode is demosntrated as follows. Take note of the CommandName property.

Edit an Author

Edit Title for Author

Add new Title

Delete with confirmation dialog

Unfortunately, there is no setting that one can enable to allow one to have a confirmation dialog popup should a delete action be initiated. The following snippet demonstrates a way that one might use to create this kind of behaviour.

Add some javascript to prompt a user before removing an item.

An ‘OnClientClick’ event handler is configured for the Delete ImageButton. The event handler will execute the ‘ConfirmDelete()’ javascript function.

The resultant behaviour is as follows.

Master/Details using a modal dialog

The following code snippet demonstrates how one might open a dialog window from a FormView control. When the ‘Show Publisher Detail’ link button is clicked, a modal dialog will be opened. Upon opening, the dialog window will load a FormView control with a summary of Publisher detail based on AuthorID. The AuthorID is passed as a parameter as part of the javascript code required to open a modal dialog as can be seen in the snippet below.

A static method (GetClientClick()) in the code behind is used as part of this functionality.

The 'Show Publisher Detail' Link Button is configured as follows.

The result is as follows.

Master/Detail between FormView (master) and GridView (detail)

For each Author record that is retrieved, a GridView will be loaded with titles that have been authored according to the author id. The Author FormView behaves as the Master providing the AuthorId.

Please refer to the solution code for this example.

Implement custom Paging

It is possible to provide rich paging functionality by editing the PagerTemplate of the FormView. The following code snippets illustrate how this is achieved. Please refer to the following code in the actual code solution.

The following code illustrates the ASP.NET settings required to implement a custom paging template. Please take note of the ‘CommandArgument’ and ‘CommandName’ attributes.

The following code illustrates the initlaisation code required to enable the required custom paging functionality.

The result of the aforementioned code is illustrated in the image below.

That’s it for Part 2 of ASP.NET data controls. Part 3 will address the ASP.NET DetailView and Repeater data controls.

Sir,

I’ve come across your article ASP.NET Data Control Series – Part 2 in which you use a custom paging in the form view. I have a similar task where I have form view and I need to be able to page through several records.

I, however don’t use SqlDataSource, instead the architecture is layout over 3 layers. In some instances we use ObjectDataSource with SeletecMethod and TypeName properties. In other instances we just reference the BLL directly in the code behind.

The built-in paging that FormView + SqlDataSource combination offers is very attractive but it is outside of CM and not only that, I don’t want to expose any part of database info in the SqlDataSource mainly the Sql commands and connection strings.

So is there a way to use ODS and still have the rich paging feature? Or, can the SDS point to my BLL using some kind of SelectMethod like in ODS? Or, is there way to encrypt the Sql command and/or the connection string?

Thanks,

EJM

Mr. Minnaar,

Your 3 articles on ASP.NET Data Controls are all well-written and easy to follow -- excellent job!  I am an experienced developer but new to web programming, so this was a big help. 

So often I come across articles and partial code snippets where the authors never show screen images of what the Page actually looks like. You provided this and more -- I downloaded the code, compiled it, and it worked "as is" (after changing web.config to point to my development SQL Server).

Thank you for such a thorough, well done article.

-Dennis

Why is it that you used code-behind for binding? Why not use the inbuilt #bind feature of FormView instead?