Creating a Templated User Control with ASP.Net 2.0

We all know the benefits of re-usable components in our applications and User Controls in ASP.Net are an easy way to build reusable components that can be used throughout an entire web application.

Templated User Controls allows us to seperate the controls data from it’s presentation because a Templated User Control does not provide a default user interface.

For example I will show you how to create a templated address control thats allows you to reuse address fields across your web application but leaves the formatting up to the individual page designer to style how they wish.

First we open a new web application in Visual Studio and add a new Web User Control to our solution.

We then add a PlaceHolder control to the User Control which will act as a placeholder for our controls rendered data. Our controls markup looks like this:

Next we switch to our controls code behind and implement all the properties we need for our address control plus one other property that returns a type of ITemplate. Our code behind looks like this:

Now we need to create a container class that will act as our naming container and exposes all the properties of the User Control to the host page. The container class needs to inherit from the Control class and implkements the INamingContainer interface. The class looks like this:

We need to put the following code inside out controls Init event to instantiate our container class and set its properties, instantiate a copy of the controls ITemplate inside the container control and add our container control to the PlaceHolder’’s controls collection.

Now we have a fully working Templated User Control we can put this control onto any web page within out web application and set its data. The markup below shows how this is done:

And thats it!

If you want to do the same as this but package the control up into an assembly that can be reused across multiple web applications you need to create a control that inherits from the Control or WebControl class.

12 Responses to “Creating a Templated User Control with ASP.Net 2.0”

Feed for this Entry Trackback Address

1 Skip mead August 13, 2007 at 4:49 pm

It just will not work. there is something missing
2 Lee Dale August 14, 2007 at 8:45 am

Sorry one thing I forgot to put in the post was you need to put DataBind(); in the Page_Load event.
3 Patrick August 21, 2007 at 8:01 pm

Thanks, this helped!
4 Jorge August 23, 2007 at 6:23 pm

Thanks so much for that “detail” (I mean DataBind()). It usually doesn’t appear in any place and I was getting mad because I wasn’t able to show container property values.
Would you mind to explain why is this required?
5 Lee Dale August 31, 2007 at 8:41 am

Yeah sure.

We call the DataBind() method of the page to initiate data binding on each of the Page’s controls. Without calling DataBind() explictly on the Page DataBind() will not get called on any of the Pages controls, therefore no data will get bound to the User Control.

In ASP.Net whenever you set the DataSource of a data bound control you need to explicity call either DataBind() on the Page or DataBind() on the specific control who’s data source is being set.

Hope that makes sense.
6 James September 12, 2007 at 9:35 am

Hi Thanks for this, it has been very useful.

I get a design-time error on my version of the above (in Vb.Net), which is ‘UserControl’ does not have a public property named ‘ContentTemplate’.

Although the control compiles and runs fine!

I’m just using a placeholder, so that I can put any control (or set of controls) I like in the ContentTemplate.

Any ideas would be much appreciated.
7 Joel October 9, 2007 at 4:11 pm

Thanks for this information, Lee. It was very helpful to me.
8 geHucKa November 29, 2007 at 10:31 am

I alwayse have a “does not have a public property” error message in design time when using templated user controls. Desingner can not render templated controls at all and there is no way to solve this problem. :(( Any ideas?
9 allen December 11, 2007 at 4:09 pm

Error 1 AddressControl:Type ‘System.Web.UI.UserControl’ does not have a public property named ‘AddressTemplate’. C:\Documents and Settings\cai\Desktop\WebSite1\ShopCart\usercontrol\Default3.aspx C:\…\ShopCart\

HI, Thanks for this tutorial….Uh…actually , it works fine.. but there is one problem that keeps bothering me……every time I run this code that will run correctly, but this error is always there, I checked the back of “AddressControl.ascx.vb”…it clearly defines the the property of “AddressTemplate” as Public..

OK……I have no idea ……..-_-…
10 shyam December 22, 2007 at 11:07 am

how to show a design time preview ?
11 javier April 12, 2008 at 7:07 pm

Hi, is there any way to download the source code for this example?

thanks a lot in advance
12 chamara May 2, 2008 at 5:04 pm

thank you tried it ,it works