1.6.1 Problem 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. 1.6.2 Solution 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. Figure 1-5. DataList with Hashtable data output 
1.6.3 Discussion 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.Load Dim 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 }
| 