Cómo programar un Control Repeater

“Repeater” es un control de servidor de ASP.NET que se emplea para mostrar datos al usuario en formato tabla. En mi actual trabajo uso mucho este control, por lo que llevaba tiempo queriendo escribir un artículo sobre este tema. Y aquí está.

Una de sus funcionalidades más usadas es la de mostrarlos en filas alternas con un estilo diferente para cada una de las mismas, como aparece en el ejemplo.

El Repeater que yo he llevado a cabo muestra datos procedentes de un Dataset desde código de servidor y está incluido dentro de una tabla HTML. Tiene, en principio, como particularidad, que tiene que traducir las cabeceras en función del idioma del usuario.

Muestro su código html completo:

Construcción de las cabeceras

 Aunque no tiene mucho que ver con la construcción del Repeater en sí mismo, creo que es un buen ejemplo de llamada a una función de servidor desde código HTML.

En el código cs tengo definidas como valores constantes los literales que en el fichero de recursos responden a uno u otro idioma y que por lo tanto se traducen.

 Encontramos estos literales en los ficheros de recursos de idiomas de la aplicación:

 

 

Hago notar también la correspondencia de las constantes definidas en el código de servidor y las cabeceras de la tabla HTML.

Sin meterme ahora en el funcionamiento del objeto resource manager, que llevará a cabo las funciones de traducción,  diré simplemente que he instanciado uno de carácter global (rm) y que defino sus parámetros en el siguiente método, al que se llama al cargar la página.

Pero creo que lo más interesante es la llamada a una función de servidor desde la tabla HTML, que nos retorna la traducción del literal.

 

Construcción del Repeater (ItemTemplate)

Sin más digresiones, entramos en la construcción específica del repeater.

Lo llamamos “rpImpagoHist”. Dentro de este control repeater, metemos un ItemTemplate donde incluimos las filas de la tabla con sus correspondientes etiquetas html que “pintarán” los datos mediante su propiedad “Text”.

 Mediante la función “Eval” hacemos referencia a las columnas del dataSet con el que lo poblaremos. Como en el caso de las cabeceras, los literales de las columnas del dataSet se corresponden con constantes definidas en código de servidor.

 

Y por último, poblaremos nuestro repeater mediante el método “PopulateRepeater” al que llamaremos desde el “PageLoad”.

Como podemos observar,  nuestro dataSet se llama dsPage y lo rellenamos mediante una función de una clase de acceso a datos (“dsGetProcDetail”).

Como ya he indicado anteriormente, todas las funciones de la página se implementan en el “PageLoad()”. Por lo tanto, al llamar a la página y ejecutarla, el resultado será:

 

 AlternatingItemTemplate

Por último, si queremos que las filas aparezcan con estilos alternos, sólo tendremos que añadir una AlternatingItemTemplate. Su contenido lo copiaremos del ItemTemplate cambiando el nombre de las etiquetas añadiendo, como en este caso, un 2. Asimismo, a diferencia del ItemTemplate, no pondremos ningún estilo css en los <td>, para que el color de las filas alternas aparezca en blanco.

 

Código del Repeater completo:

 

En este caso, tendremos este resultado: