- FormView Web Server Control
in ASP.NET environment,This article describes you how to work with FormView Web Control.The FormView control is similar to the DetailsView Control but the the difference is that the DetailsView control uses a build-in tabular layout for displaying the data. In contrast, the FormView control does not specify a pre-defined layout for displaying the record. Instead, you create a template containing controls to display individual fields from the record
By using the FormView control, we have to display a single record of a data source in from the Database. When using the FormView control, you specify templates to display and edit bound values. The templates contains formatting, controls, and binding expressions to create the form.
The FormView can also be used to perform tasks such as updating, inserting, and deleting records. The FormView control renders only a single data record at a time, even if its data source exposes multiple records.
For Data Binding to FormView Control
- use the DataSourceID property of the Controls such as SQLDatasource, which allows you to bind the DetailsView control to a data source control.
- Data binding using the DataSource property, which allows you to bind to various objects, including ADO.NET datasets and data readers.
FormView Control User Interface
By createing Templates,The user can build the user interface (UI) of the FormView control. FormView Control provide different templates for different actions.
FormView Control includes the following Bulid-in Templates such as,
- ItemTemplate -Offers the way to display,insert and edit the data.
- PagerTemplate -Offers the way to controls the Paging
- HeaderTemplate -Offers the way to customizing the Header's style
- FooterTemplate -Offers the way to customizing the Footer's style
- EmptyDataTemplate -specifies the records as No Data when data source is empty.
The following code snippets shows a FormView control to display data.
-
<html >
<head id="Head1" runat="server">
<title>FormView Example</title>
</head>
<body>
<form id="form2" runat="server">
<h3>FormView Example</h3>
<table cellspacing="10">
<tr>
<td valign="top">
<asp:FormView ID="FV1"
DataSourceID="SQLData1"
AllowPaging="true"
runat="server">
<HeaderStyle forecolor="white" backcolor="Blue" />
<ItemTemplate>
<table>
<tr>
<td align="right"><b>Product ID:</b></td>
<td><asp:Label id="ProductIDLabel" runat="server"
Text='<%# Eval("ProductID") %>' /></td>
</tr>
<tr>
<td align="right"><b>Product Name:</b></td>
<td><asp:Label id="ProductNameLabel" runat="server"
Text='<%# Eval("ProductName") %>' /></td>
</tr>
<tr>
<td align="right"><b>Category ID:</b></td>
<td><asp:Label id="CategoryIDLabel" runat="server"
Text='<%# Eval("CategoryID") %>' /></td>
</tr>
<tr>
<td align="right"><b>Quantity Per Unit:</b></td>
<td><asp:Label id="QuantityPerUnitLabel" runat="server"
Text='<%# Eval("QuantityPerUnit") %>' /></td>
</tr>
<tr>
<td align="right"><b>Unit Price:</b></td>
<td><asp:Label id="UnitPriceLabel" runat="server"
Text='<%# Eval("UnitPrice") %>' /></td>
</tr>
</table>
</ItemTemplate>
<PagerTemplate>
<table>
<tr>
<td><asp:LinkButton ID="FirstButton"
CommandName="Page" CommandArgument="First" Text="<<"
RunAt="server"/></td>
<td><asp:LinkButton ID="PrevButton"
CommandName="Page" CommandArgument="Prev" Text="<"
RunAt="server"/></td>
<td><asp:LinkButton ID="NextButton"
CommandName="Page" CommandArgument="Next" Text=">"
RunAt="server"/></td>
<td><asp:LinkButton ID="LastButton"
CommandName="Page" CommandArgument="Last" Text=">>"
RunAt="server"/></td>
</tr>
</table>
</PagerTemplate>
</asp:FormView>
</td>
</tr>
</table>
<asp:SqlDataSource ID="SQLData1"
SelectCommand="SELECT * FROM [Table1]"
connectionstring="<%$ ConnectionStrings:Conn %>"
RunAt="server"/>
</form>
</body>
</html>
- Creating Templates for the FormView
By Adding the Templates of FormView Control,The FormView control can be more customized. The Different kind of templates allow the user to view or modify the data displayed by the control. The contents of each template consist of markup, controls with data-binding expressions, and command buttons that change the mode of the FormView control.
Display Templates
The ItemTemplate is the necessary one for the FormView control.By using ItemTemplate, we are able to display the Data only and in contrast,we are unable to modify or delete the records. The ItemTemplate template displays bound data in read-only mode. You bind controls in the template to data using a data-binding expression that includes the Eval method for one-way data binding.
the following example represents the ItemTemplate of FormView
-
<asp:FormView ID="FormView1"
DataSourceID="SqlDataSource1"
DataKeyNames="ProductID"
RunAt="server">
<ItemTemplate>
<table>
<tr><td align="right"><b>User ID:</b></td><td><%# Eval("UserId") %></td>
</tr><tr><td align="right"><b>User Name:</b>
</td><td><%# Eval("UserName") %></td></tr>
</table>
</ItemTemplate>
</asp:FormView>
-
- Insert and Edit Templates
For Inserting a new record or modifying the exist record,You can use the EditItemTemplate template and the InsertItemTemplate template along the data source. In the EditItemTemplate and InsertItemTemplate templates you typically include controls that take user input, such as TextBox, CheckBox, or DropDownList controls. You might also add controls to display read-only data, and command buttons to allow users to edit the current record, insert a new record, or cancel current action. You bind controls in the EditItemTemplate and InsertItemTemplate templates to data using a data-binding expression that includes the Bind method for two-way data binding.
the following code snippets represents the InsertTemplate and EditTemplate of FormView
-
<asp:sqlDataSource ID="EmployeeDetailsSqlDataSource"
SelectCommand="SELECT * FROM Table1 WHERE Col1 = @Id"
InsertCommand="INSERT INTO Table1(Col1, Col2) VALUES (@LastName, @FirstName);
SELECT @Col1 = SCOPE_IDENTITY()"
UpdateCommand="UPDATE Table1 SET Col1=@LastName, Col2=@FirstName
WHERE Col3=@EmployeeID"
DeleteCommand="DELETE Table1 WHERE Col3=@EmployeeID"
ConnectionString="<%$ ConnectionStrings:Conn %>"
OnInserted="EmployeeDetailsSqlDataSource_OnInserted"
RunAt="server">
<SelectParameters>
<asp:Parameter Name="Col1" Type="Int32" DefaultValue="0" />
</SelectParameters>
<InsertParameters>
<asp:Parameter Name="Col1" Direction="Output" Type="Int32" DefaultValue="0" />
</InsertParameters>
</asp:sqlDataSource>
-
- Paging in a FormView Control
The FormView control can provide built-in paging that can be used to enable paging through records one at a time. The control can also support customizing the paging user interface (UI).
Data Paging Template
The Following ways helps you to customize the user interface (UI) of the FormView paging in a number of ways.
- Paging Modes -By Using PagerSettings property, you can customize the appearance of the paging user interface (UI) of the FormView.
- The FormView control can display direction controls that enable forward and backward navigation as well as numeric controls that enable a user to move to a specific page.
The following code snippets explains you the Paging Mode
-
FormView1.PagerSettings.Mode = PagerButtons.NextPreviousFirstLast
-
The available Modes are as follows,
- NextPrevious
- NextPreviousFirstLast
- Numeric
- NumericFirstLast
Data Paging Template
The FormView control automatically adds user interface (UI) controls for paging after you have specify the AllowPaging Property is to True. You can customize the UI for paging by adding a PagerTemplate template. To specify which paging operation to perform, add a Button control to the template, and then set its CommandName property to Page and its CommandArgument property to one of the following values:
- Next -To navigate to the next page of data
- Prev - To navigate to the previous page.
- First -To navigate to the first page.
- Last -To navigate to the last page.
The following code snippets explains you working with Paging of FormView
-
<html>
<body>
<form id="form2" runat="server">
<h3>FormView Example</h3>
<table cellspacing="10">
<tr>
<td valign="top">
<asp:FormView ID="FV1"
DataSourceID="SQLData1"
AllowPaging="true"
runat="server">
<HeaderStyle forecolor="white" backcolor="Blue" />
<ItemTemplate>
<table>
<tr>
<td align="right"><b>User ID:</b></td>
<td><asp:Label id="lblUserId" runat="server"
Text='<%# Eval("UserID") %>' /></td>
</tr>
<tr>
<td align="right"><b>User Name:</b></td>
<td><asp:Label id="lblUserName" runat="server"
Text='<%# Eval("UserName") %>' /></td>
</tr>
</table>
</ItemTemplate>
<PagerTemplate>
<table>
<tr>
<td><asp:LinkButton ID="FirstButton" CommandName="Page"
CommandArgument="First" Text="<<" RunAt="server"/></td>
<td><asp:LinkButton ID="PrevButton" CommandName="Page"
CommandArgument="Prev" Text="<" RunAt="server"/></td>
<td><asp:LinkButton ID="NextButton" CommandName="Page"
CommandArgument="Next" Text=">" RunAt="server"/></td>
<td><asp:LinkButton ID="LastButton" CommandName="Page"
CommandArgument="Last" Text=">>" RunAt="server"/></td>
</tr>
</table>
</PagerTemplate>
</asp:FormView>
</td>
</tr>
</table>
<asp:SqlDataSource ID="SQLData1"
SelectCommand="SELECT * FROM [UserDetails]"
connectionstring="<%$ ConnectionStrings:Conn %>"
RunAt="server"/>
</form>
</body>
</html>
-
- Related Links
-
