Compartir a través de


Plantillas de controles de servidor Web ASP.NET

Actualización: noviembre 2007

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 GridView tiene una apariencia predeterminada para las filas de la cuadrícula. Sin embargo, puede personalizar la apariencia de la cuadrícula definiendo plantillas diferentes para cada una de las columnas.

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 especifican el aspecto de elementos como color, fuente, etc. Los estilos pueden aplicarse a la totalidad del control (por ejemplo, para seleccionar la fuente del control GridView) 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 Web ASP.NET, el marco de trabajo del control representa 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. Entre ellos están GridView, DataListy Repeater, FormView, DetailsView, Login y otros.

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 GridView, 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

ChangePassword

  • ChangePasswordTemplate

  • SuccessTemplate

DataList

  • HeaderTemplate

  • FooterTemplate

  • ItemTemplate

  • AlternatingItemTemplate

  • SeparatorTemplate

  • SelectedItemTemplate

  • EditItemTemplate

DetailsView

  • HeaderTemplate

  • FooterTemplate

  • PagerTemplate

  • EmptyDataTemplate

FormView

  • ItemTemplate

  • EditItemTemplate

  • InsertItemTemplate

  • HeaderTemplate

  • FooterTemplate

  • PagerTemplate

  • EmptyDataTemplate

GridView

  • PagerTemplate

  • EmptyDataTemplate

Menu

  • DynamicTemplate

  • StaticTemplate

Repeater

  • HeaderTemplate

  • FooterTemplate

  • ItemTemplate

  • AlternatingItemTemplate

  • SeparatorTemplate

SiteMapPath

  • CurrentNodeTemplate

  • RootNodeTemplate

  • NodeTemplate

  • PathSeparatorTemplate

Wizard

  • FinishNavigationTemplate

  • HeaderTemplate

  • StartNavigationTemplate

  • StepNavigationTemplate

  • SideBarTemplate

Crear plantillas

Puede crear las 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. El diseño de la información de empleados se especifica en la plantilla ItemTemplate mediante controles de enlace de datos.

Nota:

Si está utilizando un diseñador visual, como Visual Studio 2005, normalmente puede utilizar una herramienta visual para crear y editar las plantillas. Para obtener más información, vea Cómo: Crear plantillas de controles de servidor Web mediante el Diseñador.

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

Vea también

Conceptos

Controles de servidor Web ASP.NET y estilos de CSS

Otros recursos

Controles de servidor Web ASP.NET

Obtener acceso a datos con ASP.NET