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 piece 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.

Note

Data-binding syntax that is placed in a <textarea> HTML element in a template will be HTML encoded if you edit the template by 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. Add a data source control to the page and configure it. To use a SQL Server database as your data source, you can follow the instructions in How to: Connect to a SQL Server Database Using the SqlDataSource Control.

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

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

3. In the task list, select your data source control from the Choose Data Source drop-down box.

4. In the task list, select Edit Columns or Add Columns and add one or more columns of type TemplateField.

5. In the task list, click Edit Templates.

   The columns and templates available to edit are displayed in the drop-down box. You can select a column to display all of its templates at the same time or any one of the templates to display one at a time.

6. Select the column or template that you want to edit.

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

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

8. In the template that you are editing, 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 Forms Server Control Event Model.

9. Repeat steps 5 through 7 to edit additional columns or templates.

10. When you are finished, click End Template Editing in the task list.

See Also

Concepts

ASP.NET Web Server Controls Templates

ASP.NET Web Server Controls Overview

ASP.NET Web Server Controls and CSS Styles