Creating a Simple Horizontal Looper in ASP.NET

I created the Horizontal Looper extension for UltraDev and Dreamweaver MX to fill a need for horizontal repeat regions in some of the supported server models of those programs. However, in ASP.NET there is no need for the extension because looping is built into the DataList Application object. This tutorial will show how to create a simple Horizontal Looper using the DataList, including recordset navigation for the loop. I'm going to assume you already know how to set up data connections and create DataSets

Creating the DataSet

To follow the tutorial, create an ASP.NET page named hlooper.aspx (VB or C#). Set up a DataSet to supply the data to the page. Northwind is an example database that everyone who works with ASP.NET probably has, so use the Employees table to create a DataSet named dsEmployees. The SQL statement used in the example is:

SELECT LastName, FirstName, Title, Address, City, Region, PostalCode, Country
FROM Employees
ORDER BY LastName

Next, drag some fields onto the page and format them how you would like to see them within the horizontal repeat region. I've added the following code to the page:

<%# dsEmployees.FieldValue("LastName", Container) %>, <%# dsEmployees.FieldValue("FirstName", Container) %><br />
<%# dsEmployees.FieldValue("Title", Container) %><br />
<%# dsEmployees.FieldValue("Address", Container) %><br />
<%# dsEmployees.FieldValue("City", Container) %>,
<%# dsEmployees.FieldValue("Region", Container) %>
<%# dsEmployees.FieldValue("PostalCode", Container) %><br />
<%# dsEmployees.FieldValue("Country", Container) %>

This will display like this:

Davolio, Nancy
Sales Representative
507 - 20th Ave. E. Apt. 2A
Seattle, WA 98122
USA

With that in place, we can add the DataList to the page to display a horizontal repeat region.

Adding the Horizontal Looper

The DataList is found in two places: the Insert menu under Application Objects > Dynamic Data > DataList and on the Insert bar in the Application tab under Dynamic Data. When you open it, you will be presented with this dialog box:

Figure 1: The DataList dialog box for creating a Horizontal Looper

I've set the following items in the dialog box for the hlooper.aspx page:

The Templates > Item property needs some explaining. We will insert into this box everything that is to be repeated. I prefer to do this in Code view rather than in the DataList interface box. The DataList does not give you a good design view advantage when working with Dreamweaver, so it is often better to create your dynamic display in Dreamweaver first, which I've done earlier, then adding it to the Contents box in the DataList interface, or to Code View within the <ItemTemplate> tags. I've added the display code created earlier to the area within the <ItemTemplate> tags (which will show up in the Contents box, as you can see in Figure 1 above). The Horizontal Looper should now work, displaying 3 rows of 3 columns of data:

The data is displayed, but it's a bit ugly. Luckily, we can even add CSS to the ASP.NET DataList control. First, add a couple of CSS classes to the page (or to an external stylesheet):

<style>
.HLooperCell {padding:10px; border:1px solid black; background-color:#FFC; }
.AlternateHLooperCell{padding:10px; border:1px solid black; background-color:#FFF; }
</style>

I've created a simple alternating background color, and added some padding to the table cell. Next, add the following two attributes to your <asp:DataList> tag:

ItemStyle-CssClass="HLooperCell"
AlternatingItemStyle-CssClass="AlternateHLooperCell"

The ItemStyle-CssClass attribute allows you to set up a class to use for the style of each cell. If you specify an AlternatingItemStyle-CssClass, then you will have an additional style to use for every other table cell.

The entire <asp:DataList> tag now looks like this:

<asp:DataList id="hLooper"
runat="server"
RepeatColumns="3"
RepeatDirection="Horizontal"
RepeatLayout="Table" ItemStyle-CssClass="HLooperCell" AlternatingItemStyle-CssClass="AlternateHLooperCell"
DataSource="<%# dsEmployees.DefaultView %>" >
<ItemTemplate><%# dsEmployees.FieldValue("LastName", Container) %>, <%# dsEmployees.FieldValue("FirstName", Container) %><br />
<%# dsEmployees.FieldValue("Title", Container) %><br />
<%# dsEmployees.FieldValue("Address", Container) %><br />
<%# dsEmployees.FieldValue("City", Container) %>, <%# dsEmployees.FieldValue("Region", Container) %>
<%# dsEmployees.FieldValue("PostalCode", Container) %><br />
<%# dsEmployees.FieldValue("Country", Container) %> </ItemTemplate>
</asp:DataList>

The page now looks like this:

DataSet Paging

To make this a pageable display, simply add the Recordset Navigation Bar from the Application Objects tab of the Insert bar. Our Employees table only has a few records in it, but if we change our Horizontal Looper to display a 2 x 2 table, we can add navigation to it. Double-click the DataList component in the Server Behaviors panel and change the Show to 4 Records and the Total Columns to 2. Next add the Recordset Navigation Bar. If you browse the page now, you will have a pageable Horizontal Looper.

Conclusion

Although I've had requests to build an extension to do horizontal looping in ASP.NET, the functionality already exists and is built into the program. Many things are possible using the built-in Dreamweaver objects and behaviors.