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.

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.

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.

<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

Other Resources

ASP.NET Data Access Content Map