Overview of Templates and Data Binding

The DataList control and its cousin the Repeater control both allow you to design a free-form display a layout in which you can specify the data elements positions. In a general way, these two controls are similar to the MxDataGrid control in that they display one data row per element. Unlike the MxDataGrid control, however, the DataList and Repeater controls don t have a predefined look; for instance, they don t necessarily display a single row for each record in the data source. Instead, you create the layout for the data items in the DataList and Repeater controls by creating templates. A template is a block that consists of any combination of static HTML and controls. Instead of displaying data in grid cells, therefore, you can create a page with a layout that looks like the guestbook page shown in Figure 11-1.

Figure 11-1: Guestbook item layout defined using a template.

You typically create a template by typing the static text into the template. You then drag controls from the Toolbox into the template as placeholders for the data to display. Finally, you bind, or associate, the controls to specific columns in the data table. To define a template for displaying the guestbook, for example, you might put one Label control into the template and bind it to the Guestbook table s GuestName column. You might add a second Label control and bind it to the EntryDate column, and so on.

Note 

You might be familiar with this type of functionality if you ve ever worked with a report writer like the one in Microsoft Access.

The DataList and Repeater controls allow you to define templates for different parts of the layout. Both controls allow you to define a template for the header and the footer of your display. The template you ll use most often is the Item template, which is the template in which you define the layout of database data. If you like, you can also define a template for alternating items that is, templates to display for every other data item. The alternating item template allows you to create striped output like that of the MxDataGrid, which makes it easier to read the data. Often, the alternating item template is the same as the item template, except that it has a different background color. If you like, you can define a separator template, where you can put static text or HTML that s rendered between each item in the display.

When the page runs, the DataList control reads each data row and then generates output for it based on the template. Figure 11-2 on the following page shows you an overview of how templates work in the DataList control.

As mentioned, both the DataList and Repeater controls support templates for laying out the data display. You might wonder which control you should use in your application. In one sense, the DataList control is the more powerful of the two, because it allows you to define some additional templates as well. You can create a special look for a selected data item. The DataList control also has support for editing data items. You won t use the selection or edit template in this chapter, though.

The Repeater control, on the other hand, is even more flexible for defining layout than the DataList control. The DataList control, for example, renders an HTML table as its output, albeit with a completely open notion about what goes in each cell. The Repeater control doesn t render any control in particular, so you can use the Repeater control to create virtually any type of output that might be suitable for repetitive elements, including a table, a bulleted list, a numbered list, or even a comma-separated list in a single line.

Web Matrix has WYSIWYG support for creating templates for the DataList control. The Repeater control, in contrast, requires you to create templates by hand in HTML view. By the end of this chapter, you ll be working with templates in HTML view so that you can see the HTML syntax for templates. However, it s much easier to start with the WYSIWYG template editor, so the DataList control it shall be for this chapter. If you want to explore the Repeater control as well, you can read the section Working with the Repeater Control later in this chapter after you ve finished working with the DataList control.

Figure 11-2: The DataList control reads data and uses the templates to create output.