Compartir a través de


Plantillas de controles de servidor Web

La mayor parte de los controles de servidor Web tienen un diseño y una apariencia predeterminada, que se puede manipular estableciendo propiedades o utilizando estilos. Algunos controles de servidor Web también permiten personalizar si apariencia utilizando plantillas.

Una plantilla es un conjunto de elementos y controles HTML que componen el diseño de una parte determinada de un control. Por ejemplo, en el control DataList de servidor Web se puede utilizar una combinación de elementos y controles HTML para crear el diseño de cada fila de la lista. De igual manera, el control de servidor Web DataGrid tiene una apariencia predeterminada para las filas de la cuadrícula. No obstante, se puede personalizar la apariencia de la cuadrícula definiendo distintas plantillas para filas individuales, filas alternativas, filas seleccionadas, etc.

**Nota   **Las plantillas son diferentes de los estilos. Una plantilla define el contenido de una sección de un control, por ejemplo, el contenido de una fila del control DataList. Los estilos, por otro lado, especifican la apariencia de elementos como el color, la fuente, etc. Los estilos pueden aplicarse a la totalidad del control (por ejemplo, para seleccionar la fuente del control DataGrid) así como a elementos de la plantilla.

Las plantillas se componen de controles de servidor HTML y controles de servidor incrustados. Cuando se ejecuta el control en la página de formularios Web Forms, el marco de trabajo del control procesa el contenido de la plantilla en vez del HTML predeterminado para el control.

¿Qué controles admiten plantillas?

No todos los controles de servidor Web admiten plantillas. Generalmente, las plantillas son compatibles con los controles complejos. En Visual Studio, esto incluye los controles de servidor DataGrid, DataList y Repeater. (De hecho, los controles Repeater y DataList no sólo admiten plantillas, sino que requieren la creación de plantillas para definir su resultado.) Los controles que se obtienen de otros orígenes también podrían admitir plantillas.

Cada control admite un conjunto de plantillas ligeramente distinto que especifica los diseños para partes diferentes del control, como el encabezado o el pie de página, el elemento y el elemento seleccionado. Se puede especificar una plantilla para uno o para todos ellos, dependiendo de los que desee personalizar. En el control DataGrid, se pueden especificar plantillas para columnas (en vez de filas).

En la siguiente tabla se resumen los controles de servidor Web que admiten plantillas

control Plantillas
Repeater
  • HeaderTemplate
  • FooterTemplate
  • ItemTemplate
  • AlternatingItemTemplate
  • SeparatorTemplate
DataList
  • HeaderTemplate
  • FooterTemplate
  • ItemTemplate
  • AlternatingItemTemplate
  • SeparatorTemplate
  • SelectedItemTemplate
  • EditItemTemplate
DataGrid
  • HeaderTemplate
  • FooterTemplate
  • ItemTemplate (columna)
  • EditItemTemplate (columna)
  • Pager

Crear plantillas

El Diseñador Web Forms incluye una utilidad que permite diseñar plantillas en un entorno WYSIWYG. Abra un modo de edición de plantillas especial que presente las plantillas del control en la vista Diseño. Se puede escribir HTML y arrastrar controles del Cuadro de herramientas directamente a la plantilla que está editando.

Puede crear también plantillas directamente en el archivo .aspx. Las plantillas se crean como declaraciones XML. En el siguiente ejemplo se muestra cómo se puede mostrar una lista de nombres de empleados, números de teléfono y direcciones de correo electrónico utilizando plantillas en el control DataList de servidor Web. El diseño de la información de empleados se especifica en la plantilla ItemTemplate mediante controles de enlace de datos.

<asp:datalist ID="DataList1" runat="server">
   <HeaderTemplate>
      Employee List
   </HeaderTemplate>
   <ItemTemplate>
      <asp:label id=Label1 runat="server" 
         Text='<%# DataBinder.Eval(Container, "DataItem.EmployeeName")
         %>'></asp:label>
      <asp:label id=Label2 runat="server" 
         Text='<%# DataBinder.Eval(Container, "DataItem.PhoneNumber")
         %>'></asp:label>
      <asp:Hyperlink id=Hyperlink1 runat="server" 
         Text='<%# DataBinder.Eval(Container, "DataItem.Email") %>'
         NavigateURL='<%# DataBinder.Eval(Container, "DataItem.Link") %>'>
      </asp:Hyperlink>
   </ItemTemplate>
</asp:datalist>

Vea también

Crear plantillas de controles de servidor Web | Crear plantillas de controles de servidor Web dinámicamente | Controles de servidor ASP.NET | Controles de servidor ASP.NET y estilos CSS | Enlace de datos en formularios Web Forms | Crear plantillas de controles de servidor Web dinámicamente | Crear plantillas mediante programación en el control DataGrid