How to: Create ASP.NET Web Control Templates Declaratively

Web server controls such as the Repeater, DataList, and GridView controls allow you to specify templates, which are HTML elements that define the layout for a particular portion of the control. For example, in the GridView control, you can define templates for items, selected items, alternating items, and so on, so that each of these elements can have a custom look.

To create a Web server control template using ASP.NET syntax

1. In the ASP.NET page, insert an element inside the control to identify what template you are creating, as shown in the following example:

   <asp:DataList id="DataList1" runat="server">
     <ItemTemplate>
   
     </ItemTemplate>
   </asp:DataList>
   

   <asp:DataList id="DataList1" runat="server">
     <ItemTemplate>
   
     </ItemTemplate>
   </asp:DataList>
   

2. Inside the template element, add HTML text and other controls as the template's content. Include property and data-binding values for the embedded controls using normal syntax, as shown in the following example:

   <asp:DataList id="DataList3" runat="server">
      <ItemTemplate>
       Name: <asp:Label ID="Label2" runat="server" 
       Text='<%# DataBinder.Eval(Container, "DataItem.EmployeeName")%>'/>
      </ItemTemplate>
   </asp:DataList>
   

   <asp:DataList id="DataList3" runat="server">
      <ItemTemplate>
       Name: <asp:Label ID="Label2" runat="server" 
       Text='<%# DataBinder.Eval(Container, "DataItem.EmployeeName")%>'/>
      </ItemTemplate>
   </asp:DataList>
   

3. Repeat Steps 1 and 2 for each template you want to create.

   The following example shows a complete declaration for a DataList Web server control with simple templates declared for the Header, Item, and Separator templates.

   <asp:datalist id="DataList2" runat="server" >
      <HeaderTemplate>
      Items matching your query: 
      </HeaderTemplate>
      <ItemTemplate>
      Name: <asp:Label id="Label1" runat="server" 
        Text='<%# DataBinder.Eval(Container, "DataItem.EmployeeName")%>'></asp:Label>
      </ItemTemplate>
      <SeparatorTemplate>
        <br /><hr />
      </SeparatorTemplate>
   </asp:datalist>
   

   <asp:datalist id="DataList2" runat="server" >
      <HeaderTemplate>
      Items matching your query: 
      </HeaderTemplate>
      <ItemTemplate>
      Name: <asp:Label id="Label1" runat="server" 
        Text='<%# DataBinder.Eval(Container, "DataItem.EmployeeName")%>'></asp:Label>
      </ItemTemplate>
      <SeparatorTemplate>
        <br /><hr />
      </SeparatorTemplate>
   </asp:datalist>
   

See Also

Concepts

ASP.NET Web Server Controls Templates

ASP.NET Web Server Controls Overview