Programming Template in Web Server Controls

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 sources, they can also be used to represent data in different formats by managing data-bound control's layout. In Web server data-bound controls, templates can be used to manage the format and layout of data being displayed on 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 they work.

Templates provide a way to apply 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 a green color, face Tahoma with size 2. Alternating rows and their items will have the 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>

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 the 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

Template	Description
HeaderTemplate	Describes the layout and format of the header of a control
FooterTemplate	Describes the layout and format of the footer of a control.
ItemTemplate	Describes the layout and format of the items displayed by a control.
AlternatingItemTemplate	Describes the layout and format of alternating items of a control.
SeparatorTemplate	A separator separates two items of a control. The SeparatorTemplate describes the layout and format of the separator of a control.
SelectedItemTemplate	Describes the layout and format of selected items of control.
EditItemTemplate	Some controls such as a DataGrid allow users to edit items. The EditItemTemplate describes the layout and format of the items that are being edited.
Pager template	DataGrid control allows users to have a paging option through the pager. The Pager template describes the layout and format of the pager of DataGrid.

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 having 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 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 columns a row of DataList can display.

Listing 2. Adding templates to a DataList control

<asp:DataList id="dtList" RepeatColumns="5" RepeatDirection="Horizontal" runat="server">
    <HeaderTemplate>
        <!-- Content for HeaderTemplate goes here -->
    </HeaderTemplate>
    <AlternatingItemTemplate>
        <!-- Content for AlternatingItemTemplate goes here -->
    </AlternatingItemTemplate>
    <ItemTemplate>
        <!-- Content for ItemTemplate goes here -->
    </ItemTemplate>
    <FooterTemplate>
        <!-- Content for FooterTemplate goes here -->
    </FooterTemplate>
</asp:DataList>

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, and alternating item templates have different formats. You can make this format as as complex you want. You can even add Web controls to these templates.

Listing 3. Adding template format of a DataList control

<HeaderTemplate>
    <font color="#cc3333" face="verdana" size="3">
        <b>DataList Control Header</b>
    </font>
</HeaderTemplate>
<AlternatingItemTemplate>
    <font face="verdana" size="2" color="green">
        <br>
        <b>Category ID: </b><%# DataBinder.Eval(Container.DataItem, "CategoryID") %><br>
        <b>Category Name: </b><%# DataBinder.Eval(Container.DataItem, "CategoryName")%><br>
        <b>Description: </b><%# DataBinder.Eval(Container.DataItem, "Description") %><br>
        <b>Picture: </b><%# DataBinder.Eval(Container.DataItem, "Picture") %><p>
    </font>
</AlternatingItemTemplate>
<ItemTemplate>
    <font face="verdana" size="2">
        <br>
        <b>Category ID: </b><%# DataBinder.Eval(Container.DataItem, "CategoryID") %><br>
        <b>Category Name: </b><%# DataBinder.Eval(Container.DataItem, "CategoryName")%><br>
        <b>Description: </b><%# DataBinder.Eval(Container.DataItem, "Description") %><br>
        <b>Picture: </b><%# DataBinder.Eval(Container.DataItem, "Picture") %><p>
    </font>
</ItemTemplate>
<FooterTemplate>
    <font color="#996600" face="verdana" size="1">
        DataList Control footer
    </font>
</FooterTemplate>

Templates in action

OK, now let's use templates. In our sample, I'm going to use a DataList control. The complete code of the 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 have a method called FillData. This method binds data from the Northwind SQL Server database to the DataList control.

Listing 4

<%@ Import Namespace="System.Data" %>
<%@ Import Namespace="System.Data.SqlClient" %>
<HTML>
<BODY>
    <font color="#006699" size="4" face="verdana">
        DataList Server Control Sample
    </font>
    <script language="VB" runat="server">
        Sub Page_Load(sender As Object, e As EventArgs)
            fillData()
        End Sub

        Sub fillData()
            Dim conn As SqlConnection
            Dim adapter As SqlDataAdapter
            Dim connectionString = "Data Source=MCB;Initial Catalog=Northwind;user id=sa;password=;"
            conn = New SqlConnection(connectionString)
            conn.Open()
            Dim sql = "SELECT * FROM Categories"
            adapter = New SqlDataAdapter(sql, conn)
            Dim ds As Dataset = New DataSet()
            adapter.Fill(ds)
            dtList.DataSource = ds
            dtList.DataBind()
        End Sub
    </script>

    <P>
        <ASP:DataList id="dtList" RepeatColumns="5" RepeatDirection="vertical" runat="server">
            <HeaderTemplate>
                <FONT face="verdana" color="#cc3333" size="3">
                    <B>DataList Control Header</B>
                </FONT>
            </HeaderTemplate>
            <FooterTemplate>
                <FONT face="verdana" color="#996600" size="1">
                    DataList Control footer
                </FONT>
            </FooterTemplate>
            <ItemTemplate>
                <FONT face="verdana" size="2">
                    <BR>
                    <B>Category ID: </B><%# DataBinder.Eval(Container.DataItem, "CategoryID") %>
                    <BR>
                    <B>Category Name: </B><%# DataBinder.Eval(Container.DataItem, "CategoryName")%>
                    <BR>
                    <B>Description: </B><%# DataBinder.Eval(Container.DataItem, "Description") %>
                    <BR>
                    <B>Picture: </B><%# DataBinder.Eval(Container.DataItem, "Picture") %>
                    <P>
                </FONT>
            </ItemTemplate>
            <AlternatingItemTemplate>
                <FONT face="verdana" color="green" size="2">
                    <BR>
                    <B>Category ID: </B><%# DataBinder.Eval(Container.DataItem, "CategoryID") %>
                    <BR>
                    <B>Category Name: </B><%# DataBinder.Eval(Container.DataItem, "CategoryName")%>
                    <BR>
                    <B>Description: </B><%# DataBinder.Eval(Container.DataItem, "Description") %>
                    <BR>
                    <B>Picture: </B><%# DataBinder.Eval(Container.DataItem, "Picture") %>
                    <P>
                    <DIV></DIV>
                </FONT>
            </AlternatingItemTemplate>
        </ASP:DataList>
    </P>
</BODY>
</HTML>

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

DataList Server Control sample

How to compile the code?

If you're using VS.NET IDE, create a Web application project, open the aspx page, and copy the entire code. If you're using a text editor, simply copy code in a text editor and save the file with the 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 detail and how to write interactive Web applications using a DataList control.