Click here to Skip to main content
Licence CPOL
First Posted 8 May 2011
Views 10,567
Downloads 327
Bookmarked 7 times

Working with Dynamic Templates in ASP.NET

By | 8 May 2011 | Article
This article explains how to apply templates dynamically to a Repeater Control in ASP.NET
Sample Image - maximum width is 600 pixels

Introduction

Some controls in ASP.NET like the Repeater control require templates to display data. These templates can be applied either statically or dynamically.

Static templates require editing the source code of the ASP.NET control. For example:

On the other hand, dynamic templates are applied at runtime and do not require modifying the source code of the Repeater control.

There are advantages and disadvantages of both approaches. Static templates are faster since they do not incur overhead at runtime but are less flexible, whereas dynamic templates are initially slow but provide more flexibility to the developer.

Background

A Repeater control is a DataBound control in ASP.NET which can be used to display data from a back end database table. But it does not have its own default layout. In order to provide layout to the Repeater control, templates must be defined for it.

The most common way of creating templates for a Repeater control is to modify the source code of the Repeater. However templates can also be created programmatically as is demonstrated by this article.

Using the Code

To create dynamic templates, you must create a class that implements the ITemplate interface as follows:

public class MyTemplate : ITemplate
{
   ListItemType type;	// The type of template (Header, Footer, Item, AlternatingItem
   LiteralControl lc; 	// To hold the template code
   DataSet ds; 		// To hold the data to be bound
   static int ctr; 	// To track current row.
   public MyTemplate(ListItemType type, DataSet ds)
   {
      this.type = type;
      this.ds = ds;
      ctr = 0;
   }

Using the constructor we initialize a ListItemType and DataSet instance variable. The ListItemType variable represents the current template while the DataSet holds the data to be displayed on the Repeater control.

We have to implement the InstantiateIn function passing a Control object as a parameter. Within the InstantiateIn method, we must check the current template and accordingly store the relevant HTML code in a LiteralControl.

Finally, we must add the literal control to the controls collection of the Repeater:

public void InstantiateIn(Control container)
{
    switch (type)				// Check the template type
    {
        case ListItemType.Header:			// Header Template
            lc = new LiteralControl("<table border='5'><
		tr bgcolor='red'><th>Empno</th><th>Name</th></tr>");
            break;
        case ListItemType.Item:			// Item Template
            lc = new LiteralControl("<tr bgcolor='yellow'><
		td>" + ds.Tables["emp"].Rows[ctr]["empno"] + "</td><td>" + 
		ds.Tables["emp"].Rows[ctr]["empname"] + "</td></tr>");
             ctr++;
            break;
        case ListItemType.AlternatingItem:		// AlternatingItem Template
            lc = new LiteralControl("<tr bgcolor='lime'><td>" + 
		ds.Tables["emp"].Rows[ctr]["empno"] + "</td><td>" + 
		ds.Tables["emp"].Rows[ctr]["empname"] + "</td></tr>");
            ctr++;
            break;
        case ListItemType.Footer:			// Footer Template
            lc = new LiteralControl("</table>");
            ctr = 0;
            break;
    }
    container.Controls.Add(lc);
}

Note: For simplicity, I have created ItemTemplate and AlternatingItemTemplate for only two columns, i.e., empno and empname.

In our ASP.NET page in the Page_Load event, we implement DataBinding to bind data from the data source to the Repeater control and apply the templates:

Data Binding

public partial class _Default : System.Web.UI.Page 
{
    protected void Page_Load(object sender, EventArgs e)
    {
        SqlConnection con = new SqlConnection();		// Creating a connection
        con.ConnectionString = @"Data Source=servername;Initial Catalog=databasename;
	  User ID=username;Password=password";		// SQL Connection String 
							// to connect to database
        SqlCommand cmd = new SqlCommand();		// Creating a command
        cmd.Connection = con;
        cmd.CommandType = CommandType.Text;
        cmd.CommandText = "select * from emp";
        SqlDataAdapter da = new SqlDataAdapter();	// Creating a data adapter.
        da.SelectCommand = cmd;
        DataSet ds = new DataSet();			// Creating a DataSet
        con.Open();
        da.Fill(ds, "emp");
        con.Close();

Applying Templates

Repeater1.DataSource = ds.Tables["emp"];
Repeater1.HeaderTemplate = new MyTemplate(ListItemType.Header, null);
Repeater1.ItemTemplate = new MyTemplate(ListItemType.Item, ds);
Repeater1.AlternatingItemTemplate = new MyTemplate(ListItemType.AlternatingItem, ds);
Repeater1.FooterTemplate = new MyTemplate(ListItemType.Footer, null);
Repeater1.DataBind();

Points of Interest

Initially, I was unable to figure out how to display data from a database, then I realized that I can pass a DataSet parameter to the constructor of the inherited template class and retrieve the data table, data row and data column and use them in ItemTemplate and AlternatingItemTemplate.

History

  • 8th May, 2011: Initial post

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

About the Author

Azim Zahir

Instructor / Trainer
NIIT, India
India India

Member

I am a trainer by profession. Currently I am working with NIIT (Mumbai, India) as a Senior Faculty. I enjoy programming as a hobby. My favorite technologies are Flash, Flex and Silverlight.
 
Of late I have developed keen interest in WPF and Windows Mobile programming.
 
Apart from computers, my favorite pastime is bicycling.

Sign Up to vote   Poor Excellent
Add a reason or comment to your vote: x
Votes of 3 or less require a comment

Comments and Discussions

 
You must Sign In to use this message board. (secure sign-in)
 
Search this forum  
 FAQ
    Noise  Layout  Per page   
  Refresh
GeneralMy vote of 5 PinmemberSigar.dave2:48 16 Feb '12  
GeneralRe: My vote of 5 PinmemberAzim Zahir22:07 19 Mar '12  
GeneralMy vote of 1 Pinmembertretyak21:44 21 May '11  
GeneralRe: My vote of 1 PinmemberAzim Zahir20:25 23 May '11  
GeneralMy vote of 1 PinmemberSeishin#21:32 8 May '11  
Generalbecause.... PinmemberSeishin#21:32 8 May '11  
GeneralRe: because.... PinmemberAzim Zahir15:46 9 May '11  
GeneralRe: because.... PinmemberHaBiX22:50 9 May '11  
GeneralRe: because.... PinmemberAzim Zahir5:49 10 May '11  

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Mobile
Web01 | 2.5.120517.1 | Last Updated 8 May 2011
Article Copyright 2011 by Azim Zahir
Everything else Copyright © CodeProject, 1999-2012
Terms of Use
Layout: fixed | fluid