FormView Control in Asp.Net

Introduction

The FormView control is used to display a single record from database. It's greater flexiblity is, it displays user-defined templates instead of row fields.

It has 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.
It's properties, handle events can be set dynamically with FormView object model.
It can be customized through templates, themes and styles.

Template are used to display/edit the FormView control. The templates that are used with FormView are as given below:

HeaderTemplate	Displays the content at header row of the template. The header row is displayed at the top of the FormView control when the HeaderText or HeaderTemplate property is set
EmptyDataTemplate	This is used display the content when datasource control does not contain any records. It alerts the ser that datasource has no records.
ItemTemplate	It is used to display the content when Formview is in read-only mode. The item template usually contains controls to display the field values of a record, as well as command buttons to edit, insert, and delete a record.
EditItemTemplate	Displays the content for the data row when the FormView control is in edit mode. This template usually contains input controls and command buttons with which the user can edit an existing record.
InsertItemTemplate	Displays the content for the data row when the FormView control is in insert mode. This template usually contains input controls and command buttons with which the user can add a new record.
PagerTemplate	Displays the content for the pager row displayed when the paging feature is enabled (when the AllowPaging property is set to true). This template usually contains controls with which the user can navigate to another record.
FooterTemplate	The footer row is displayed at the bottom of the FormView control when the FooterText or FooterTemplate property is set. If both the FooterText and FooterTemplate properties are set, the FooterTemplate property takes precedence.

ItemTemplate of FormView is bind to data using a data-binding expression that includes the Eval method for one-way data binding.

EditItemTemplate and InsertItemTemplate templates can be bind to data using a data-binding expression that includes the Bind method for two-way data binding.

Different types of events supported by the FormView control are given below:

Event Name	When it occurs
ItemCommand	Occurs when a button within a FormView control is clicked. This event is often used to perform a task when a button is clicked in the control.
ItemCreated	Occurs after all FormViewRow objects are created in the FormView control. This event is often used to modify the values of a record before it is displayed.
ItemDeleted	Occurs when a Delete button (a button with its CommandName property set to "Delete") is clicked, but after the FormView control deletes the record from the data source. This event is often used to check the results of the delete operation.
ItemDeleting	Occurs when a Delete button is clicked, but before the FormView control deletes the record from the data source. This event is often used to cancel the delete operation.
ItemInserted	Occurs when an Insert button (a button with its CommandName property set to "Insert") is clicked, but after the FormView control inserts the record. This event is often used to check the results of the insert operation.
ItemInserting	Occurs when an Insert button is clicked, but before the FormView control inserts the record. This event is often used to cancel the insert operation.
ItemUpdated	Occurs when an Update button (a button with its CommandName property set to "Update") is clicked, but after the FormView control updates the row. This event is often used to check the results of the update operation.
ItemUpdating	Occurs when an Update button is clicked, but before the FormView control updates the record. This event is often used to cancel the update operation.
ModeChanged	Occurs after the FormView control changes modes (to edit, insert, or read-only mode). This event is often used to perform a task when the FormView control changes modes.
ModeChanging	Occurs before the FormView control changes modes (to edit, insert, or read-only mode). This event is often used to cancel a mode change.
PageIndexChanged	It occurs after the FormView control handles the paging operation. This event is commonly used when you need to perform a task after the user navigates to a different record in the control.
PageIndexChanging	It occurs before the FormView control handles the paging operation. This is often used to cancel the paging operation.

An example for FormVew is given below. For this Northwind database is used to get the records wiith SqlDataSource control.

Default.aspx
Default.aspx.cs

<%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>FormVew Example</title>
</head>
<body>
<form id="form1" runat="server">
<div> 
<asp:formview id="EmployeeFormView"
datasourceid="EmployeeSource"
allowpaging="true" GridLines="Horizontal"
datakeynames="EmployeeID"
emptydatatext="No employees found."  
oniteminserting="EmployeeFormView_ItemInserting"
onmodechanged="EmployeeFormView_ModeChanged"        
runat="server">
<rowstyle backcolor="Bisque"
wrap="false"/>
<editrowstyle backcolor="LightBlue"
wrap="false"/>
<%--header template--%>
<headertemplate>
<table>
<tr>
<td>
<asp:image id="LogoImage"
imageurl="~/Images/LogoImage.jpg"
alternatetext="Our Logo"
runat="server"/>
</td>
<td>
<asp:label id="HeaderLabel"
runat="server"/>
</td>
</tr>
</table>
</headertemplate>
<%--item template--%>
<itemtemplate>
<table width="500px" cellpadding="5">
<tr>
<td rowspan="4">
<asp:image id="EmployeeImage"
imageurl='<%# Eval("PhotoPath") %>'
alternatetext='<%# Eval("LastName") %>' 
runat="server"/>
</td>
<td colspan="2">
&nbsp; 
</td>
</tr>
<tr>
<td>
<b>Name:</b>
</td>
<td>
<%# Eval("FirstName") %> <%# Eval("LastName") %>
</td>
</tr>
<tr>
<td>
<b>Title:</b>
</td>
<td>
<%# Eval("Title") %>
</td>
</tr>
<tr>
<td colspan="2">
<asp:linkbutton id="Edit"
text="Edit"
commandname="Edit"
runat="server"/>
<asp:linkbutton id="NewButton"
text="New"
commandname="New"
runat="server"/> 
</td>
</tr>
</table>       
</itemtemplate>
<%--insert item template--%>
<insertitemtemplate>
<table>
<tr>
<td rowspan="4">
<asp:image id="CompanyLogoEditImage"
imageurl="~/Images/Logo.jpg"
alternatetext="Company logo"
runat="server"/>
</td>
<td colspan="2">
&nbsp; 
</td>
</tr>
<tr>
<td>
<b><asp:Label ID="Label1"
runat="server" 
AssociatedControlID="FirstNameInsertTextBox" 
Text="Name" />:</b>
</td>
<td>
<asp:textbox id="FirstNameInsertTextBox"
text='<%# Bind("FirstName") %>'
runat="server"/>
<asp:textbox id="LastNameInsertTextBox"
text='<%# Bind("LastName") %>'
runat="server"/>
</td>
</tr>
<tr>
<td>
<b><asp:Label ID="Label2"
runat="server" 
AssociatedControlID="TitleInsertTextBox" 
Text="Title" />:</b>
</td>
<td>
<asp:textbox id="TitleInsertTextBox"
text='<%# Bind("Title") %>'
runat="server"/> 
</td>
</tr>
<tr>
<td colspan="2">
<asp:linkbutton id="InsertButton"
text="Insert"
commandname="Insert"
runat="server"/>
<asp:linkbutton id="CancelButton"
text="Cancel"
commandname="Cancel"
runat="server"/> 
</td>
</tr>
</table>       
</insertitemtemplate>
<%--edit item template--%>
<edititemtemplate>
<table width="500px" cellpadding="5">
<tr>
<td rowspan="4">
<asp:image id="EmployeeEditImage"
imageurl='<%# Eval("PhotoPath") %>'
alternatetext='<%# Eval("LastName") %>' 
runat="server"/>
</td>
<td colspan="2">
&nbsp; 
</td>
</tr>
<tr>
<td>
<b>Name:</b>
</td>
<td>
<asp:textbox id="FirstNameUpdateTextBox"
text='<%# Bind("FirstName") %>'
runat="server"/>
<asp:textbox id="LastNameUpdateTextBox"
text='<%# Bind("LastName") %>'
runat="server"/>
</td>
</tr>
<tr>
<td>
<b>Title:</b>
</td>
<td>
<asp:textbox id="TitleUpdateTextBox"
text='<%# Bind("Title") %>'
runat="server"/> 
</td>
</tr>
<tr>
<td colspan="2">
<asp:linkbutton id="UpdateButton"
text="Update"
commandname="Update"
runat="server"/>
<asp:linkbutton id="CancelButton"
text="Cancel"
commandname="Cancel"
runat="server"/> 
</td>
</tr>
</table>       
</edititemtemplate> 
</asp:formview>      
<br/><br/>
<asp:label id="MessageLabel"
forecolor="Red"
runat="server"/>    
<asp:sqldatasource id="EmployeeSource"
selectcommand="Select [EmployeeID], [LastName], [FirstName], [Title], [PhotoPath] From [Employees]"
insertcommand="Insert Into [Employees] ([LastName], [FirstName], [Title]) VALUES (@LastName, @FirstName, @Title)"
updatecommand="Update [Employees] Set [LastName]=@LastName, [FirstName]=@FirstName, [Title]=@Title Where [EmployeeID]=@EmployeeID"
connectionstring="<%$ ConnectionStrings:NorthWindConnectionString%>" 
runat="server"/>
</div>  
     
</form>
</body>
</html>

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Collections;
public partial class _Default : System.Web.UI.Page 
{
    protected void Page_Load(object sender, EventArgs e)
    {
    }
    protected void EmployeeFormView_ItemInserting(Object sender, FormViewInsertEventArgs e)
    {
        MessageLabel.Text = "";
        // Iterate through the items in the Values collection
        // and verify that the user entered a value for each 
        // text box displayed in the insert item template. Cancel
        // the insert operation if the user left a text box empty.
        foreach (DictionaryEntry entry in e.Values)
        {
            if (entry.Value.Equals(""))
            {
                // Use the Cancel property to cancel the 
                // insert operation.
                e.Cancel = true;
                MessageLabel.Text += "Please enter a value for the " +
                entry.Key.ToString() + " field.<br/>";
            }
        }
    }
    protected void EmployeeFormView_ModeChanged(Object sender, EventArgs e)
    {
        // Clear the MessageLabel Label control when the FormView
        // control changes modes.
        MessageLabel.Text = "";
    }
}

Comments/Suggestions are invited. Happy coding......!

Comments Post a Comment

shekar 9/23/2011 (IST) / Reply

Good artcile

yakub 10/24/2011 (IST) / Reply

Good article. It contains valuable information about form view.

Kulasekaralwar.c 7/12/2012 (IST) / Reply

Dear team, How we have javascript validation in formview controls.

Sowmiya 1/9/2013 (IST) / Reply

how to set edititem template in formview?

megha 4/9/2013 (IST) / Reply

Thanks

IYAPPAN V 6/5/2013 (IST) / Reply

thanks

kinjal ribadiya 7/23/2013 (IST) / Reply

how to use in formview control in asp.net?

Teza 11/12/2014 (IST) / Reply

Thank you sooo much....

Comments Post a Comment

shekar 9/23/2011 (IST) / Reply

yakub 10/24/2011 (IST) / Reply

Kulasekaralwar.c 7/12/2012 (IST) / Reply

Sowmiya 1/9/2013 (IST) / Reply

megha 4/9/2013 (IST) / Reply

IYAPPAN V 6/5/2013 (IST) / Reply

kinjal ribadiya 7/23/2013 (IST) / Reply

Teza 11/12/2014 (IST) / Reply

Tags

About me

Our Contacts

Latest Tweets

Comments Post a Comment

shekar 9/23/2011 (IST) / Reply

yakub 10/24/2011 (IST) / Reply

Kulasekaralwar.c 7/12/2012 (IST) / Reply

Sowmiya 1/9/2013 (IST) / Reply

megha 4/9/2013 (IST) / Reply

IYAPPAN V 6/5/2013 (IST) / Reply

kinjal ribadiya 7/23/2013 (IST) / Reply

Teza 11/12/2014 (IST) / Reply

Tags

About me

Our Contacts

Newsletter

Latest Tweets