Programming Microsoft ASP.NET 4 - Dino Esposito [254]
To contact this customer, please call <%# Eval("Phone") %>
The first row contains two cells: one for the company name, and one for the country/region. The second row shows the phone number on a single-cell row. Both rows are rendered for each record bound to the ListView control. Figure 11-2 demonstrates the markup you obtain in this way.
Figure 11-2. A tabular layout built with the ListView control.
As you can see in the figure, some extremely simple styles have been applied to the table items. In particular, the
When comparing this sort of flexibility with the GridView control, the GridView control provides a number of free facilities, but it doesn’t offer as much flexibility in design, as seen in this example. To choose, you have to first evaluate your requirements and make a choice between flexibility of rendering and functions to implement.
Using Alternate Rendering for Data Items
ItemTemplate is mandatory in a ListView control and indicates the template to use for each bound item. The AlternatingItemTemplate property can be used to differentiate every other item, as shown in Figure 11-3.
Figure 11-3. A tabular layout built with the ListView control using an alternating item template.
Most of the time, the alternating item template just features the same layout as regular items but styles it differently. However, changes to the template are allowed to any extent that can keep your users happy. The following code uses a small indentation for alternating rows:
To contact this customer, please call <%# Eval("Phone") %>
Figure 11-4 shows the result.
Figure 11-4. Using a slightly different layout for alternating items.
Reflecting On the Table Layout
HTML tables are an essential, but too often abused, piece of the Web jigsaw puzzle. HTML tables were designed for presenting tabular information. And they are still great at doing this. So any developer of a Web page that needs to incorporate a matrix of data is correct in using HTML tables. The problem with tables is that they are often used to define the page layout—a task they weren’t designed for.
To illustrate, a grid control that uses HTML tables to output its content is more than acceptable. A tree-view control that uses HTML tables to list its contents is less desirable. It’s not by mere chance that the ASP.NET team released the CSS adapter toolkit to allow you to change the rendering engine of some controls to make them inherently more CSS-friendly. And the TreeView is just one of the controls whose rendering style can be modified by using the toolkit.
Note
Using tables for creating multicolumn layouts—which is still common these days in most Web sites—has a number of significant drawbacks. Tables require a lot of code (or tags if you create tables declaratively) that has little to do with the data you intend to display through them. This code is tedious to write, verbose, and difficult to maintain. Worse yet, it makes for longer downloads and slower rendering in the browsers (a factor of growing importance for wireless devices). In addition, tables tend to mix up information and layout instead of forcing you to keep them neatly separated, and they result in less accessible content.
Building