Building Composite Server Controls
page 5 of 6
by Justin Lovell
Average Rating: 
Views (Total / Last 10 Days): 31631/ 38

Code Example - “Template” Composition
“Templating” the output is a simple task with one thing in mind – to give common output. The short-fall of “templating” your output is the following:
  • You may run into naming problems with siblings.

  • Functionality cannot be used. The controls are never added into the page's life stream; therefore, no interaction may occur.

The example that I am going to demonstrate with “templated” output is a score board for a soccer match. The example will be a very simple one with no fancies – this article is only here to demonstrate the technique, not a how-to example.

The score board will have four properties – two integers for the score; and, two strings for the names of the sides (namely, home team and visiting team). This is the basic definition that our server control will take:

public class TemplatedScoreBoard : Control {
   private string pHomeName;
   private string pVisitorName;
   private int pHomeScore = 0;
   private int pVisitorScore = 0;
   public string HomeName {
      get { return pHomeName; }
      set { pHomeName = value; }
   public string VisitorName {
      get { return pVisitorName; }
      set { pVisitorName = value; }
   public int HomeScore {
      get { return pHomeScore; }
      set {
         if (value < 0)
            throw new ArgumentOutOfRangeException();
            pHomeScore = value;
   public int VisitorScore {
      get { return pVisitorScore; }
      set {
         if (value < 0)
            throw new ArgumentOutOfRangeException();
            pVisitorScore = value;

And here is the code that makes up the “templated” output:

protected override void Render(HtmlTextWriter writer) {
   Table table = new Table();
   TableRow headerRow = new TableRow();
   TableCell headerCell = new TableCell();
   TableRow homeTeamRow = new TableRow();
   TableCell homeTeamNameCell = new TableCell();
   TableCell homeTeamScoreCell = new TableCell();
   TableRow visitorTeamRow = new TableRow();
   TableCell visitorTeamNameCell = new TableCell();
   TableCell visitorTeamScoreCell = new TableCell();
   table.Width = Unit.Percentage(100);
   headerCell.ColumnSpan = 2;
   headerCell.HorizontalAlign = HorizontalAlign.Center;
   headerCell.Text = "Score Board";
   headerCell.Style.Add("font-size", "22px");
   headerCell.Style.Add("font-weight", "bold");
   homeTeamNameCell.Text = HomeName;
   homeTeamScoreCell.Text = HomeScore.ToString();
   homeTeamScoreCell.Width = Unit.Percentage(15);
   visitorTeamNameCell.Text = VisitorName;
   visitorTeamScoreCell.Text = VisitorScore.ToString();
   visitorTeamScoreCell.Width = Unit.Percentage(15);

Note that the Table control is never, ever added to the Controls collection – that is why the Table control does not exist in the page life cycle.

View Entire Article

User Comments

Title: Template server control   
Name: cash
Date: 2010-04-14 1:32:41 PM
plese give use simple eg. with property
Title: DP   
Name: Dharmendra
Date: 2010-01-06 2:55:06 AM
Thanks a lot. One of the best, I have read on net.
Title: Nice but a little-bit of misinformation   
Name: Mike Walters (EventBookingDev)
Date: 2007-11-06 1:34:55 PM
just a footnote here but if you are subclassing from Table (as noted: Table, INamingContainer) .. then you do not need to override the "TagKey" property. The only time you would need to do that is if you were subclassing from CompositeControl(in which you would not need INamingContainer either) or attemping to change the rendered output from say Table to Panel(div).
Title: Nice explaination   
Name: hiten Bawni
Date: 2007-08-22 9:23:30 PM
At least it was better then the examples provided on Microsoft's web sites.

Good job!!
Title: Control Naming Error   
Name: Jon^2 S. Pascua
Date: 2007-07-22 11:07:45 PM

In the Interactive Composition example you provided, the controls are instantiated as SearchText but used as SearchTextBox

protected TextBox SearchText = new TextBox();
SearchTextBox.Width = Unit.Percentage(100); (and etc.)

Nice article though. Great Job!
Title: how can i put backroud image   
Name: Ekrem Keçeci
Date: 2006-11-08 7:47:46 AM
i wanna put backround image from code. but i don't know what should do.
Title: Complete Article   
Name: Saakshi
Date: 2006-04-17 11:06:33 AM
Excellent Articles
Title: I like it   
Name: sid76
Date: 2005-06-22 3:31:14 PM
Nice.. Brings together all the information I need. Overall well written, I think I spotted one spelling mistake in this artical.. search the doc for "tow".

Keep it up, I understand now.
Title: Excellent...   
Name: m1k4
Date: 2004-07-31 8:39:44 PM
Very detailed tutorial which helped me to (finaly) understand Composite Web Controls in ASP.NET.

Thank you very much

Product Spotlight
Product Spotlight 

Community Advice: ASP | SQL | XML | Regular Expressions | Windows

©Copyright 1998-2024  |  Page Processed at 2024-07-24 7:21:30 AM  AspAlliance Recent Articles RSS Feed
About ASPAlliance | Newsgroups | Advertise | Authors | Email Lists | Feedback | Link To Us | Privacy | Search