Online Book Reader

Home Category

Programming Microsoft ASP.NET 4 - Dino Esposito [255]

By Root 5614 0
a Flow Layout


Visual Studio provides some facilities to work with ListView controls. Specifically, once you have bound the control to a data source, Visual Studio queries the data source and offers to generate some templates for you.

Definition of the Overall Layout


A flow layout is the simplest layout you can get. It requires only that you define a container—typically, a

—and then the markup for each record. The ListView control simply composes the resulting markup by concatenating the markup in a unique flow of HTML tags. Needless to say, the resulting markup can flow horizontally or vertically, depending on the tags you use (block or inline) and the CSS styles you apply.

If you’re looking for a block flow layout, your LayoutTemplate property will probably always look as simple as the one shown here:

If you opt for a tag, instead of getting a new block you get a piece of markup that flows inline with the rest of the ASP.NET page.

Note that in ASP.NET 4 the LayoutTemplate is optional. You can get the same results if you simply wrap the markup directly in an ItemTemplate element, as shown here:

This approach simplifies the definition of a ListView without loss of programming power and generality.

Definition of the Item Layout


A good example of a flowing template is shown in Figure 11-1. Here’s another example:

ID:


CompanyName:

Text='<%# Eval("CompanyName") %>' />


ContactName:

Text='<%# Eval("ContactName") %>' />


ContactTitle:

Text='<%# Eval("ContactTitle") %>' />

The

tag normally creates a new block of markup and breaks the current flow of HTML. However, if you give it the float:left CSS style, it will float in the specified direction. As a result, the block of markup forms a horizontal sequence that wraps to the next line when the border of the browser’s window is met. Figure 11-5 offers a preview.

Note

In the previous chunk of HTML markup, I used and

tags with styles applied and also mixed CSS styles with HTML tags used for controlling the appearance of the page, such as and
. This approach is clearly arguable. The reason why I haven’t opted for a niftier, pure CSS-based code in the snippet is clarity. By reading which CSS styles are applied to which tag, you can more easily make sense of the output depicted in Figure 11-5.

Figure 11-5. Using the float CSS attribute to display

tags as a horizontal sequence.

Building a Tiled Layout


Admittedly, the output of Figure 11-5 is not really attractive, even though it contains a few elements that, if improved a bit, might lead to more compelling results. The output of Figure 11-5 shows blocks of markup that flow horizontally and wrap to the next row. However, they share no common surrounding layout. In other words, those blocks are not tiled. To build a perfectly tiled output, you need to leverage group templates.

Grouping Items


So far we’ve used the ListView control to repeat the item template for each bound record. The GroupTemplate property adds an intermediate (and optional) step in this rendering process. When you specify a group template, the total number of bound records is partitioned in groups and the item template is applied to the records in each group. When a group has been rendered, the control moves to the next one. Each group of records can have its own particular template—the group template—and a separator can be inserted between items and groups. How is the size of each determined? That has to be a fixed value that you set, either declaratively or programmatically, through the

®Online Book Reader