Mostrar varios registros por fila con el control DataList (C#)

por Scott Mitchell

Descargar PDF

En este breve tutorial, exploraremos cómo personalizar el diseño de DataList a través de sus propiedades RepeatColumns y RepeatDirection.

Introducción

Los ejemplos de DataList que hemos visto en los últimos dos tutoriales han representado cada registro de su origen de datos como una fila en un HTML de una sola columna <table>. Aunque este es el comportamiento predeterminado de DataList, es muy fácil personalizar la presentación de DataList de forma que los elementos del origen de datos se reparten entre una tabla de varias columnas y varias filas. Además, es posible que todos los elementos del origen de datos se muestren en DataList de una sola fila y de varias columnas.

Podemos personalizar el diseño de DataList a través de sus propiedades RepeatColumns y RepeatDirection, que respectivamente, indican cuántas columnas se representan y si esos elementos se diseñan vertical o horizontalmente. En la figura 1, por ejemplo, se muestra un DataList que muestra información del producto en una tabla con tres columnas.

The DataList Shows Three Products per Row

Figura 1: DataList muestra tres productos por fila (Haga clic para ver la imagen de tamaño completo)

Al mostrar varios elementos de origen de datos por fila, DataList puede utilizar más eficazmente el espacio de pantalla horizontal. En este breve tutorial exploraremos estas dos propiedades DataList.

Paso 1: Mostrar información del producto en un DataList

Antes de examinar las propiedades RepeatColumns y RepeatDirection, vamos a crear primero un DataList en nuestra página que enumera la información del producto mediante el diseño estándar de tabla de una sola columna y varias filas. En este ejemplo, vamos a mostrar el nombre, la categoría y el precio del producto mediante el marcado siguiente:

<h4>Product Name</h4>
Available in the Category Name store for Price

Hemos visto cómo enlazar datos a DataList en ejemplos anteriores, por lo que pasaré por estos pasos rápidamente. Para empezar, abra la página RepeatColumnAndDirection.aspx en la carpeta DataListRepeaterBasics y arrastre un DataList desde el cuadro de herramientas al Diseñador. En la etiqueta inteligente DataList, opte por crear un objeto ObjectDataSource y configurarlo para extraer sus datos del método ProductsBLL de la clase GetProducts, eligiendo la opción (Ninguno) de las pestañas INSERT, UPDATE y DELETE del asistente.

Después de crear y enlazar el nuevo ObjectDataSource a DataList, Visual Studio creará automáticamente un ItemTemplate que mostrará el nombre y el valor de cada uno de los campos de datos del producto. Ajuste ItemTemplate directamente a través del marcado declarativo o de la opción Editar plantillas de la etiqueta inteligente DataList para que use el marcado mostrado anteriormente, reemplazando el Nombre del producto, Nombre de categoría, y texto Precio con controles Etiqueta que usan la sintaxis de enlace de datos adecuada para asignar valores a sus Text Propiedades. Después de actualizar ItemTemplate, el marcado declarativo de su página debería tener un aspecto similar al siguiente:

<asp:DataList ID="DataList1" runat="server" DataKeyField="ProductID"
    DataSourceID="ObjectDataSource1" EnableViewState="False">
    <ItemTemplate>
        <h4>
            <asp:Label runat="server" ID="ProductNameLabel"
                Text='<%# Eval("ProductName") %>'></asp:Label>
        </h4>
        Available in the
            <asp:Label runat="server" ID="CategoryNameLabel"
                Text='<%# Eval("CategoryName") %>' />
        store for
            <asp:Label runat="server" ID="UnitPriceLabel"
                Text='<%# Eval("UnitPrice", "{0:C}") %>' />
    </ItemTemplate>
</asp:DataList>
<asp:ObjectDataSource ID="ObjectDataSource1" runat="server"
    OldValuesParameterFormatString="original_{0}"
    SelectMethod="GetProducts" TypeName="ProductsBLL">
</asp:ObjectDataSource>

Observe que he incluido un especificador de formato en la sintaxis Eval databinding para UnitPrice, formateando el valor devuelto como moneda: Eval("UnitPrice", "{0:C}").

Dedique un momento a visitar la página en un explorador. Como se muestra en la figura 2, DataList se representa como una tabla de productos de una sola columna y de varias filas.

By Default, the DataList Renders as a Single-Column, Multi-Row Table

Figura 2: De manera predeterminada, la DataList representa como una tabla de una sola columna y varias filas (Haga clic para ver la imagen de tamaño completo)

Paso 2: Cambiar la dirección de diseño de DataList

Aunque el comportamiento predeterminado de DataList es diseñar sus elementos verticalmente en una tabla de varias filas de una sola columna, este comportamiento se puede cambiar fácilmente a través de la propiedad RepeatDirection DataList. La propiedad RepeatDirection puede aceptar uno de los dos valores posibles: Horizontal o Vertical (el valor predeterminado).

Al cambiar la propiedad RepeatDirection de Vertical a Horizontal, DataList representa sus registros en una sola fila, creando una columna por elemento de origen de datos. Para ilustrar este efecto, haga clic en la DataList del Diseñador y a continuación, en la ventana Propiedades, cambie la propiedad RepeatDirection de Vertical a Horizontal. Inmediatamente después de hacerlo, el Diseñador ajusta el diseño de DataList, creando una interfaz de una sola fila y de varias columnas (vea la figura 3).

The RepeatDirection Property Dictates How the Direction the DataList s Items are Laid Out

Figura 3: La propiedad RepeatDirection dicta cómo se diseña la dirección de los elementos de DataList (Haga clic para ver la imagen de tamaño completo)

Al mostrar pequeñas cantidades de datos, una tabla de varias columnas de una sola fila podría ser una manera ideal de maximizar el espacio real de la pantalla. Sin embargo, para volúmenes más grandes de datos, una sola fila requerirá numerosas columnas, lo que inserta esos elementos que no caben en la pantalla de la derecha. En la figura 4 se muestran los productos cuando se representan en DataList de una sola fila. Dado que hay muchos productos (más de 80), el usuario tendrá que desplazarse lejos a la derecha para ver información sobre cada uno de los productos.

For Sufficiently Large Data Sources, a Single Column DataList Will Require Horizontal Scrolling

Figura 4: Para orígenes de datos suficientemente grandes, un DataList de una sola columna requerirá desplazamiento horizontal (Haga clic para ver la imagen de tamaño completo)

Paso 3: Mostrar datos en una tabla de varias columnas y varias filas

Para crear un DataList de varias columnas y varias filas, es necesario establecer la RepeatColumns propiedad en el número de columnas que se van a mostrar. De manera predeterminada, la propiedad RepeatColumns se establece en 0, lo que hará que DataList muestre todos sus elementos en una sola fila o una columna (dependiendo del valor de la propiedadRepeatDirection).

En nuestro ejemplo, vamos a mostrar tres productos por fila de tabla. Por lo tanto, establezca la propiedad RepeatColumns en 3. Después de realizar este cambio, dedique un momento a ver los resultados en un explorador. Como se muestra en la figura 5, los productos se muestran ahora en una tabla de tres columnas y varias filas.

Three Products are Displayed per Row

Figura 5: Se muestran tres productos por fila (Haga clic para ver la imagen de tamaño completo)

La propiedad RepeatDirection afecta a cómo se diseñan los elementos de DataList. En la figura 5 se muestran los resultados con la propiedad RepeatDirection establecida en Horizontal. Tenga en cuenta que los tres primeros productos Chai, Chang y Sirope Aniseed están dispuestos de izquierda a derecha, arriba abajo. Los tres productos siguientes (empezando por chef Anton s Cajun Seasoning) aparecen en una fila debajo de las tres primeras. Sin embargo, al cambiar la propiedad RepeatDirection a Vertical, estos productos se muestran de arriba a abajo, de izquierda a derecha, como se muestra en la figura 6.

Here, the Products are Laid Out Vertically

Figura 6: Aquí, los productos se colocan verticalmente (Haga clic para ver la imagen de tamaño completo)

El número de filas mostradas en la tabla resultante depende del número de registros totales enlazados a DataList. Precisamente, es el límite máximo del número total de elementos de origen de datos divididos por el valor de la propiedadRepeatColumns. Puesto que la tabla Products tiene actualmente 84 productos, que es divisible en 3, hay 28 filas. Si el número de elementos del origen de datos y el valor de la propiedad RepeatColumns no son divisibles, la última fila o columna tendrá celdas en blanco. Si se establece RepeatDirection en Vertical, la última columna tendrá celdas vacías; si RepeatDirection es Horizontal, la última fila tendrá las celdas vacías.

Resumen

DataList, de manera predeterminada, enumera sus elementos en una tabla de una sola columna y de varias filas, que imita el diseño de un control GridView con un único TemplateField. Aunque este diseño predeterminado es aceptable, podemos maximizar el espacio en pantalla mostrando varios elementos de origen de datos por fila. Esto es simplemente cuestión de establecer la propiedad RepeatColumns de DataList en el número de columnas que se van a mostrar por fila. Además, la propiedad RepeatDirection de DataList se puede usar para indicar si el contenido de la tabla de varias columnas y varias filas se debe colocar horizontalmente de izquierda a derecha, de arriba a abajo o verticalmente de arriba a abajo, de izquierda a derecha.

Acerca del autor

Scott Mitchell, autor de siete libros de ASP/ASP.NET y fundador de 4GuysFromRolla.com, ha estado trabajando con tecnologías web de Microsoft desde 1998. Scott trabaja como consultor independiente, instructor y escritor. Su último libro es Sams Teach Yourself ASP.NET 2.0 in 24 Hours. Puede ponerse en contacto con él en mitchell@4GuysFromRolla.com. o a través de su blog, http://ScottOnWriting.NET.

Agradecimientos especiales a

Esta serie de tutoriales fue revisada por muchos revisores de gran ayuda. El revisor principal de este tutorial fue John Suru. ¿Le interesa revisar mis próximos artículos de MSDN? Si es así, escríbame a mitchell@4GuysFromRolla.com.