You need to display data from
a
database in a way that lets you organize and enhance the output
beyond the confines of the DataGrid
control’s default tabular display. Selecting and
editing the data are not important, nor is navigating through the
data.
Use a Repeater
control with
templates and then bind the data
to the control.
In the .aspx
file, add a
Repeater
control and the associated templates for
displaying the data.
In the code-behind class for the page, use the .NET language of your choice to:
Open a connection to the database.
Build a query string, and read the desired data from the database
using an OleDbCommand
and
OleDbDataReader
.
Assign the data source to the Repeater
control and
bind it.
Figure 1-2 shows the appearance of a typical
Repeater
in a browser. Example 1-4 through Example 1-6 show the
.aspx
and code-behind files for an application
that produces this result.
When your primary aim is to organize and enhance the output beyond
the confines of the DataGrid
control’s default tabular display, the
Repeater
control is a good choice because, unlike
a DataGrid
, it has associated templates that allow
you to use virtually any HTML to format the displayed data. It also
has the advantage of being relatively lightweight and easy to use.
When using Repeater
, however, there are a handful
of nuances you should know about that can make life easier and, in
one instance, enhance performance.
Example 1-4 shows one of the most common approaches
to using the Repeater
control, which is to place
the asp:Repeater
element in a table and use its
HeaderTemplate
, ItemTemplate
,
and AlternatingItemTemplate
attributes to format
the displayed data as rows in the table.
A HeaderTemplate
is used to define the header row
of the table. In this example, the header is straight HTML with a
single table row and three columns.
An ItemTemplate
formats the even-numbered rows of
data, while an AlternatingItemTemplate
formats the
odd-numbered rows. For both templates, a single row in the table is
defined with the same three columns defined in the header template.
In each of the three columns, data-binding statements (described
later) define the data to be placed in each of the columns. The only
differences between ItemTemplate
and
AlternatingItemTemplate
are the color schemes and
stylesheet classes used to output the rows. If you do not need to
output the data using alternating styles, then omit the
AlternatingItemTemplate
attribute.
The data from the database is bound to the cells in the templates
using the DataBinder.Eval
method. The Title field
is placed in the first column, the ISBN field is placed in the second
column, and the Publisher field is placed in the third column:
DataBinder.Eval(Container.DataItem, "Title") DataBinder.Eval(Container.DataItem, "ISBN") DataBinder.Eval(Container.DataItem, "Publisher")
If the header is pure HTML with no data binding required, it is more
efficient to remove the HeaderTemplate
attribute
and place the header HTML before the asp:Repeater
tag. By moving the header outside of the
asp:Repeater
tag, the creation of several
server-side controls is eliminated, which reduces the time required
to render the page and improves performance.
<table width="100%" border="2" bordercolor="#000080" bgcolor="#FFFFE0" style="border-style:solid; border-collapse:collapse;"><thead bgcolor="#000080" class="TableHeader">
<tr>
<th align="center">Title</th>
<th align="center">ISBN</th>
<th align="center">Publisher</th>
</tr>
</thead>
<asp:Repeater id=repBooks runat="server"> ... </asp:Repeater> </table>
The Page_Load
method in the code-behind, shown in
Example 1-5 (VB) and Example 1-6
(C#), opens a connection to the database, reads the data from the
database using an OleDbCommand
and an
OleDbDataReader
object, binds the data reader to
the Repeater
control, and then performs the
necessary cleanup.
Recipe 1.6 for another example of using a template with a tabular control
Example 1-4. Templates with Repeater control (.aspx)
<%@ Page Language="vb" AutoEventWireup="false" Codebehind="CH01TemplatesWithRepeaterVB.aspx.vb" Inherits="ASPNetCookbook.VBExamples.CH01TemplatesWithRepeaterVB" %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title>Templates with Repeater</title> <link rel="stylesheet" href="css/ASPNetCookbook.css"> </head> <body leftmargin="0" marginheight="0" marginwidth="0" topmargin="0"> <form id="frmData" method="post" runat="server"> <table width="100%" cellpadding="0" cellspacing="0" border="0"> <tr> <td align="center"> <img src="images/ASPNETCookbookHeading_blue.gif"> </td> </tr> <tr> <td class="dividerLine"> <img src="images/spacer.gif" height="6" border="0"></td> </tr> </table> <table width="90%" align="center" border="0"> <tr> <td><img src="images/spacer.gif" height="10" border="0"></td> </tr> <tr> <td align="center" class="PageHeading"> Templates With Repeater (VB)</td> </tr> <tr> <td><img src="images/spacer.gif" height="10" border="0"></td> </tr> <tr> <td align="center"> <!-- Create a table within the cell to provide localized customization for the book list --> <table width="100%" border="2" bordercolor="#000080" bgcolor="#FFFFE0" style="border-style:solid;border-collapse:collapse;"><asp:Repeater id=repBooks runat="server">
<HeaderTemplate>
<thead bgcolor="#000080" class="TableHeader">
<tr>
<th align="center">Title</th>
<th align="center">ISBN</th>
<th align="center">Publisher</th>
</tr>
</thead>
</HeaderTemplate>
<ItemTemplate>
<tr bordercolor="#000080" class="TableCellNormal">
<td><%# DataBinder.Eval(Container.DataItem, "Title") %>
</td>
<td align="center">
<%# DataBinder.Eval(Container.DataItem, "ISBN") %>
</td>
<td align="center">
<%# DataBinder.Eval(Container.DataItem, "Publisher") %>
</td>
</tr>
</ItemTemplate>
<AlternatingItemTemplate>
<tr bordercolor="#000080" bgcolor="#FFFFFF"
class="TableCellAlternating">
<td><%# DataBinder.Eval(Container.DataItem, "Title") %>
</td>
<td align="center">
<%# DataBinder.Eval(Container.DataItem, "ISBN") %>
</td>
<td align="center">
<%# DataBinder.Eval(Container.DataItem, "Publisher") %>
</td>
</tr>
</AlternatingItemTemplate>
</asp:Repeater>
</table> </td> </tr> </table> </form> </body> </html>
Example 1-5. Templates with Repeater control code-behind (.vb)
Option Explicit On Option Strict On '----------------------------------------------------------------------------- ' ' Module Name: CH01TemplatesWithRepeaterVB.aspx.vb ' ' Description: This class provides the code behind for ' CH01TemplatesWithRepeaterVB.aspx ' '***************************************************************************** Imports Microsoft.VisualBasic Imports System.Configuration Imports System.Data Imports System.Data.OleDb Namespace ASPNetCookbook.VBExamples Public Class CH01TemplatesWithRepeaterVB Inherits System.Web.UI.Page 'controls on form Protected repBooks As System.Web.UI.WebControls.Repeater '************************************************************************* ' ' ROUTINE: Page_Load ' ' DESCRIPTION: This routine provides the event handler for the page load ' event. It is responsible for initializing the controls ' on the page. ' '------------------------------------------------------------------------- Private Sub Page_Load(ByVal sender As System.Object, _ ByVal e As System.EventArgs) _ Handles MyBase.Load Dim dbConn As OleDbConnection Dim dCmd As OleDbCommand Dim dReader As OleDbDataReader Dim strConnection As String Dim strSQL As String If (Not Page.IsPostBack) Then Try'get the connection string from web.config and open a connection
'to the database
strConnection = _
ConfigurationSettings.AppSettings("dbConnectionString")
dbConn = New OleDbConnection(strConnection)
dbConn.Open( )
'build the query string and get the data from the database
strSQL = "SELECT Title, ISBN, Publisher " & _
"FROM Book " & _
"ORDER BY Title"
dCmd = New OleDbCommand(strSQL, dbConn)
dReader = dCmd.ExecuteReader( )
'set the source of the data for the repeater control and bind it
repBooks.DataSource = dReader
repBooks.DataBind( )
Finally 'cleanup If (Not IsNothing(dReader)) Then dReader.Close( ) End If If (Not IsNothing(dbConn)) Then dbConn.Close( ) End If End Try End If End Sub 'Page_Load End Class 'CH01TemplatesWithRepeaterVB End Namespace
Example 1-6. Templates with Repeater control code-behind (.cs)
//---------------------------------------------------------------------------- // // Module Name: CH01TemplatesWithRepeaterCS.aspx.cs // // Description: This class provides the code behind for // CH01TemplatesWithRepeaterCS.aspx // //**************************************************************************** using System; using System.Configuration; using System.Data; using System.Data.OleDb; namespace ASPNetCookbook.CSExamples { public class CH01TemplatesWithRepeaterCS : System.Web.UI.Page { // controls on form protected System.Web.UI.WebControls.Repeater repBooks; //************************************************************************ // // ROUTINE: Page_Load // // DESCRIPTION: This routine provides the event handler for the page // load event. It is responsible for initializing the // controls on the page. // //------------------------------------------------------------------------ private void Page_Load(object sender, System.EventArgs e) { OleDbConnection dbConn = null; OleDbCommand dCmd = null; OleDbDataReader dReader = null; String strConnection = null; String strSQL = null; if (!Page.IsPostBack) { try {// get the connection string from web.config and open a connection
// to the database
strConnection =
ConfigurationSettings.AppSettings["dbConnectionString"];
dbConn = new OleDbConnection(strConnection);
dbConn.Open( );
// build the query string and get the data from the database
strSQL = "SELECT Title, ISBN, Publisher " +
"FROM Book " +
"ORDER BY Title";
dCmd = new OleDbCommand(strSQL, dbConn);
dReader = dCmd.ExecuteReader( );
// set the source of the data for the repeater control and bind it
repBooks.DataSource = dReader;
repBooks.DataBind( );
} finally { // cleanup if (dReader != null) { dReader.Close( ); } if (dbConn != null) { dbConn.Close( ); } } // finally } } // Page_Load } // CH01TemplatesWithRepeaterCS }