Using the FormView Web Control in ASP.NET 3.5

A FormView web control works much like a DetailsView web control; it will display one record at a time to the browser from the database. The difference is that FormView is a template-based layout for which a developer can make detailed changes that affect the final output when rendered in the browser. This tutorial will explain how it works, and walk you through setting up a FormView web control.

Contributed by Codex-M
Rating:

/ 11
May 20, 2010

Rate this Article:
MEH MEH++

SEARCH ASP FREE

Create the Project, Database and Drag Basic Controls

First, create a project using Visual Web Developer Express; you can choose your own file path. But choose File system for location, ASP.NET Website under installed templates and Visual Basic for Language.

For example, my project is saved at the path E:aspdotnetprojectsformviewexample

You need a sample database for this tutorial, which you can download at the link.

Make sure to extract the zip file and place the militaryaircraft.mdf under the App_Data folder in your ASP.NET project folder. When you go to View à Solution Explorer and Expand App_Data, you should see the militaryaircraft.mdf under it.

Since this project involves images, you need to download the images required for this project to work.

Extract it (if you have WinRar installed, right click and click "Extract here") and put the aircraftimages folder in your ASP.NET project folder. For example:

Of course, inside your App_Data is where the militaryaircraft.mdf is also located.

Next, drag SqlDataSource and the FormView web control to the Default.aspx source code from View à Toolbox à Data

The updated Default.aspx source code will be:

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

</head>

<body>

<div>

<asp:SqlDataSource ID="SqlDataSource1" runat="server"></asp:SqlDataSource>

<asp:FormView ID="FormView1" runat="server">

</asp:FormView>

</div>

</form>

</body>

</html>

Basic FormView configuration

To configure the FormView web control, you need to configure the SqlDataSource first. The rest of this procedure is listed below.

1. Go to the Design view (should look like the image at the link) and right click on SqlDataSource à Show Smart Tag à Configure Data Source.

2. Under "which data connection..." select militaryaircraft.mdf as the database to connect.

3. Check "Yes, save this connection."

4. Under "Configure the Select Statement," select "Specify columns from a table or view." Under database table name, select "aircrafttable." Under Columns, select "*".

5. Click Next and Finish.

6. In the Design View, right click on FormView web control à Show Smart Tag à Choose Data Source à SqlDataSource1.

7. Right click again on Formview à Show Smart Tag à Check "Enable Paging."

8. Save all files and then view the project: File à View in Browser.

What you see is the very basic output of FormView, which looks plain and unformatted:

Binding the images using database information

Note that the basic output in the screen shot in the previous section does not have images, and you cannot use ImageField techniques in FormView, unlike in GridView. Instead, the FormView control outputs this text pertaining to the aircraft ID:

aircraftid: 1

You can use data binding techniques to retrieve this ID from the database and bind it to an image SRC HTML tag. To do this, you need to drag an HTML image tag (View à Toolbox à HTML à Image) to the Default.aspx source code. It will look like this:

Then, when you view the Default.aspx source code, particularly on the <ItemTemplate> aircraftidlabel tag, you will see this:

<asp:Label ID="aircraftidLabel" runat="server"

Text='<%# Eval("aircraftid") %>' />

<br />

This is responsible for the browser output: aircraftid: 1

To change this into an image, you need to delete this and replace it with the image SRC tag, binding the name as the image ALT tag and the ID as the path where the image is located in your ASP.NET project folder. So this will become:

<img alt="<%# Eval("name") %>" src="/formviewexample/aircraftimages/<%# Eval("aircraftid") %>.jpg" />

Eval("name") contains the name of the aircraft retrieved from the database, while Eval("aircraftid") contains the equivalent ID of the aircraft, also stored in the database.

When viewed and rendered in the browser, this will look similar to the example below, which uses the first database record:

So the complete editing procedure is:

1. Replace:

<asp:Label ID="aircraftidLabel" runat="server"

Text='<%# Eval("aircraftid") %>' />

With:

<img alt="<%# Eval("name") %>" src="/formviewexample/aircraftimages/<%# Eval("aircraftid") %>.jpg" />

This will display the images to the browser.

2. Replace the text aircraftid: with:

This will display the name of the aircraft as H2 tag.

3. Capitalize "type:" to "Type:" and "primaryuser:" to "Primary User:"

4. Remove this label because it is now redundant:

name:

<asp:Label ID="nameLabel" runat="server" Text='<%# Bind("name") %>' />

The completely edited <ItemTemplate> at this stage should look like this:

<img alt="<%# Eval("name") %>" src="/formviewexample/aircraftimages/<%# Eval("aircraftid") %>.jpg" />

<br />

Type:

<asp:Label ID="typeLabel" runat="server" Text='<%# Bind("type") %>' />

<br />

Primary User:

<asp:Label ID="primaryuserLabel" runat="server"

Text='<%# Bind("primaryuser") %>' />

<br />

</ItemTemplate>

The browser output of this project at this stage should look like:

Apply formatting (finishing touches)

If you finish the project by applying the following formatting:

Font face: Verdana

Font size in Descriptive Text: Large

Pagination numbers font size: Large

Webpage background color: #999966

H1 tag: Top US Military Aircraft

Then you need to use the following procedures:

1. Just below the <body> tag, insert this H1 tag:

<h1>Top US Military Aircraft</h1>

2. To change the font face entirely to Verdana, go to the Design view. Hit control-A to select all, and then in the font menu (just as you would do in MS Word), change the font to Verdana.

3. To change the font size of the descriptive text "Type" and "Primary User:" to Large, right click on the FormView web control in Design View à Show Smart tag à click "Edit Templates" and in the Display, select "ItemTemplate." Select all descriptive text information (Type, Primary user, etc) as shown in the screen shot below:

And besides the font face settings (like in MS Word), select "Large" font setting. After that, right click again on the ItemTemplate and click "End Template Editing."

4. To change the font size of the pagination numbers to Large, right click on the FormView in Design view, and click Properties. Expand "PagerStyle" à Expand "Font" à and in the "Size," select "Large".

5. To change the background of the web page from white to #999966, right click on Design view (not on any web controls). Under "Body," look for "BgColor." This property will let you edit the background color of the web page.

Set the value at #999966. Example:

6. Finally, you can put two breaks (<br /><br />) after <br class="style1" /> to increase the distances from the pagination to the main FormView content.

The project is now complete. When you look it in the browser, it should look like this: