Programming Template in Web Server Controls

Mahesh Chand
18y
17.6k
0
0

Article

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 control's 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>

<table>
<tr>alternating data</tr>
</table>

</AlternatingItemTemplate>
<ItemTemplate>

<table>
<tr>some item</tr>
</table>

</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 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 separator of a control.
SelectedItemTemplate	Describes the layout and format of selected items of a control.
EditItemTemplate	Some controls such as a DataGrid allows 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 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

<ASP:DataList id="dtList" RepeatColumns="5" RepeatDirection="Horizontal"runat="server">
<HeaderTemplate>
</HeaderTemplate>
<AlternatingItemTemplate>
</AlternatingItemTemplate>
<ItemTemplate>
</ItemTemplate>
<FooterTemplate>
</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, 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

<HeaderTemplate>

DataList Control Header

</HeaderTemplate>
<AlternatingItemTemplate>

 
Category ID: 
<%# DataBinder.Eval(Container.DataItem, "CategoryID") %>
 
Category Name: 
<%# DataBinder.Eval(Container.DataItem, "CategoryName")%>
 
Description: 
<%# DataBinder.Eval(Container.DataItem, "Description") %>
 
Picture: 
<%# DataBinder.Eval(Container.DataItem, "Picture") %>

</div>

</AlternatingItemTemplate>
<ItemTemplate>

 
Category ID: 
<%# DataBinder.Eval(Container.DataItem, "CategoryID") %>
 
Category Name: 
<%# DataBinder.Eval(Container.DataItem, "CategoryName")%>
 
Description: 
<%# DataBinder.Eval(Container.DataItem, "Description") %>
 
Picture: 
<%# DataBinder.Eval(Container.DataItem, "Picture") %>

</div>

</ItemTemplate>
<FooterTemplate>

DataList Control footer

</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 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.

<%@ Import Namespace="System.Data" %>
<%@ Import Namespace="System.Data.SqlClient" %>
<HTML>
<BODY>

DataList Server Control Sample 
<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>

<ASP:DataList id="dtList" RepeatColumns="5"
RepeatDirection="vertical" runat="server">
<HeaderTemplate>

DataList Control Header 
</HeaderTemplate>
<FooterTemplate>

DataList Control footer 
</FooterTemplate>
<ItemTemplate>

 
Category ID: 
<%# DataBinder.Eval(Container.DataItem, "CategoryID") %>
 
Category Name: 
<%# DataBinder.Eval(Container.DataItem, "CategoryName")%>
 
Description: 
<%# DataBinder.Eval(Container.DataItem, "Description") %>
 
Picture: 
<%# DataBinder.Eval(Container.DataItem, "Picture") %>


</ItemTemplate>
<AlternatingItemTemplate>

 
Category ID: 
<%# DataBinder.Eval(Container.DataItem, "CategoryID") %>
 
Category Name: 
<%# DataBinder.Eval(Container.DataItem, "CategoryName")%>
 
Description: 
<%# DataBinder.Eval(Container.DataItem, "Description") %>
 
Picture: 
<%# DataBinder.Eval(Container.DataItem, "Picture") %>

<DIV></DIV>

</AlternatingItemTemplate>
</ASP:DataList>

</BODY>
</HTML>

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.

Up Next

Ebook Download

View all

Hands on ASP.NET GridView

Read by 12k people

Download Now!

Learn

View all