Introduction:
ASP.NET 2.0 came out with several cool data
bound controls which includes GridView, DetailsView and
FormView. I read many articles on the web but almost all of them
demonstrated the use of the FormView control with either SqlDataSource
or ObjectDataSource that is why in this article I will demonstrate that
how you can use the FormView control with the DataSet as the data
source. In this article I will demonstrate that how you can enable paging and
switch between different modes in the FormView control which includes
(Edit, Update and Cancel).
Populating the FormView Control:
The first task is to populate the FormView
control with some data. For this reason I made a simple table which contains
some dummy data. You can view the data in the screen shot below:
Now, that we have some data in the database table we can
populate the FormView control. Let's take a look at the BindData
method whose main purpose is to populate the FormView control.
|
private
void
BindData() {
SqlConnection myConnection =
new
SqlConnection(ConnectionString);
SqlDataAdapter ad =
new
SqlDataAdapter("SELECT
* FROM Users",
myConnection);
DataSet
ds = new
DataSet();
ad.Fill(ds);
FormView1.DataSource = ds;
FormView1.DataBind();
} |
As, you can see the above code simply uses the
SqlDataAdapter to populate the DataSet. Once, the DataSet has
been populated it is assigned to the FormView control.
Creating the HeaderTemplate for the FormView Control:
FormView is a template based control so in order to
display some data you need to create templates. Let's create a simple Header
Template that will display the information in the Header of the FormView
control.
|
<asp:FormView
DataKeyNames="UserID"
ID="FormView1"
runat="server"
CellPadding="4"
ForeColor="#333333"
AllowPaging="True"
Font-Names="Verdana"
OnItemUpdating="FormView1_ItemUpdating"
OnModeChanging="FormView1_ModeChanging"
OnPageIndexChanging="FormView1_PageIndexChanging"
OnItemCommand="FormView1_ItemCommand"
OnModeChanged="FormView1_ModeChanged">
<FooterStyle
BackColor="#990000"
Font-Bold="True"
ForeColor="White"
/>
<RowStyle
BackColor="#FFFBD6"
ForeColor="#333333"
/>
<PagerStyle
BackColor="#FFCC66"
ForeColor="#333333"
HorizontalAlign="Center"
/>
<HeaderStyle
BackColor="#990000"
Font-Bold="True"
ForeColor="White"
/>
<HeaderTemplate>
<asp:Label
ID="lblHeader"
runat="server"
Text="User
Details" />
</HeaderTemplate>
</asp:FormView>
|
As, you can see in the code above that the HeaderTemplate
simply contains a simple Label which display the Text "User Details". Take a
look at the screen shot below. I have marked the HeaderTemplate with a
red circle to make it clear.
Creating the ItemTemplate for the FormView Control:
Our next step is to create the ItemTemplate. As, you
can see from the screenshot above that ItemTemplate displays the First
Name, Last Name and Address. Take a look at the code below which creates the
ItemTemplate.
|
<ItemTemplate>
<table>
<tr>
<td>
<asp:LinkButton
ID="lbEdit"
CommandName="Edit"
runat="server"
Text="Edit"
/>
</td>
</tr>
<tr>
<td>
First Name:
</td>
<td>
<asp:Label
ID="lblFirstName"
runat="server"
Text='<%#
Eval("FirstName") %>'
/>
</td>
</tr>
<tr>
<td>
Last Name:
</td>
<td>
<asp:Label
ID="Label1"
runat="server"
Text='<%#
Eval("LastName") %>'
/>
</td>
</tr>
<tr>
<td>
Address:
</td>
<td>
<asp:Label
ID="Label2"
runat="server"
Text='<%#
Eval("Address") %>'
/>
</td>
</tr>
</table>
</ItemTemplate> |
The above ItemTemplate simply contains a HTML table
which contains other controls. The main purpose of the HTML table is just to
position items in a well ordered manner. I have used simple ASP.NET Label
controls to display the information inside the ItemTemplate. Take a look
at the screen shot below to have a clear idea.
Creating the EditItemTemplate for the FormView Control:
The EditItemTemplate will appear when you change the
DefaultMode of the FormView control to "Edit". This is done by
pressing on the Edit LinkButton control. We will look at the code behind
later but for now take a look at the HTML code for the EditItemTemplate.
|
<EditItemTemplate>
<table>
<tr>
<td>
<asp:LinkButton
ID="lbUpdate"
runat="server"
CommandName="Update"
Text="Update"
/>
</td>
<td>
<asp:LinkButton
ID="lbCancel"
runat="server"
CommandName="Cancel"
Text="Cancel"
/>
</td>
</tr>
<tr>
<td>
First Name:
</td>
<td>
<asp:TextBox
ID="txtFirstName"
runat="server"
Text='<%#
Eval("FirstName") %>'
/>
</td>
</tr>
<tr>
<td>
Last Name:
</td>
<td>
<asp:TextBox
ID="txtLastName"
runat="server"
Text='<%#
Eval("LastName") %>'
/>
</td>
</tr>
<tr>
<td>
Address:
</td>
<td>
<asp:TextBox
ID="txtAddress"
runat="server"
Text='<%#
Eval("Address") %>'
/>
</td>
</tr>
</table>
</EditItemTemplate> |
As, you might have guessed that the EditItemTemplate
looks pretty much the same as the ItemTemplate except that it has the
ASP.NET TextBoxes instead of the Labels. Take a look at the screen shot
below to have a clear idea.
Enable Paging in the FormView Control:
The final interface task is to display the paging. This is
pretty simple as all you need is to set the AllowPaging
property to true for the FormView control as shown in the code below:
|
<asp:FormView
DataKeyNames="UserID"
ID="FormView1"
runat="server"
CellPadding="4"
ForeColor="#333333"
AllowPaging="True"
Font-Names="Verdana"
OnItemUpdating="FormView1_ItemUpdating"
OnModeChanging="FormView1_ModeChanging"
OnPageIndexChanging="FormView1_PageIndexChanging"
OnItemCommand="FormView1_ItemCommand"
OnModeChanged="FormView1_ModeChanged"> |
Implementing Paging in the FormView Control:
Now, it is time to write some code to enable paging. You will
need to implement the PageIndexChanging event of the FormView
control which is fired when the paging link buttons are clicked. The code below
assigns the new page index to the FormView control and calls the
BindData to populate the FormView.
|
protected
void FormView1_PageIndexChanging( |