Web Control Templates Explained

In my travels I’ve had a chance to spread the good word of Web control development to many around the country; and I’ve also had a chance to meet many programmers who have been writing controls for a while. While it’s awesome to get a chance to talk code with people who enjoy the same areas of .NET that I do, I notice that there is plenty in the Web control arena that they are not familiar with. Control templates are probably the quintessential example of this. I urge you to read this article and learn about what is probably the most important feature of custom Web control development that contributes to writing extensible controls.

This article assumes a basic knowledge of custom Web control development as explained in “Custom Web Controls Demystified” published in CoDe Magazine Sept/Oct 2005 and Nov/Dec 2005. In the interest of space I will not repeat the basics of Web control development such as how properties work or how to add styling. I strongly encourage that you check out the previous issues and read the Web control tutorial articles I wrote.

When I set out to train myself in .NET technologies (back in Beta 1), I was amazed at not only what the framework can do for you but also at how it enables you to extend the framework. I’ve always been a fan of building points of extensibility into my applications and with the .NET Framework, Microsoft has proven that they are as well. Building points of extensibility where other developers can inject their own components is now a common approach to application architecture with several patterns such as providers and plug-ins. So in continuing my series of articles on custom Web control development, I want to introduce you to a technology that allows you to inject points of extensibility into your Web controls called control templates. Along the way, I hope to shed some light on how some of the Microsoft ASP.NET controls perform some of their magic.

Though I will speak in the context of ASP.NET 2.0, everything I will talk about applies to ASP.NET 1.1, with the exception of template editing toward the end. That’s a great new facility introduced in 2.0.

Visual Extensibility

When Microsoft architected ASP.NET around the concept of controls (yes, Microsoft embedded them into the architecture), they gave some of us endless possibilities in introducing some pretty extreme encapsulation and reusability into our Web applications. I say “some of us” because not everyone has embraced writing their own custom Web controls yet (I still have more work to do on that front). However, many developers with experience developing custom controls don’t seem to use templates in any of them.

Web control templates allow you, the control developer, to inserts points of visual extensibility into your custom controls. A Web page developer can use these area place holders to add more child controls to their composite controls. For example, consider the ASP.NET DataGrid (1.1) and GridView (2.0). The GridView allows you to create bound columns and template columns. Bound columns allow you to directly map to a field from a data source. A template column allows you to add other Web controls to that grid’s column, thus fully customizing its rendered appearance (and functionality).

If you drag a new GridView onto a Web Form and set up a couple of bound columns along with a template column, you will have the ability to enter “template editing” (more about that later) and drag other Web controls into this column. Now every rendered row in the grid will contain an instance of those Web controls in that particular column. You’ve seen this in use in many situations by way of additional links, buttons, and even checkboxes and textboxes being displayed in grid rows on a Web page. In fact, if you’ve played with template columns in the Web grids a little, you’re probably aware that each template column gives you several templates to work with, each displaying its contents in a different place relative to that column. I am referring to the ItemTemplate, EditItemTemplate, HeaderTemplate, and FooterTemplate. Microsoft defined these in the template column, thus letting you decide what extra controls you want to display on a standard grid row, on a row that is in “edit” mode, in the columns heading area, and the columns footer area.

The GridView shows how you can use control templates in a repeating fashion, but they don’t have to be as complex as that. In fact, I will show you examples of simple templates that you can insert into any custom control and at any place. This will prove that my original definition of control templates is true-describing them as areas of your control reserved for visual extensibility.

So now I’ll show you how to add template functionality to a custom Web control. I’ll refer you once again to my previous articles. In Part 2 I built a composite control called EmailContact and that is the control to which I will add template functionality. This the first step in my six-step plan to embed template functionality into custom Web controls. The steps are:

1. Identify the control you want to enhance.
2. Create a template container.
3. Create template member variables and properties.
4. Add template containers to the control hierarchy.
5. Handle event-bubbling.
6. Apply design-time functionality.

These steps will account for the remaining agenda in this article.

By: Miguel Castro

Miguel is an architect with IDesign who specializes in architecture consulting and building .NET solutions. He is a Microsoft MVP and INETA speaker and has been a software developer for over 22 years. With a Microsoft background that goes all the way back to VB 1.0 (and QuickBasic in fact), Miguel jumped on .NET as soon as the first public Beta was released and has provided .NET solutions for clients around the country in a variety of industries. He considers himself to be a .NET Developer and Architect and has equal love for both VB and C#, and no tolerance for language bigotry. He’s spoken at numerous user groups around the country as well as developer conferences.

He’s the author of the CodeBreeze code-generator, which among things can be found on his Web site:

www.steelbluesolutions.com

Miguel currently lives in Lincoln Park, NJ with his wife Elena and his daughter Victoria.

subscriptions@infotekcg.com