Online Book Reader

Home Category

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

By Root 5608 0
tag, you can use a tag or provide appropriate CSS styling if you like the output flow with the rest of the page. The layout template must contain a server-side element that acts as the insertion point for data-bound item templates. This can be an HTML element decorated with the runat attribute or an ASP.NET server control. The ID of this placeholder element must be passed to the ListView’s ItemPlaceholderID property.

The LayoutTemplate property alone is not enough, though. At a minimum, you must also specify content for the ItemTemplate or GroupTemplate property. As mentioned, to bind to data, you use ASP.NET <%# … %> data-binding expressions and the Eval or Bind method.

Note

Like any other template properties in ASP.NET controls, the template properties of the ListView control can be set programmatically as well as declaratively. You can assign to a template property any managed object that implements the ITemplate interface. Such an object can be obtained from an ASCX user control by using the LoadTemplate method on the System.Web.UI.Page class.

Let’s put the graphical flexibility of the ListView control through its paces by examining how to render bound data using a number of layouts.

Building a Tabular Layout


The ListView control is the perfect tool to build a table-based interface with more liberty than specialized controls such as DataGrid and GridView typically allow. By properly designing the layout template of a ListView control, you can create an outermost table and then arrange a completely custom output for the child rows. In this way, you gain control over the rows and can, for example, employ two rows per record and even give each row a different number of cells. This level of control is extremely hard to achieve with a GridView control, although it’s not impossible. To customize the GridView control to this level of detail, you need to override some of its protected virtual methods. Doing this requires the creation of a new derived control whose behavior touches on parts of the internal mechanics of the grid.

A ListView control lets you achieve the same results, but much more comfortably and with full support from Visual Studio 2008 designers.

Definition of the Overall Layout


To generate an HTML table, the ListView control needs to have a layout template defined as in the following code snippet:

Customer List

CompanyCountry

The layout comprises two

elements, both of which are optional from a purely functional perspective. The
element, in fact, simplifies the process of styling the output, as you’ll see later in this chapter. Generally, the output is made of two HTML blocks—one for the header and one for the actual data.

The layout template defines the overall markup by defining the tag and adding a child tag. Next, a tag wraps the child rows, each of which will be bound to a data record. In this case, the tag hosts the item templates. For this reason, it features the runat attribute and has its own ID set as the argument of the ItemPlaceholderID property of the ListView control:

DataSourceID="ObjectDataSource1"

ItemPlaceholderID="ListViewContent">

...

The actual body of the resulting table is determined by the item and alternating item templates.

Definition of the Item Template


In a tabular layout, created using an HTML table, the item template can’t be anything but a sequence of

tags. Unlike with a pure grid control such as GridView, in a ListView layout you have no limitation on the number of rows per data item you can display. The following example uses two table rows per bound item:

®Online Book Reader