Was this page helpful?
Your feedback about this content is important. Let us know what you think.
Additional feedback?
1500 characters remaining
Creating Web Server Control Templates
Collapse the table of content
Expand the table of content

Creating Web Server Control Templates

The DataList, DataGrid, 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 DataGrid 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.

Note   For background information about templates, see Web Server Controls Templates.

Creating Templates in the Web Forms Designer

You can create templates directly from within the Web Forms Designer.

To create a template in the Web Forms Designer

  1. Right-click the control, choose Edit Template, and then choose the type of template that you want to edit.

    For example, to edit the Item, AlternatingItem, SelectedItem, and EditItem templates for the DataList Web server control, choose Item Templates.

    The Web Forms Designer displays the control in template-editing mode.

  2. Enter HTML text and drag controls into the template.
  3. Edit controls you have added to templates as you would normal controls:
    • Select them and use the Properties window to set their properties.
    • Data bind them using the DataBinding dialog box. For details, see Introduction to Data Binding in Web Forms Pages.
    • Double-click the embedded controls to create an ItemCommand event handler for the container control. Events raised by embedded controls are bubbled to the container. For more details, see ASP.NET Server Control Event Model.
  4. Repeat Steps 1 through 3 to edit other templates.
  5. To finish, right-click the control and choose End Template Editing.
  6. Set the appearance of individual templates by setting their style properties.For details, see ASP.NET Server Controls and CSS Styles.
    Tip   You can quickly set the appearance of templates by selecting a predefined style scheme. Select the control and then choose AutoFormat at the bottom of the Properties window. When you select a scheme, the Designer sets style properties for templates.

Creating Templates Using ASP.NET Syntax

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

  1. In the .aspx file, insert an element inside the control to identify what template you are creating:
    <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:
    <ItemTemplate>
       Name: <asp:Label runat="server" 
              Text="<%# Container.DataListItem.Name %>"/>
    </ItemTemplate>
    
  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="DataList1" 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></p>
Note   If the Web Forms Designer cannot render a Web server control correctly, it displays a grey box with the text "Error Creating Control." This often means that the ASP.NET syntax of the control is incorrect — for example, if the
runat="server"
attribute is missing in a Web server control element, you will see this error. Point to the information icon (c9cbwsf3.vbwebcontrolserrorinfoicon(en-us,VS.71).gif); a ToolTip is displayed with details about the error.

See Also

Web Server Controls Templates | ASP.NET Server Controls | ASP.NET Server Controls and CSS Styles | Creating Web Server Control Templates Dynamically | Creating Templates Programmatically in the DataGrid Control

Show:
© 2015 Microsoft