ASP.NET Web Server Controls Templates
Most Web server controls have a default look and layout, which you can manipulate by setting properties or by using styles. Some Web server controls also allow you to customize their look by using templates.
A template is a set of HTML elements and controls that make up the layout for a particular portion of a control. For example, in the DataList Web server control you can use a combination of HTML elements and controls to create the layout for each row of the list. Similarly, the GridView Web server control has a default look for rows in the grid. However, you can customize the grid's look by defining different templates for individual columns.
Note
Templates differ from styles. A template defines the content of a section of a control—for example, the contents of a row in the DataList control. Styles specify the appearance of elements such as color, font, and so on. Styles can apply to the control as a whole (for example, to set the font for the GridView control) as well as to template items.
Templates consist of HTML and embedded server controls. When the control runs in the ASP.NET Web page, the control infrastructure renders the contents of the template in place of the default HTML for the control.
Which Controls Support Templates?
Not all Web server controls support templates. For the most part, templates are supported by complex controls. This includes the GridView, DataList, Repeater, FormView, DetailsView, Login, and other controls.
Each control supports a slightly different set of templates that specify layouts for different portions of the control, such as the header, footer, item, and selected item. You can specify a template for any or all of these, depending on which ones you want to customize. In the GridView control, you can specify templates for columns (rather than rows).
The following table summarizes the Web server controls that support templates.
Control |
Templates |
|---|---|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Creating Templates
You can create templates directly in the .aspx file. Templates are created as XML declarations. The following example shows how you can display a list of employee names, phone numbers, and e-mail addresses using templates in the DataList control. The layout of the employee information is specified in the ItemTemplate using data-bound controls.
Note
If you are using a visual designer, such as Visual Studio 2005, you can typically use a visual tool to create and edit templates. For more information, see How to: Create Web Server Control Templates Using the Designer.
<asp:datalist id="DataList1" runat="server">
<HeaderTemplate>
Employee List
</HeaderTemplate>
<ItemTemplate>
<asp:label id="Label1" runat="server"
Text='<%# DataBinder.Eval(Container, "DataItem.EmployeeName")%>'></asp:label>
<asp:label id="Label2" runat="server"
Text='<%# DataBinder.Eval(Container, "DataItem.PhoneNumber")%>'></asp:label>
<asp:Hyperlink id="Hyperlink1" runat="server"
Text='<%# DataBinder.Eval(Container, "DataItem.Email") %>'
NavigateURL='<%# DataBinder.Eval(Container, "DataItem.Link") %>'>
</asp:Hyperlink>
</ItemTemplate>
</asp:datalist>
<asp:datalist id="DataList1" runat="server">
<HeaderTemplate>
Employee List
</HeaderTemplate>
<ItemTemplate>
<asp:label id="Label1" runat="server"
Text='<%# DataBinder.Eval(Container, "DataItem.EmployeeName")%>'></asp:label>
<asp:label id="Label2" runat="server"
Text='<%# DataBinder.Eval(Container, "DataItem.PhoneNumber")%>'></asp:label>
<asp:Hyperlink id="Hyperlink1" runat="server"
Text='<%# DataBinder.Eval(Container, "DataItem.Email") %>'
NavigateURL='<%# DataBinder.Eval(Container, "DataItem.Link") %>'>
</asp:Hyperlink>
</ItemTemplate>
</asp:datalist>
Working with Templates
A templated control creates an instance of its template contents only on demand. This means that instances of the controls in the template might not be created when the page load event occurs. This behavior can affect how a control inside a template can be used; you cannot assume that a control instance inside a template has been created when the page is loaded.
Nested templates as well as nested master files are not rendered in the Design view of Visual Web Developer or Visual Studio 2005. The nesting is correctly rendered on a Web browser, however.
See Also
Concepts
ASP.NET Web Server Controls and CSS Styles