Examination of the FormView Control

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)

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="Georgia" OnItemUpdating="FormView1_ItemUpdating" OnModeChanging="FormView1_ModeChanging" OnPageIndexChanging="FormView1_PageIndexChanging" OnItemCommand="FormView1_ItemCommand" OnModeChanged="FormView1_ModeChanged">

<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.

<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.

<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="Georgia" 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(object sender, FormViewPageEventArgs e)

{

FormView1.PageIndex = e.NewPageIndex;

BindData();

}

Switching to Edit Mode in the FormView Control:

The edit button that we created in the ItemTemplate should convert the FormView Labels to TextBoxes so they can be edited/updated. If you have noticed I have set the commandName property of the edit Link Button to "Edit" <asp:LinkButton ID="lbEdit" CommandName="Edit" runat="server" Text="Edit" /> so I can catch its event in the FormView ItemCommand event. The ItemCommand event of the FormView is fired whenever any event is generated inside the FormView. Since, there are several LinkButtons inside the FormView control the commandName can be used to distinguish between different events generated inside the FormView through LinkButtons. Take a look at the code below which switches the FormView control between different modes.

protected void FormView1_ItemCommand(object sender, FormViewCommandEventArgs e)

{

if (e.CommandName.Equals("Edit"))

FormView1.ChangeMode(FormViewMode.Edit);

else if (e.CommandName.Equals("Cancel"))

FormView1.ChangeMode(FormViewMode.ReadOnly);

else if (e.CommandName.Equals("Update"))

UpdateFormView();

}

As, you can see in the code above when the e.CommandName property is "Edit" the FormView mode is changed to FormViewMode.Edit and when the e.CommandName is "Cancel" then it changes to the "ReadOnly" mode. If you notice that when the e.CommandName is Update I do not switch to any mode because on update I need to retrieve the values from the TextBoxes and send them to the database to update the data.

The UpdateFormView Method:

private void UpdateFormView()

{

int userID = Convert.ToInt32(FormView1.DataKey.Value);

string firstName = ((TextBox)FormView1.FindControl("txtFirstName")).Text;

string lastName = ((TextBox)FormView1.FindControl("txtLastName")).Text;

string address = ((TextBox)FormView1.FindControl("txtAddress")).Text;

// Update the data in the database

// I will leave the update method for the reader to implement

}

For the update to work you must get the primary key of the user. This is done by setting the primary key as the DatakeyNames in the FormView control. Take a look at the code below on how to set the DataKeyName for your FormView control.

<asp:FormView DataKeyNames="UserID" ID="FormView1" runat="server" />

I have not implemented the update method but I am sure since you already got all the information including the primary key of the user it won't be a problem.

Conclusion:

In this article you learned that how you can use the DataSet as a data source for the FormView control. You also learned how to create custom templates and switch FormView display modes based on the nested events. In the later articles we will take a look at more features provided by the FormView control.