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

  • Artículo

Actualización: noviembre 2007

El control de servidor Web Repeater es un 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 elemento del origen de datos. Debe finalizar varios pasos para agregar un control de servidor Web Repeater a una página de formularios Web Forms. El procedimiento siguiente describe el proceso mínimo que deberá realizar para crear un control Repeater que funcione.

Para agregar un control Repeater de servidor Web a una página de formularios Web Forms

  1. En la vista Diseño, de la ficha Datos del Cuadro de herramientas, arrastre un control de origen de datos a la página, como los controles SqlDataSource o ObjectDataSource.

  2. Utilice el Asistente para la configuración del origen de datos a fin de definir la conexión y la consulta, o un método de recuperación de datos, del control de origen de datos. Este asistente está disponible para todos los orígenes de datos excepto para el control SiteMapDataSource que sólo necesita la presencia de un mapa de sitio para rellenar el control. Para abrir el Asistente para la configuración del origen de datos, siga estos pasos:

    1. Haga clic con el botón secundario del mouse (ratón) en el control de datos y, a continuación, haga clic en Mostrar etiqueta inteligente.

    2. En la ventana de tareas de origen de datos, haga clic en Configurar origen de datos.

  3. En la ficha Datos del Cuadro de herramientas, arrastre un control Repeater a la página.

  4. Haga clic con el botón secundario del mouse en el control Repeater y, a continuación, haga clic en Mostrar etiqueta inteligente.

  5. En la lista Elegir origen de datos, haga clic en el nombre del control del origen de datos que creó en los pasos 1 y 2.

    De esta forma, se establece la propiedad DataSourceID del control. Si la consulta incluye una clave principal, también se establece la propiedad DataKeyField de los controles.

  6. Haga clic en Código fuente para cambiar a la vista Código fuente.

    Para definir las plantillas, debe estar en esta vista.

  7. Agregue un elemento <ItemTemplate> a la página como elemento secundario del control Repeater. Para obtener información sobre la sintaxis, vea Sintaxis declarativa del control de servidor Web Repeater.

    Nota:

    Para representar en tiempo de ejecución, el control Repeater debe contener ItemTemplate que, a su vez, contiene expresiones de enlace de datos con el formato <%# Eval("nombre de campo") %>, donde nombre de campo es el nombre de un campo de la base de datos. Para obtener información adicional sobre cómo utilizar las plantillas, vea Plantillas de controles de servidor Web ASP.NET.

  8. Agregue HTML y el resto de los controles Web o de servidor HTML a ItemTemplate.

  9. Opcionalmente, defina las plantillas siguientes: AlternatingItemTemplateSeparatorTemplate, HeaderTemplate, FooterTemplate.

    En el ejemplo de código siguiente se muestra el uso de un control Repeater para mostrar los datos en una tabla HTML. El elemento table empieza en HeaderTemplate y termina en FooterTemplate. En el texto principal del control Repeater, se usan las celdas de la tabla para mostrar las columnas desde el origen de datos. El elemento AlternatingItemTemplate es idéntico al elemento ItemTemplate salvo que el color de fondo de las celdas de la tabla es distinto.

    <%@ 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>

Vea también

Referencia

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