<asp:FormView> Control
The <asp:FormView> control is used to display a
single record from a data source where data rows represent fields in the record. It operates
very much like the DetailView except that layout is described with template controls rather
than bound fields. The FormView includes features for editing of database records as
well as for their display. The present focus is on using the control for presentation of
information. Its basic layout and formatting options are shown in Figure 7-26.
Figure 7-26. General display format for <asp:FormView> control.
The FormView presents information from a single record from an external data source.
Its DataSourceID property associates the control with a data
source control. Any number and arrangement of data fields from a record are displayed by binding
them to server controls appearing in the <HeaderTemplate>,
<ItemTemplate>, and/or
<FooterTemplate> sections of the control.
Creating a FormView Display
The following FormView presents all data fields from records in the Books
table of the BooksDB.mdb database. Pager settings are included
to permit scrolling through all records. Sorting is not permitted.
Figure 7-27. Basic FormView display.
<asp:AccessDataSource id="BookSource" Runat="Server"
DataFile="../Databases/BooksDB.mdb"
SelectCommand="SELECT * FROM Books ORDER BY BookID"/>
<asp:FormView id="BookView" DataSourceID="BookSource" Runat="Server"
AllowPaging="True"
GridLines="None"
HeaderStyle-BackColor="#909090"
HeaderStyle-ForeColor="#FFFFFF"
HeaderStyle-Font-Bold="True"
HeaderStyle-HorizontalAlign="Center">
<HeaderTemplate>
<asp:Label Text='<%# Eval("BookID") %>' Runat="Server"/>
</HeaderTemplate>
<ItemTemplate>
<table border="1" cellpadding="2" style="border-collapse:collapse">
<tr>
<th style="text-align:left; background-color:#F0F0F0">Type</th>
<td><asp:Label Text='<%# Eval("BookType") %>' Runat="Server"/></td>
</tr>
<tr>
<th style="text-align:left; background-color:#F0F0F0">Title</th>
<td><asp:Label Text='<%# Eval("BookTitle") %>' Runat="Server"/></td>
</tr>
<tr>
<th style="text-align:left; background-color:#F0F0F0">Author</th>
<td><asp:Label Text='<%# Eval("BookAuthor") %>' Runat="Server"/></td>
</tr>
<tr>
<th style="text-align:left; background-color:#F0F0F0;
vertical-align:top">Description</th>
<td><asp:Image Style="float:left; margin-right:10px" Runat="Server"
ImageUrl='<%# "../BookPictures/" & Eval("BookID") & ".jpg" %>'/>
<asp:Label Width="300" Height="103" Style="overflow:auto"
Text='<%# Eval("BookDescription") %>' Runat="Server"/></td>
</tr>
<tr>
<th style="text-align:left; background-color:#F0F0F0">Price</th>
<td><asp:Label Text='<%# String.Format("{0:C}", Eval("BookPrice")) %>'
Runat="Server"/></td>
</tr>
<tr>
<th style="text-align:left; background-color:#F0F0F0">Quantity</th>
<td><asp:Label Text='<%# String.Format("{0:D}", Eval("BookQty")) %>'
Runat="Server"/></td>
</tr>
<tr>
<th style="text-align:left; background-color:#F0F0F0">Sale</th>
<td><asp:CheckBox Checked='<%# Eval("BookSale") %>' Enabled="False"
Runat="Server"/></td>
</tr>
</table>
</ItemTemplate>
</asp:FormView>
Listing 7-23. Code for basic FormView display.
An AccessDataSource supplies all records from the Books table ordered
by BookID. This recordset is linked to the FormView through the
latter's DataSourceID property. Data values from a record are mapped
to FormView controls with standard binding expressions.
The book description is presented in a display area with scroll bars added if all information
cannot be displayed in the sized Label control. In previous examples, this scolling area is
created by enclosing the Label inside a Panel control with the ScrollBars
property. An alternative shown here is to make the Label itself a scrollable control. A Label does
not support the ScrollBars property as does the Panel control. However,
scroll bars can be added to a Label with the CSS overflow property.
The specification Style="overflow:auto" produces vertical scroll bars
if the content of the Label is too large for its fixed size.
FormView Layout
Layout of information appearing in the FormView is controlled through templates containing
combinations of text, XHTML, and server controls with binding expressions. The main display area
is described inside a single <ItemTemplate> control. Within this
template, information can be arranged in any order and positioning. In the current example, an
XHTML table is used to arrange text labels and data displays in columns, although other ways of
displaying this information can be used. You can think of the ItemTemplate as a free-format
display area for selecting and arranging information in any layout format.
As needed, a HeaderTemplate and/or FooterTemplate can be added to the display. In the above
example, a HeaderTemplate is used to format and display book ids through a binding expression
attached to a Label control. The same header or footer literal text can be displayed on all pages
by coding HeaderText or FooterText properties
for the FormView.
Normally, data are displayed in a FormView by binding to Label controls; however, other types of
controls can be employed. Images, of course, are displayed through Image controls, links can be
created with HyperLink controls, and the above ItemSale field is displayed
with a CheckBox control. In fact, any server control can be included in a FormView to display
database information in various formats.
Alternate Layout and Scripting
There is great similarity between the way a DetailsView and FormView handle database
information. The main difference is that the FormView provides greater latitude in arranging
that information for display. Whereas you are restricted to rows of information with a
DetailsView, you can consider the FormView as an blank canvas for arranging data fields.
Any combination of XHTML and style sheet formatting can be applied inside its
ItemTemplate to layout information from a database record.
The following output shows a different arrangement of fields from the previous example,
this time without using a table layout to format information. Also, a function is called
to calculate and display special pricing if the book is on sale. (View the second record
in the database, for example.)
Figure 7-28. Free-format FormView display.
This display is a simple arrangement of output controls within the ItemTemplate. No special
XHTML formatting is applied to arrange the information in row and column format as is done in
the previous example.
<SCRIPT Runat="Server">
Function Get_Sale_Price (Price As Decimal, Sale As Boolean)
If Sale = True Then
Price = Price - (.10 * Price)
Return String.Format("<span style=""color:red"">{0:C} " & _
"<b>Special</b></span>", Price)
Else
Return String.Format("{0:C}", Price)
End If
End Function
</SCRIPT>
<form Runat="Server">
<asp:AccessDataSource id="BookSource" Runat="Server"
DataFile="../Databases/BooksDB.mdb"
SelectCommand="SELECT * FROM Books ORDER BY BookID"/>
<asp:FormView id="BookForm" DataSourceID="BookSource" Runat="Server"
AllowPaging="True"
GridLines="None"
HeaderStyle-BackColor="#909090"
HeaderStyle-ForeColor="#FFFFFF"
HeaderStyle-Font-Bold="True"
HeaderStyle-HorizontalAlign="Center"
>
<HeaderTemplate>
<asp:Label Text='<%# Eval("BookType") & " - " %>' Runat="Server"/>
<asp:Label Text='<%# Eval("BookID") %>' Runat="Server"/>
</HeaderTemplate>
<ItemTemplate>
<asp:Image Style="float:left; margin-right:10px" Runat="Server"
ImageUrl='<%# "../BookPictures/" & Eval("BookID") & ".jpg" %>'/>
<asp:Label Text='<%# Eval("BookTitle") %>'
Font-Bold="True" Runat="Server"/><br/>
<asp:Label Text='<%# Eval("BookAuthor") %> '
Runat="Server"/><br/>
<asp:Label Runat="Server"
Text='<%# Get_Sale_Price(Eval("BookPrice"), Eval("BookSale")) %>'/>
<br/><br/><br/>
<asp:Label Text='<%# String.Format("{0:D}", Eval("BookQty")) %>'
Runat="Server"/>
<asp:CheckBox Checked='<%# Eval("BookSale") %>'
Enabled="False" Text="On Sale" Runat="Server"/><br/>
<br clear="left">
<asp:Label Text='<%# Eval("BookDescription") %>'
Width="450" Height="103" Style="overflow:auto" Runat="Server"/><br/>
<br/>
<hr/>
</ItemTemplate>
</asp:FormView>
</form>
Listing 7-24. Code for free-format FormView display.
The Label that displays the book price calls the Get_Sale_Price
function, passing to it the BookPrice and BookSale
fields from the database. Recall that the BookSale field is an
Access "Yes/No" field whose value is True (checked) or
False (not checked). The function tests the received Sale value.
If it is True, then the book price is calculated at a 10% discount and
formatted for return in red with the "Special" string attached to it. Otherwise, the received
price is returned as a formatted dollar amount.