You have data in a Hashtable
, a class that
provides
the ability to store a collection of key/value pairs, and you want to
display the data in a columnar table.
Use a DataList
control
and bind the
Hashtable
to it.
Add a DataList
control to the
.aspx
file, being careful to place it in a Table
cell in order to control its position on the form.
In the code-behind class for the page, use the .NET language of your choice to:
Define the Hashtable
as the data source for the
DataList
control.
Set the control’s key and value.
Bind the Hashtable
to the
DataList
control.
Figure 1-5 shows the appearance of a typical
DataList
within a browser that has been bound to a
Hashtable
filled with, in our case, book data.
Example 1-14 through Example 1-16 show the .aspx
and
code-behind files for an application that produces this result.
The DataList
control can display almost any type
of data in a variety of ways using its available templates and
styles. Templates are available for the header, footer, items,
alternating items, separators, selected items, and edit items to
define and organize the data to output. Styles are available for each
of the templates to define how the content appears.
In this example, an asp:DataList
tag is placed in
a Table cell to control its position on the form, as shown in Example 1-14. The RepeatColumns
attribute of the control defines the number of columns that should be
output, which in this case is 4
. The
RepeatDirection
attribute indicates that the data
should be output horizontally, which displays the data in rows from
left-to-right and then top-to-bottom. The
RepeatLayout
attribute indicates that the data
should be output in an HTML table, which provides the greatest
flexibility in arranging the data items.
The HeaderTemplate
element defines
a simple line of text to be used as a header
for the data list. The HeaderTemplate
can also
contain any HTML and ASP controls.
The HeaderStyle
element defines the positioning of
the header as well as the stylesheet class used to define the text
formatting. A large number of style attributes are available to
format the header data.
The ItemTemplate
element defines an HTML table
that contains an image and text describing the image. A table
controls the positioning of the data items.
The ItemStyle
element defines the positioning of
the items output using the ItemTemplate
. In this
example only horizontal and vertical positioning are defined, but
there are many styles available.
The Page_Load
method of the code-behind, shown in
Example 1-15 (VB) and Example 1-16
(C#), uses a Hashtable
as the container for the
data to bind to the DataList
. A
Hashtable
provides the ability to store a
collection of key/value pairs. This is the equivalent of a two-column
table, which provides a lightweight container for data when only two
items are required per row, such as in this example.
This example builds the Hashtable
of data by
declaring a Hashtable
object and adding the
key/value pairs to the Hashtable
. It then sets the
source of the data to the Hashtable
object,
defines the key field (the key in the Hashtable
)
and the data member (the value in the Hashtable
),
and performs a data bind.
Example 1-14. DataList with Hashtable data (.aspx)
<%@ Page Language="vb" AutoEventWireup="false" Codebehind="CH01DataListWithHashtableVB.aspx.vb" Inherits="ASPNetCookbook.VBExamples.CH01DataListWithHashtableVB" %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title>DataList With Hashtable</title> <link rel="stylesheet" href="css/ASPNetCookbook.css"> </head> <body leftmargin="0" marginheight="0" marginwidth="0" topmargin="0"> <form id="frmRepeater" 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"> DataList With Data From Hashtable (VB)</td> </tr> <tr> <td><img src="images/spacer.gif" height="10" border="0"></td> </tr> <tr> <td align="center"><asp:DataList id="dlBooks" runat="server"
RepeatColumns="4"
RepeatDirection="Horizontal"
RepeatLayout="Table" >
<HeaderTemplate>
Several Books Available From O'Reilly & Associates, Inc.
</HeaderTemplate>
<HeaderStyle HorizontalAlign="Center"
CssClass="BlackPageHeading" />
<ItemTemplate>
<table align="center">
<tr>
<td align="center">
<img src="<%# DataBinder.Eval(Container.DataItem, _
"Value") %>"
height="190" width="127"></td>
</tr>
<tr>
<td align="center">
<%# DataBinder.Eval(Container.DataItem, "Key") %></td>
</tr>
</table>
</ItemTemplate>
<ItemStyle HorizontalAlign="Center" VerticalAlign="Top" />
</asp:DataList>
</td> </tr> </table> </form> </body> </html>
Example 1-15. DataList with Hashtable data code-behind (.vb)
Option Explicit On Option Strict On '----------------------------------------------------------------------------- ' ' Module Name: CH01DataListWithHashtableVB.aspx.vb ' ' Description: This class provides the code behind for the ' CH01DataListWithHashtableVB.aspx page ' '***************************************************************************** Imports System.Collections Namespace ASPNetCookbook.VBExamples Public Class CH01DataListWithHashtableVB Inherits System.Web.UI.Page 'controls on form Protected dlBooks As System.Web.UI.WebControls.DataList '************************************************************************* ' ' 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.LoadDim values As Hashtable
If (Not Page.IsPostBack) Then'build HashTable with the names of the books as the key and the
'relative path to the cover image as the value
values = New Hashtable
values.Add(".Net Framework Essentials", _
"images/books/DotNetFrameworkEssentials.gif")
values.Add("Access Cookbook", _
"images/books/AccessCookbook.gif")
values.Add("COM and .Net Component Services", _
"images/books/ComAndDotNet.gif")
values.Add("Java Cookbook", _
"images/books/JavaCookbook.gif")
values.Add("JavaScript Application Cookbook", _
"images/books/JavaScriptCookbook.gif")
values.Add("Programming C#", _
"images/books/ProgrammingCSharp.gif")
values.Add("Programming Visual Basic .Net", _
"images/books/ProgrammingVBDotNet.gif")
values.Add("VB .Net Language in a Nutshell", _
"images/books/VBDotNetInANutshell.gif")
'define the data source, key, value, and bind to the Hashtable
dlBooks.DataSource = values
dlBooks.DataKeyField = "Key"
dlBooks.DataMember = "Value"
dlBooks.DataBind( )
End If End Sub 'Page_Load End Class 'CH01DataListWithHashtableVB End Namespace
Example 1-16. DataList with Hashtable data code-behind (.cs)
//---------------------------------------------------------------------------- // // Module Name: CH01DataListWithHashtableCS.aspx.cs // // Description: This class provides the code behind for // CH01DataListWithHashtableCS.aspx // //**************************************************************************** using System; using System.Collections; namespace ASPNetCookbook.CSExamples { public class CH01DataListWithHashtableCS : System.Web.UI.Page { // controls on form protected System.Web.UI.WebControls.DataList dlBooks; //************************************************************************ // // 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) {Hashtable values = new Hashtable( );
// build HashTable with the names of the books as the key and the
// relative path to the cover image as the value
values = new Hashtable( );
values.Add(".Net Framework Essentials",
"images/books/DotNetFrameworkEssentials.gif");
values.Add("Access Cookbook",
"images/books/AccessCookbook.gif");
values.Add("COM and .Net Component Services",
"images/books/ComAndDotNet.gif");
values.Add("Java Cookbook",
"images/books/JavaCookbook.gif");
values.Add("JavaScript Application Cookbook",
"images/books/JavaScriptCookbook.gif");
values.Add("Programming C#",
"images/books/ProgrammingCSharp.gif");
values.Add("Programming Visual Basic .Net",
"images/books/ProgrammingVBDotNet.gif");
values.Add("VB .Net Language in a Nutshell",
"images/books/VBDotNetInANutshell.gif");
// define the data source, key, value, and bind to the Hashtable
dlBooks.DataSource = values;
dlBooks.DataKeyField = "Key";
dlBooks.DataMember = "Value";
dlBooks.DataBind( );
} // Page_Load } // CH01DataListWithHashtableCS }