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
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
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.
Creada la tabla, crearemos una página que, a partir de la ruta de la imagen, la inserte en base de datos. Podemos utilizar un Input File o un control similar para indicarle la ruta, pero aquí indicaremos únicamente el código necesario para subir la imagen dada su ruta física. Lo que haremos a continuación será lo siguiente:
Más adelante aprenderemos cómo recuperarla y referenciarla directamente a través de una URL con extensión aspx, es decir, invocar una ruta de tipo getImage.aspx?Id=xxx.
Let's code something up! 