JavaScript Editor jscript editor     Web designer 
↑


Main Page

Controls such as the DataList, GridView, FormView, and Repeater Web server 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

  1. In the .aspx file, insert an element inside the control to identify what template you are creating, as in the following example:

    Visual BasicВ CopyCode imageCopy Code
    <asp:DataList id="DataList1" runat="server">
  <ItemTemplate>
  
  </ItemTemplate>
</asp:DataList>
    C#В CopyCode imageCopy Code
    <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 in the following example:

    Visual BasicВ CopyCode imageCopy Code
    <asp:DataList id="DataList3" runat="server">
   <ItemTemplate>
    Name: <asp:Label ID="Label2" runat="server" 
    Text='<%# DataBinder.Eval(Container, "DataItem.EmployeeName")%>'/>
   </ItemTemplate>
</asp:DataList>
    C#В CopyCode imageCopy Code
    <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 HeaderTemplate, ItemTemplate, and SeparatorTemplate templates:

Visual BasicВ CopyCode imageCopy Code
<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>
C#В CopyCode imageCopy Code
<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



JavaScript Editor jscript editor     Web designer 
→