October 20, 2013

ASP.Net - Displaying and Manipulating Data Using FormView Control

1. Introduction

In this example, we will see how do we make use of FormView control to retrieve the data from the database. We are going to use SQLDataSource Control to supply the data for the FormView control. We will also have look at modifying the FormView templates.

The FormView control allows you to place the data bound controls wherever you want. It is just like designing the form for calculating the Electricity Bill based on unit consumption. Now think of getting the table columns from the database and placing that freely wherever we want on the web page. This is what achieved by the FormView control. Have a look at the below picture:

The three column data can be placed wherever we want. The FormView control allows editing as well as inserting the data as well. The underplaying Data Source should provide the support for it. A FormView control has templates associated with it. These templates are:

  1. Header Template
  2. Footer Template
  3. Edit Item Template
  4. Insert Item Template
  5. Item Template
You can modify each template and arrange the controls the way you want. Header and Footer templates are always displayed. Item Template is used to display the data. Edit Template is used when we want to modify the Data and Insert Template is used when we want to do the data insertion. In our example, we are going use the FormView Control to display the data. Okay, let us start with the example.

2. About the example

The Example application, which uses the FormView control, is shown below:

Using the Numbered links user can navigate through the records. The header and Footer will be displayed statically and it will not get changed when we navigate between the records. Data Manipulation can be done using the Edit, Delete and New Links. The Items marked in green boxes are bound to the database and when the user makes record navigation, the content in the Green Boxes get changed.

3. Configure Data Source

A DataSource control should be configured to supply the data for the FormView control. In our example, SQLDataSource control is configured to supply the data to the FormView control.

The FormView control enables data editing as well and to allow data editing the underlying data source should also support the data manipulation. In our example, SQLDataSource control is configured to retrieve the data from the Titles table of the Pubs database. Also, the SQLDataSource control is configured in such a way that it can perform the data manipulation as well. The below-given video shows how the SQLDataSource is configured.

Video 1: Configuring the Data Source

4. Configuring the FormView Control – Header, Footer

Once the FormView control is placed on the Default.aspx page, using the Quick Task Options, the SQLDataSource created in the previous section is linked to it, using the Choose Data Source option. Have a look at the FormView control shown below:

In the above picture:

1: Shows the FormView Control.
2: Text added using the Header Template. This text will be constantly displayed when a user moves from one page to other using numbered links at the lower left of the form.
3: Text added using the Footer Template. This behaves same as Header template.
4: This shows that user can go to different records. This is done using the paging option in Quick Task List.
5: These options will be displayed when you selected data source is configured for editing the data.

The below video explains how do you Configure header and footer template.

Video 2: Configuring the FormView control

5. Item Template, EditItem Template and InsertItem template

When a user moves between the records by clicking the numbered link at the end of the control, the FormView will be in ReadOnly Mode. When the FormView control is displayed in the ReadOnly mode the Item Template is used. When user clicks the link “Edit” the EditItem template get displayed. The same way InsertItem template gets displayed when the “Insert” link is clicked. Each template can be edited as a HTML page.

In the Template editing mode, you can place a completely different control and bind that to the control. The below-given video shows editing the InsertItem and EditItem templates.

Video 3: Completing the FormView Control

Source Code : Download

1 comment:

  1. can u please tell me that if I want to display the information only a particular person whose id is selected then what will the code??


Leave your comment(s) here.

Like this site? Tell it to your Friend :)