Learning Resources
Â
Understanding Templated Controls
Web server controls can be customized by setting properties or by using CSS styles. Some allow you to customize their look through ASP.NET templates. An ASP.NET template is a mix of HTML elements and ASP.NET controls that make up the layout for a particular area of the control. Templates are not the same as styles. Styles primarily refer to CSS stylesheets and affect graphical properties such as colors, font, border style, cell spacing, and so forth. With styles, the control's layout remains unchanged in its structure but can be modified in its appearance.
In contrast, templates involve deeper changes that modify some portions of a control's user interface. For example, the Repeater control allows you to use a combination of HTML elements and ASP.NET controls to define the layout for each row in the bound data source. Likewise, the DataGrid control lets you format the cells of an entire column of data by using any valid combination of ASP.NET controls. In addition, the DataGrid control supports customization of rows by applying different templates to individual rows, alternating rows, selected rows, and so on.
The overall pattern behind ASP.NET templates is not very different from that in the visual styles of Windows® XP or even Windows common controls. The key point to understand is that certain parts of a given user interface element can be customized. You have client and non-client parts in Win32® common controls, control-specific parts in Windows XP styles, and control-specific templates in certain ASP.NET server controls. In Win32, messages are used to let programmers get involved with the painting process. In Windows XP, the theme manager calls the piece of code registered to paint part of a given control. In ASP.NET, control classes that inherit the ITemplate interface can dynamically build pagelets and insert code into the main page as raw HTML.
Styles and templates are not mutually exclusive. You can use styles and templates together, or use them separately to control the appearance of the elements defined within your templates. When the templated control (say a DataGrid) is processed, templates are instantiated in the containing page and rendered in HTML.
What is a Template, Anyway? The Microsoft® .NET Framework utilizes the ITemplate interface at runtime to process the templates into a control hierarchy that can be databound and rendered to populate a part of an ASP.NET control. As long as you define templates in a declarative manner—using inline tags in ASPX pages—you don't strictly need to know about the ITemplate interface. That will become important only when you move one step further and start investigating how to create and assign templates programmatically and dynamically. But before we look at that, let's review the use of templates with a DataGrid control. Â
Generally speaking, a template is the description of how a certain element will be rendered at runtime. In ASP.NET, a template is property of a server control that describes the static HTML, controls, and script to render within one region of the control. For example, a Repeater control has a HeaderTemplate property that defines the contents of its header region. You normally define a template within the body of an ASP.NET page using declarative syntax. For example, the following code shows how to specify a template to draw the header and each row of a Repeater control.
Â
   Employees
  Â
Â
Â
   ...
Â
When it comes to rendering the contents of the Repeater control, the ASP.NET runtime uses the content defined in the templates and processes it—often together with bound data—to create an HTML representation of the region. All the server-side controls within the template individually render themselves as HTML.