This documentation is archived and is not being maintained.

How to: Create Web Server Control Templates Using the Designer

The GridView, DetailsView, FormView, DataList, and Repeater Web server controls enable you to specify templates, and to define the markup and server controls that define a 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.

This topic describes how you can use the designer to create templates. You can create templates directly in Visual Web Developer. For information about template creation using ASP.NET syntax, see How to: Create ASP.NET Web Control Templates Declaratively. For background information about templates, see ASP.NET Web Server Controls Templates.


Data-binding syntax that is placed in a <textarea> HTML element in a template will be HTML encoded if you edit the template using the designer. For example, if you edited the template using the designer, <textarea id="TextArea1"><%# Eval("Description") %><textarea> would automatically be changed to <textarea id="TextArea1">&lt;%# Eval("Description") %&gt;<textarea>. As an alternative, you can render a <textarea> HTML element by binding a TextBox control to your data field and then specifying that the TextMode property of the TextBox control is MultiLine.

To create a template in Visual Web Developer

  1. In Design view, drag a GridView control to the design surface.

    The GridView control task list is displayed next to the new GridView control.

  2. In the task list, click Edit Template, and then select the template that you want to edit.

    Visual Web Developer displays the control in template-editing mode.

  3. In the template, add the HTML text and server controls that you want.

  4. In the template, use one of the following three methods to edit the controls you have added, just as you would edit other Web server controls:

    • Select the control, and then use the Properties window to set its properties.

    • Bind data to the property by using the DataBinding dialog box. For details, see Using Data Binding with ASP.NET Mobile Controls.

    • Double-click an embedded control to create an ItemCommand event handler for the container control. Events raised by embedded controls are sent to the container. For details, see ASP.NET Web Server Control Event Model.

  5. Repeat steps 1 through 3 to edit other templates.

  6. To finish, click End Template Editing in the task list.

  7. Set the appearance of individual templates by setting their style properties. For details, see ASP.NET Web Server Controls and CSS Styles.

See Also