Información general sobre Repeater (Control de servidor Web)

  • Artículo

Actualización: noviembre 2007

El control de servidor web Repeater es un control contenedor enlazado a datos que genera una lista de elementos individuales. El diseño de los elementos individuales de una página web se define mediante plantillas. Cuando se ejecuta la página, el control repite el diseño para cada uno de los elementos del origen de datos.

Este tema contiene:

  • Información general

  • Ejemplos de código

  • Referencia de clase

Información general

El control de servidor web Repeater es un control contenedor que permite crear listas personalizadas a partir de cualquier dato disponible de la página. El control Repeater no incorpora una representación propia, lo que significa que deberá proporcionar el diseño de este control mediante la creación de plantillas. Cuando se ejecuta la página, el control Repeater recorre cada uno de los registros del origen de datos y representa un elemento para cada registro.

Dado que el control Repeater no dispone de una apariencia predeterminada, puede utilizarlo para crear varios tipos de listas; entre éstas, se encuentran las siguientes:

  • Diseño de tabla

  • Lista delimitada por comas (por ejemplo, a, b, c, d, y así sucesivamente)

  • Lista con formato XML

Utilizar plantillas con el control Repeater

Para poder utilizar el control Repeater, deberá crear plantillas que definan el diseño del contenido del control. Dichas plantillas pueden incluir cualquier combinación de formato y controles. Si no se define ninguna plantilla o ninguna de las plantillas contiene elementos, el control no aparecerá en la página cuando se ejecute la aplicación.

En la tabla siguiente se describen las plantillas admitidas por el control Repeater.

Propiedad de plantilla

Descripción

ItemTemplate

Contiene elementos HTML y controles que se representan una vez por cada elemento del origen de datos.

AlternatingItemTemplate

Contiene elementos HTML y controles que se representan una vez por cada dos elementos del origen de datos. Generalmente, esta plantilla se utiliza para crear una apariencia diferente para elementos alternos, como un color de fondo distinto del especificado en la propiedad ItemTemplate.

HeaderTemplate y FooterTemplate

Contiene el texto y los controles que se representan al inicio y al final de la lista, respectivamente.

SeparatorTemplate

Contiene los elementos que se representan entre dos elementos. Un ejemplo típico puede ser una línea (si se utiliza un elemento hr).

Para obtener más información, vea Plantillas de controles de servidor Web ASP.NET.

Enlazar datos al control Repeater

El control Repeater se debe enlazar a un origen de datos. El origen de datos más común es un control de origen de datos, como SqlDataSource u ObjectDataSource. Opcionalmente, puede enlazar un control Repeater a cualquier clase que implemente la interfaz IEnumerable, que incluye los conjuntos de datos de ADO.NET (clase DataSet), los lectores de datos (clases SqlDataReader u OleDbDataReader) o la mayoría de las colecciones.

Cuando se enlazan datos, se debe especificar un origen de datos para el control Repeater de forma general. Cuando se agregan controles al control Repeater, por ejemplo, cuando se agregan los controles Label o TextBox en una plantilla, se debe utilizar la sintaxis de enlace de datos para enlazar el control individual a un campo de los elementos devueltos por el origen de datos. En el ejemplo siguiente se muestra una propiedad ItemTemplate que contiene un control Label enlazado a datos.

<%@ Page Language="VB" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" >
  <title>ASP.NET Repeater Example</title>
</head>
<body>
  <form id="form1" >
    <div>
      <asp:Repeater ID="Repeater1"  DataSourceID="SqlDataSource1">
        <HeaderTemplate>
          <table>
            <tr>
              <th>
                Name</th>
              <th>
                Description</th>
            </tr>
        </HeaderTemplate>
        <ItemTemplate>
          <tr>
            <td style="background-color:#CCFFCC">
              <asp:Label  ID="Label1" Text='<%# Eval("CategoryName") %>' />
            </td>
            <td style="background-color:#CCFFCC">
              <asp:Label  ID="Label2" Text='<%# Eval("Description") %>' />
            </td>
          </tr>
        </ItemTemplate>
        <AlternatingItemTemplate>
          <tr>
            <td>
              <asp:Label  ID="Label3" Text='<%# Eval("CategoryName") %>' />
            </td>
            <td>
              <asp:Label  ID="Label4" Text='<%# Eval("Description") %>' />
            </td>
          </tr>
        </AlternatingItemTemplate>
        <FooterTemplate>
          </table>
        </FooterTemplate>
      </asp:Repeater>
      <asp:SqlDataSource ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
        ID="SqlDataSource1"  SelectCommand="SELECT [CategoryID], [CategoryName], 
            [Description] FROM [Categories]"></asp:SqlDataSource>
    </div>
  </form>
</body>
</html>

<%@ Page Language="C#" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" >
  <title>ASP.NET Repeater Example</title>
</head>
<body>
  <form id="form1" >
    <div>
      <asp:Repeater ID="Repeater1"  DataSourceID="SqlDataSource1">
        <HeaderTemplate>
          <table>
            <tr>
              <th>
                Name</th>
              <th>
                Description</th>
            </tr>
        </HeaderTemplate>
        <ItemTemplate>
          <tr>
            <td style="background-color:#CCFFCC">
              <asp:Label  ID="Label1" Text='<%# Eval("CategoryName") %>' />
            </td>
            <td style="background-color:#CCFFCC">
              <asp:Label  ID="Label2" Text='<%# Eval("Description") %>' />
            </td>
          </tr>
        </ItemTemplate>
        <AlternatingItemTemplate>
          <tr>
            <td>
              <asp:Label  ID="Label3" Text='<%# Eval("CategoryName") %>' />
            </td>
            <td>
              <asp:Label  ID="Label4" Text='<%# Eval("Description") %>' />
            </td>
          </tr>
        </AlternatingItemTemplate>
        <FooterTemplate>
          </table>
        </FooterTemplate>
      </asp:Repeater>
      <asp:SqlDataSource ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
        ID="SqlDataSource1"  SelectCommand="SELECT [CategoryID], [CategoryName], 
              [Description] FROM [Categories]"></asp:SqlDataSource>
    </div>
  </form>
</body>
</html>
Nota:

No se pueden enlazar controles en las plantillas de encabezado, pie de página y separador con la función de enlace de datos Eval. Si dispone de controles en estas plantillas, puede definir sus propiedades de forma estática.

Para obtener información general sobre el enlace de datos en los controles de servidor Web, vea Tutorial: Acceso a datos básico en páginas Web y Cómo: Agregar controles Repeater de servidor web a una página de formularios Web Forms.

Eventos admitidos por el control Repeater

El control Repeater admite el uso de varios eventos. Uno de ellos, el evento ItemCreated, ofrece una manera de personalizar el proceso de creación de elementos en tiempo de ejecución. El evento ItemDataBound también permite personalizar el control Repeater, pero una vez que los datos están disponibles para su inspección. Por ejemplo, si estaba utilizando el control Repeater para mostrar una lista de tareas, podría mostrar los elementos atrasados en rojo, los elementos finalizados en negro y las demás tareas en verde. Puede utilizar cualquier evento para reemplazar el formato de la definición de plantilla.

El evento ItemCommand se produce en respuesta a los clics que se hagan con el botón en elementos individuales. Este evento está diseñado para permitirle incrustar un control de servidor Web Button, LinkButton o ImageButton en una plantilla de elemento y, a continuación, obtener una notificación cuando se haga clic en el botón. Cuando un usuario hace clic en el botón, el evento se envía al contenedor del botón (el control Repeater). El uso más común del evento ItemCommand es la programación de las operaciones de actualización y eliminación para el control Repeater. Dado que cada clic en el botón produce el mismo evento ItemCommand, es posible determinar el botón en el que se ha hecho clic estableciendo la propiedad CommandName de cada botón en un valor de cadena único. La propiedad CommandSource del parámetro RepeaterCommandEventArgs incluye la propiedad CommandName del botón en el que se ha hecho clic.

Para obtener más información, vea Cómo: Responder a los eventos de botón en elementos DataList o Repeater.

Volver al principio

Ejemplos de código

Cómo: Agregar controles Repeater de servidor web a una página de formularios Web Forms

Volver al principio

Referencia de clase

En la tabla siguiente se enumeran las clases clave que se relacionan con el control Repeater.

Miembro

Descripción

Repeater

Clase principal del control.

Volver al principio

Vea también

Referencia

Información general sobre DataList (Control de servidor Web)