When developing Windows and Web GUI applications, it's impossible to resist the use of data-bound controls. Fortunately, both Windows Forms and Web Forms provide a rich set of data-bound controls that can be used to write a variety of data-driven applications. 

Data-bound controls are not only used to display data from data source, they can also be used to represent data in different formats by managing data-bound controls' layout. In Web server data-bound controls, templates can be used to manage the format and layout of data being displayed in the pages.
 
Introduction.

Templates play a major role in managing the layout and format of the data being displayed in ASP.NET data bound controls. Before we use templates in our application, let's take a quick look at template basics and how to they work.

Templates provide a way to apply a complex formatting on a control's parts such as header, footer, and items. A template is a set of HTML tags, which defines the layout for a particular part of a control. Besides HTML tags, a template can also contain  other controls and ASP.NET inline code.

OK, to have a better understanding, let's take a look at a simple use of templates. The code listed in Listing 1 uses templates in a Repeater control. As you can see from this code listing, I'm using AlternatingTemplate and ItemTempate templates. I'm going to discuss different types of templates in the following section. In AlternatingTemplate, I set font color = red, face = verdana and size = 3 and in ItemTemplate, I use color = green, face = Tahoma, and size = 2. I'm also using HTML table control to display items. You probably can guess from this code. The items of a repeater control will have green color, face Tahoma with size 2. Alternating rows and its items will have color red, face verdana, and size 3.

Listing 1. Applying a simple template on a Repeater control.

<ASP:Repeater id="repeaterControl" runat="server">
<AlternatingItemTemplate>
<font color="red" face = "verdana" size = 3>
<table>
<tr>alternating data</tr>
</table>
</font>
</AlternatingItemTemplate>
<ItemTemplate>
<font color="green" face = "tahoma" size = 2>
<table>
<tr>some item</tr>
</table>
</font>
</ItemTemplate>
<FooterTemplate>
</FooterTemplate>
</ASP:Repeater></P>

Template Types.

A template describes the layout and formatting of a part of a control. Similar to other control tags, templates also have a starting and ending pair of tags. For example, HeaderTemplate describes the layout and format of header of a control. The <HeaderTemplate></HeaderTemplate> pair represents a header template of a control. There are many types of templates as described below.

Table 1 describes the available templates.

Table 1. ASP.NET Templates.

Which Controls Support Templates?

Templates are not supported by all ASP.NET data-bound controls. Templates are supported by complex controls only. In addition to that, each control supports a different set of templates that specify layouts for different portions of the control, such as the header, footer, item, and selected item. The Repeater, DataList, and DataGrid are the controls, which utilize templates.

The Repeater control supports HeaderTemplate, FooterTemplate, ItemTemplate, AlternatingItemTemplate, SeperatorTemplate.

The DataList control supports HeaderTemplate, FooterTemplate, ItemTemplate, AlternatingItemTemplate, SeparatorTemplate, SelectedItemTemplate, and EditItemTemplate.

The DataGrid supports HeaderTemplate, FooterTemplate, ItemTemplate, EditItemTemplate, and Pager.

Creating Templates.

You can create templates using template tags by simply editing your aspx page in a text editor or HTML view of VS.NET.

In Listing 1, we saw you can easily create and use templates in an ASP.NET page by simply defining template tags and have the formatting layout inside the tags. For example, say you want to add templates to a DataList control. First of all, you need to find out what templates do you want to use. A DataList control supports header, footer, item, alternating item, selected item, and edit item templates.

Now let's say we want to use header, item, alternating item and footer templates. The code listed in Listing 2 adds header, item, alternating item, and footer templates of a DataList control. The RepeateColumns property of DataList represents how many column a row of DataList can display.

Listing 2. Adding templates to a DataList control.

So far the code would do nothing. Now we need to add the format of the template within the template tags. The code listed in Listing 3 adds contents to the templates of a DataList control. As you can see from this code, header, footer, item, alternating item templates has different format. You can make this format as much as complex you want. You can even add Web controls to these templates.

Listing 3. Adding templates format of a DataList control.

Templates in Action.

OK, now let's use templates. In our sample, I'm going to use a DataList control. The complete code of aspx page is listed in Listing 4. The asp:DataList syntax represents a DataList server control in ASP.NET. The RepeateColumn property of DataList represents the number of columns we want to display in a row of DataList. 

In this sample, we've a method called FillData. This method binds data from Northwind SQL Server database to the DataList control.

Listing 4. 

The output of Listing 4 is shown in Figure 1, where you can see that data from Categories table of Northwind database is displayed.

How to Compile the Code?

If you're using VS.NET IDE, create a Web application project, open aspx page and copy the entire code. If you're using a text editor, simply copy code in a text editor and save file with aspx extension. 

You also need to change the SQL Server name, user id, and password in the connection string.

Conclusion.

In this article, I discussed some basics of templates and how to use them in data-bound server controls to format the layout of data being displayed in the controls. In my next article, I'll explore the functionality of a DataList control in more details and how to write interactive Web applications using a DataList control.