Normally when I am creating a website I tend to create the main functionality in  user controls, which I can then place on the appropriate pages. This approach is easy as you can use the ascx page to set the mark up of what has to appear on the page and write your vb or c# code to perform the bulk of the work.

 

Recently I decided that I should spend some time using server controls instead as I didn't have much practical experience using them. It was only when I starting creating server controls to replicate simple functionality I had earlier created in user controls that I realised how much extra effort is required. A prime example of this is creating either item, header or footer templates for use in things like repeaters.

 

Below is an example of code for an aspx page from the msdn site on the standard use for a repeater, including the markup for the different templates.

   1: <asp:Repeater id="Repeater1" runat="server">
   2:           <HeaderTemplate>
   3:              <table border="1">
   4:                 <tr>
   5:                    <td><b>Company</b></td>
   6:                    <td><b>Symbol</b></td>
   7:                 </tr>
   8:           </HeaderTemplate>
   9:  
  10:           <ItemTemplate>
  11:              <tr>
  12:                 <td> <%# DataBinder.Eval(Container.DataItem, "Name") %> </td>
  13:                 <td> <%# DataBinder.Eval(Container.DataItem, "Ticker") %> </td>
  14:              </tr>
  15:           </ItemTemplate>
  16:  
  17:           <FooterTemplate>
  18:              </table>
  19:           </FooterTemplate>
  20:  
  21:        </asp:Repeater>

It is all very straight forward you create a repeater then very simply you can set what has to appear in the various templates. The difference with server controls is you need to create this all manually. Not only do you actually need to create an instance of the repeater in code and set all the properties you also need to manually create a class for each template and then set the repeater templates to use your new classes.

 

First I will create a new templates for the header, footer and item. Next I will then show you how to set the repeater to use the new templates. The first template I created was the header template and basically in here we need to consider what we are trying to achieve. In this case I wanted an unordered list of items so to create the appropriate markup I simply want my header template to open the unordered list.

   1: public class CustomHeaderTemplate : ITemplate
   2:     {
   3:         public void InstantiateIn(System.Web.UI.Control container)
   4:         {
   5:             Literal Lt_Header = new Literal();
   6:             Lt_Header.ID = "Lt_Header";
   7:             Lt_Header.Text = "<ul>";
   8:                         
   9:             container.Controls.Add(Lt_Header);
  10:         }
  11:     }

 

The key aspects of this are the class must implement the ITemplate interface otherwise you won't be able to set the repeater to use this. The other crucial section is remembering to add the control you create, in this case my Literal, to the container, which will be a repeater, otherwise it won't show. Apart from these two the code is very straight forward so I will move on to creating the footer template.

 

The footer template is almost identical to the header except this time I want to close the unordered list instead of opening it.

   1: public class CustomFooterTemplate : ITemplate
   2:     {
   3:         public void InstantiateIn(System.Web.UI.Control container)
   4:         {
   5:             Literal Lt_Footer = new Literal();
   6:             Lt_Footer.ID = "Lt_Footer";
   7:             Lt_Footer.Text = "</ul>";
   8:  
   9:             container.Controls.Add(Lt_Footer);
  10:         }
  11:     }

 

The final template I will look at is the item template and this is the one where the majority of work needs done.

   1: public class CustomItemTemplate : ITemplate, INamingContainer
   2:     {
   3:         
   4:         public void InstantiateIn(System.Web.UI.Control container)
   5:         {            
   6:                 Literal LtOpenElement = new Literal();
   7:             LtOpenElement.ID = "LtOpenElement";
   8:             LtOpenElement.Text = "<li>";
   9:  
  10:             Literal LtClosingElement = new Literal();
  11:             LtClosingElement.ID = "LtClosingElement";
  12:             LtClosingElement.Text = "</li>";
  13:             Label LblDate = new Label();
  14:             HyperLink HypLink = new HyperLink();
  15:             LblDate.ID = "Lbl_Date";
  16:             LblDate.CssClass = "RssDate";
  17:  
  18:             HypLink.ID = "Hyp_LinkToBlog";
  19:             HypLink.CssClass = "rss";
  20:             container.Controls.Add(LtOpenElement);
  21:             container.Controls.Add(LblDate);
  22:             container.Controls.Add(HypLink);
  23:             container.Controls.Add(LtClosingElement);
  24:             }
  25:  
  26:             
  27:     }

In the above example I am creating the Literals to store the opening and closing li elements but the main section is the HyperLink and the Label as these store the the values that will be populated on ItemDataDound. Effectively you are trying to achieve the same affect as in the designer except it must all be done in code. In this example I am only creating the HyperLink and Label not assigning any values to them, this is because I am doing this in the ItemDataBound method else where.

 

An important consideration is the order you want the items to be rendered, if you look at the code above I have added the Literal with the opening li element first and the closing one last. The reason I have done this is the order they are added dictates which order they are displayed on the page so if we want valid markup to be displayed we need to make sure for each item the content is inside the li elements. Now we have our three templates we need to tell the repeater to use them and this is what I shall now discuss.

 

Setting the repeater to use a your new template is very straight forward simply set the appropriate property to be an instance of your new template,

   1: Rpt_Listings.ItemTemplate = new CustomItemTemplate();
   2: Rpt_Listings.HeaderTemplate = new CustomHeaderTemplate();
   3: Rpt_Listings.FooterTemplate = new CustomFooterTemplate();

 

This was a quick look into how to create templates that can be used with repeaters in server controls to help control the rendering of the page. There is more information on attaching event handlers within template on the Microsoft site so if you are interested in this I suggest you start there.


Bookmark with :
Digg It! DZone StumbleUpon Technorati Reddit Del.icio.us Newsvine Furl Blinklist
posted @ Tuesday, June 17, 2008 11:38 AM | in ASP.NET

Comments

No comments posted yet.

Post Comment

Title *
Name *
Email
Url
Comment *  


Please add 5 and 2 and type the answer here: