1. FormView Control Introduction
In this example, we will see how to make use of FormView Control of ‘Asp.Net to retrieve the data from the database. We will use SQLDataSource Control to supply the data for it. We will also look at modifying its Templates. This Control allows us to place the data-bound controls wherever we 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 on the web page wherever we want. This is achieved by the FormView Control. Have a look at the below picture:
FormView Control and DataTable
In the above example, we pick the three-column data from the database Table. Then, using FormView Control, we can place these data wherever we want in the Web Form. The Control allows editing and inserting the data as well. The underplaying DataSource Control will give the support for it. A FormView control has templates associated with it. These Templates are:
- Header Template
- Footer Template
- Edit Item Template
- Insert Item Template
- Item Template
We can change each template and arrange the controls the way we want. The FormView Control always displays Header and Footer Templates are always. Item Template is used to display the data. The Edit Template allows data modification. One can use Insert Template when he/she wants to do the data insertion. In our example, we will use the FormView Control to display the data. Okay, let us start with the example.
2. About This FormView Control Example
The Example ASP.Net Web Form, which uses the FormView Control is below:
About The FormView Control Example
Using the Numbered links, we can navigate through the records. The Header and Footer display is static, and it will not change when we navigate between the records. We can do data Manipulation using the ‘Edit’, ‘Delete’ and ‘New’ links. The Items marked in green boxes are binding to the database and when the user makes record navigation, The FormView Control changes the content in the Green Boxes.
3. Configure SQLDataSource Control
We configure the DataSource Control to supply the data for the FormView Control. Later, we will use it in the Web Form.
The FormView Control enables data editing as well and to allow data editing the underlying data source should also support it. In our example, we configure SQLDataSource control to fetch the data from the Titles table of the Pubs database. Also, we setup the SQLDataSource control in such a way that it can perform the data editing. The below video shows how to set up the SQLDataSource Control.
Video 1: Configuring the SQLDataSource Control
4. Show Data Using FormView Templates
After placing the FormView Control on the Default.aspx page, using the Quick Task Options, we link the SQLDataSource created in the past section to it, using the ‘Choose Data Source’ option. Have a look at the control shown below:
The Control at Runtime
In the above picture:
- Shows the FormView Control.
- 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.
- Text added using the Footer Template. This behaves same as Header template.
- This shows that user can go to different records. This is done using the Paging Option in Quick Task List.
- These options will be displayed when the selected data source is configured for editing the data.
The below video explains how we configure header and footer templates.
Video 2: Configure Header and Footer Templates For FormView Control
5. EditItem & InsertItem Templates
When a user moves between the records by clicking the numbered link at the end of the control, the FormView will be in Read-Only Mode. It uses the ‘Item Template’ when user navigate between the records. Because the records are Read-Only on these navigation. When the user clicks the ‘Edit’ link, the Control uses the ‘EditItem Template’. The same way it displays the ‘InsertItem Template’ when the user clicks the ‘Insert’ link. We can edit each template as an HTML page.
In the editing mode, we can place a fresh set of controls and bind those with the DataSource. The video shows here shows editing the InsertItem and EditItem templates and then running our example.
Video 3: Change Control Orientation and Format the Templates
Source Code: Download ASP.Net FormView Control Example from Google Drive
Categories: Asp 2.0
Tags: EditItem Template, Footer Template, Header Template, InsertItem Template, Item Template, Paging Option
Do you like this Example? Please comment about it for others!!
This site uses Akismet to reduce spam. Learn how your comment data is processed.