Building Composite Server Controls
page 4 of 6
by Justin Lovell
Average Rating: 
Views (Total / Last 10 Days): 31749/ 85

Code Example – Interactive Composition
You might have noticed that I did not mention to create composition server controls from the CreateChildControls method. There is no strict rule or enforcement with this because of the “templated” composition that may occur (we discussed it on the last line. However, we are going to look at an example with the CreateChildControls method:

The example will be based on a search control. The control will contain two controls – a TextBox control and a Button control. We are going to do the simple UI and simple functionality first before we will add bells and whistles.

public class InteractiveSearchBox : Table, INamingContainer {
   protected TextBox SearchText = new TextBox();
   protected Button SearchButton = new Button();
   protected override HtmlTextWriterTag TagKey {
      get { return HtmlTextWriterTag.Table; }
   protected override void CreateChildControls() {
      TableRow row = new TableRow();
      TableCell textBoxCell = new TableCell();
      TableCell buttonCell = new TableCell();
      buttonCell.Width = Unit.Pixel(1);
      SearchTextBox.Width = Unit.Percentage(100);
   protected override void OnInit(EventArgs e) {
      SearchTextBox.ID = "searchText";
      SearchButton.ID = "searchButton";
      SearchButton.Text = "Search";
   public InteractiveSearchBox() {
      Width = Unit.Percentage(100);

Ah – running the code will output a table with a width of 100%, by default. The width can be changed from the Width property on the server control that is composing the controls. The table cells are then placed into one row; which the tow then added to the TableRowCollection which is accessible from the Rows property. But what is distinct about table cells is that it contains a text box (which will fill most of the area) and a search button.

One other essential thing that was added was the INamingContainer interface. This will be required when the same type of control becomes siblings to each other. For example, if I have search boxed for manufacturers and clients in the same PlaceHolder control, the names of the text boxes and the buttons will conflict (ASP.NET will throw an error). One interface, with no members, is what is required to make the control into a container namespace for its child controls - avoiding this conflict of names.

We are going to add two more functional features before we can declare this as a search box control. Those two features are:

  • I property exposing the text that was typed into the text box.

  • Add an event listener so we can fire our own event that we expose.

Lets do the rest of the code:

public event EventHandler Search;
public string SearchText {
   get { return SearchTextBox.Text; }
protected virtual void OnSearch(EventArgs e) {
   if (Search != null)
      Search(this, e);

That code was pretty standard (it was highlighted before in the article series). We will now do our own firing for our own event by listening to the button's Click event. We will have to do one modification to the constructor to hook up the other “unknown method”:

private void SearchButton_Click(object sender, EventArgs e) {
   // call our custom event
public InteractiveSearchBox() {
   // the other code over here
   SearchButton.Click += new EventHandler(SearchButton_Click);

All of this code can be accomplished with “templating” the output as well; however, complications will occur with sibling controls. For this reason, “templating” is used to give a common output – as shown on the next page.

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-06-25 10:27:27 AM  AspAlliance Recent Articles RSS Feed
About ASPAlliance | Newsgroups | Advertise | Authors | Email Lists | Feedback | Link To Us | Privacy | Search