Control Repeater


El control Repeater permite, como su propio nombre indica, repetir una plantilla compuesta por diversos controles un número de veces determinado, de acuerdo a una estructura de datos que pueda proveer los datos necesarios para poder rellenar esos controles. A continuación veremos un ejemplo en ASP.NET y VB.NET

Creación del control

Lo primero que debemos hacer es acceder al cuadro de herramientas y seleccionar el Repeater dentro de los controles de datos.

Control Repeater

Control Repeater

Una vez hayamos creado el control en nuestro aspx, deberemos introducir dentro del mismo aquellos controles que queramos repetir. Nuestro Repeater tendrá, en principio, el siguiente aspecto:

<asp :Repeater ID="Repeater1" runat="server">
</asp>

En el interior del mismo podremos introducir lo que queramos: controles HTML, tablas, controles ASPX… teniendo en cuenta que todo lo que introduzcamos se repetirá un número de veces igual al número de elementos del DataSource que le asignemos al Repeater.

Es aconsejable crear la sección a repetir antes de añadirla al Repeater. Si por ejemplo queremos insertar una tabla con un GridView y un Label, cuyo código sería el siguiente:

<table cellpadding="2" cellspacing="1" bgcolor="#f6f7f9">
  <tr>
    <td>
      <asp :GridView ID="DatosGridView" runat="server" AutoGenerateColumns="False"
              BackColor="White" BorderColor="#F6F7F9" BorderStyle="Solid"
              BorderWidth="1px" CellPadding="1"
              DataKeyNames="Id">
        <columns>
          <asp :BoundField DataField="Id" HeaderText="Id" SortExpression="Id" />
          <asp :BoundField DataField="Descripcion" HeaderText=" Descripcion " SortExpression=" Descripcion" />
        </columns>
      </asp>
      <asp :Label ID="NoResultadosLabel" runat="server" Text="Label"></asp>
    </td>
  </tr>
</table>

Lo que obtendríamos en nuestra página sería lo siguiente:

Ejemplo de Repeater

Ejemplo de Repeater

Una vez creado el componente a repetir, cortamos su código asociado y lo introducimos dentro del Repeater, del siguiente modo:

<asp :Repeater ID="Repeater1" runat="server">
  <itemtemplate>
    <table cellpadding="2" cellspacing="1" bgcolor="#f6f7f9">
      <tr>
        <td>
          <asp :GridView ID="DatosGridView" runat="server" AutoGenerateColumns="False"
                  BackColor="White" BorderColor="#F6F7F9" BorderStyle="Solid"
                  BorderWidth="1px" CellPadding="1"
                  DataKeyNames="Id">
            <columns>
              <asp :BoundField DataField="Id" HeaderText="Id" SortExpression="Id" />
              <asp :BoundField DataField="Descripcion" HeaderText="Descripcion" SortExpression=" Descripcion" />
            </columns>
</asp>
          <asp :Label ID="EtiquetaLabel" runat="server" Text="Label"></asp>
        </td>
      </tr>
    </table>
  </itemtemplate>
</asp>

Ya tenemos una tabla con un GridView y un Label dentro del Repeater. Ahora sólo tendremos que asociarle datos para que funcione.


Enlazado de datos

El Repeater tiene un evento llamado ItemDataBound, el cual se lanza al llamar al método DataBind() del Repeater, del siguiente modo:

Dim lista As New ArrayList
lista.Add(1)
lista.Add(2)
lista.Add(3)
lista.Add(4)

Repeater1.DataSource = lista
Repeater1.DataBind()

La llamada al DataBind() lanzará un evento ItemDataBound por cada uno de los elementos de su DataSource. El DataSource puede ser un ArrayList, un DataTable, un DataSet, etc. En nuestro caso, el evento se lanzará cuatro veces, uno por cada valor del ArrayList.

Además, el contenido del elemento del DataSource será accesible desde el evento ItemDataBound a través de la propiedad e.Item.

Protected Sub RepeaterRecibo_ItemDataBound(ByVal sender As Object, _
             ByVal e As System.Web.UI.WebControls.RepeaterItemEventArgs) _
             Handles RepeaterRecibo.ItemDataBound

Dentro de este evento será donde realizaremos la asignación de los datos del interior del Repeater, es decir, la asignación de la propiedad Text del Label y el DataBind del GridView. Todo ello dependerá (si así lo deseamos, y es donde radica la potencia de este control) del elemento que en ese momento estemos manejando.

Si quisiéramos hacer dicho enlace, utilizaríamos el método FindControl() para instanciar el objeto en función de la iteración:


Dim EtiquetaLabel As Label
Dim DatosGridView As GridView
Dim dt As DataTable
Dim id As Integer

Select Case e.Item.ItemType
  Case ListItemType.Item, ListItemType.AlternatingItem
    id = CInt(CType(Repeater1.DataSource, ArrayList).Item(e.Item.ItemIndex))

    ' Se rellena el DataTable que obtenemos a partir del elemento del ArrayList
    dt = ConsultarPorId(id)

    ' Se realiza el enlace de los datos, tanto del GridView como del Label.
    EtiquetaLabel = CType(e.Item.FindControl("EtiquetaLabel"), Label)

    DatosGridView = CType(e.Item.FindControl("DatosGridView"), GridView)
    EtiquetaLabel.Text = dt.Rows(0).Item("Nombre").ToString
    DatosGridView.DataSource = dt
    DatosGridView.DataBind()

  End Select

Esto hará que se cargue un GridView y un Label para cada ID (en este caso se trata de IDs, podemos almacenar cualquier tipo de dato en el DataSource), repitiendo el código DataSource.Item.Count veces.

Anuncios

One comment

  1. Esto esta fenomenal. Pero me he encontrado con un problema.
    El DataGrid que tengo dentro del repeater tiene un gran numero de elementos, por lo que me es necesario paginarlo
    Sin embargo no consigo capturar el evento.

    Como podria hacerlo??

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s