Mostrar varios registros por fila con el control DataList (VB)

por Scott Mitchell

Descarga de la aplicación de ejemplo o descarga de 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 vimos en los dos últimos tutoriales han representado cada registro de su origen de datos como una fila en un <table>HTML de una sola columna. Aunque éste es el comportamiento predeterminado de DataList, es muy fácil personalizar la presentación de DataList de modo que los elementos de origen de datos se repartan entre una tabla de varias filas y varias filas. Además, es posible que se muestren todos los elementos de origen de datos en una lista de datos de varias columnas y una sola fila.

Podemos personalizar el diseño de DataList s a través de sus propiedades RepeatColumns y RepeatDirection, que, respectivamente, indican el número de columnas que se representan y si esos elementos se colocan vertical u horizontalmente. La figura 1, por ejemplo, muestra una lista de datos que muestra información del producto en una tabla con tres columnas.

el DataList muestra tres productos por fila

Figura 1: el 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 emplear más eficazmente el espacio horizontal de la pantalla. En este breve tutorial Exploraremos estas dos propiedades de DataList.

Paso 1: Mostrar la información del producto en una lista de datos

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

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

Hemos aprendido cómo enlazar datos a una lista de datos en ejemplos anteriores, por lo que seguiremos estos pasos rápidamente. Comience abriendo la página RepeatColumnAndDirection.aspx en la carpeta DataListRepeaterBasics y arrastre una lista de controles desde el cuadro de herramientas hasta el diseñador. En la etiqueta inteligente DataList s, opte por crear un nuevo ObjectDataSource y configurarlo para extraer sus datos del método ProductsBLL Class s GetProducts, eligiendo la opción (ninguno) en las pestañas insertar, actualizar y eliminar del asistente.

Después de crear y enlazar el nuevo ObjectDataSource a DataList, Visual Studio creará automáticamente una ItemTemplate que muestra el nombre y el valor de cada uno de los campos de datos del producto. Ajuste el ItemTemplate directamente a través del marcado declarativo o desde la opción editar plantillas de la etiqueta inteligente de DataList s para que use el marcado mostrado anteriormente, reemplazando el nombre del producto, el nombre de la categoríay el texto del precio por los controles de etiqueta que usan la sintaxis de enlace de los enlaces para asignar valores a sus propiedades Text. Después de actualizar el ItemTemplate, el marcado declarativo de la página debe ser 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 Eval sintaxis de enlace de los enlaces de la UnitPrice, dando formato al 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 varias filas de una sola columna.

de forma predeterminada, DataList se representa como una tabla de una sola columna y varias filas

Figura 2: de forma predeterminada, DataList se 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 para la lista de objetos es colocar sus elementos verticalmente en una tabla de una sola columna y varias filas, este comportamiento se puede cambiar fácilmente a través de la propiedad DataList s RepeatDirection. La propiedad RepeatDirection puede aceptar uno de dos valores posibles: Horizontal o Vertical (valor predeterminado).

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

la propiedad RepeatDirection determina cómo se distribuyen los elementos de DataList

Figura 3: la propiedad RepeatDirection determina cómo se colocan los elementos de DataList en la lista (haga clic para ver la imagen de tamaño completo)

Al mostrar pequeñas cantidades de datos, una tabla de una sola fila y varias columnas puede ser una manera ideal de maximizar el estado real de la pantalla. Sin embargo, en el caso de volúmenes de datos de mayor tamaño, una sola fila requerirá numerosas columnas, lo que empujará a la derecha los elementos que se pueden ajustar a la pantalla. La figura 4 muestra los productos cuando se representan en una lista de filas de una sola fila. Dado que hay muchos productos (más de 80), el usuario tendrá que desplazarse hacia la derecha para ver información acerca de cada uno de los productos.

para orígenes de datos suficientemente grandes, una sola columna de lista de columnas requerirá un desplazamiento horizontal

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

Paso 3: mostrar los datos en una tabla de varias filas y varias filas

Para crear una lista de columnas de varias filas, es necesario establecer la propiedadRepeatColumns en el número de columnas que se van a mostrar. De forma predeterminada, la propiedad RepeatColumns está establecida en 0, lo que hará que la lista de objetos muestre todos sus elementos en una sola fila o columna (dependiendo del valor de la propiedad RepeatDirection).

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.

tres productos se muestran por fila

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

La propiedad RepeatDirection afecta a la disposición de los elementos de la lista de objetos. La figura 5 muestra los resultados con la propiedad RepeatDirection establecida en Horizontal. Tenga en cuenta que los tres primeros productos Chai, Chang y jarabe de sirope se disponen de izquierda a derecha y de arriba abajo. Los tres productos siguientes (a partir de chef Anton s Cajun Seasoning) aparecen en una fila por debajo de los tres primeros. Sin embargo, al cambiar la propiedad RepeatDirection a Vertical, se muestran estos productos de arriba abajo, de izquierda a derecha, como se muestra en la figura 6.

aquí, los productos se colocan verticalmente

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 total de registros enlazados a DataList. Precisamente, es el límite superior del número total de elementos de origen de datos dividido por el valor de la propiedad RepeatColumns. Dado que la tabla Products tiene actualmente 84 productos, que es divisible por 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 el RepeatDirection se establece en Vertical, la última columna tendrá celdas vacías. Si RepeatDirection se Horizontal, la última fila tendrá las celdas vacías.

Resumen

De forma predeterminada, DataList enumera los elementos de una tabla de una sola columna y varias filas, lo que imita el diseño de un control GridView con una única TemplateField. Aunque este diseño predeterminado es aceptable, podemos maximizar el espacio real de la pantalla mostrando varios elementos de origen de datos por fila. Para ello, basta con establecer la propiedad DataList s RepeatColumns en el número de columnas que se mostrarán por fila. Además, la propiedad DataList s RepeatDirection se puede usar para indicar si el contenido de la tabla de varias filas y de varias filas debe estar horizontalmente de izquierda a derecha, de arriba a abajo o verticalmente de arriba 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 las tecnologías Web de Microsoft desde 1998. Scott funciona como consultor, profesor y redactor independiente. Su último libro se enseña a ASP.NET 2,0 en 24 horas. Puede ponerse en contacto con usted en mitchell@4GuysFromRolla.com. o a través de su blog, que encontrará en http://ScottOnWriting.NET.

Agradecimiento especial a

Muchos revisores útiles revisaron esta serie de tutoriales. El revisor responsable de este tutorial fue John Suru. ¿Está interesado en revisar los próximos artículos de MSDN? En caso afirmativo, suéltelo en mitchell@4GuysFromRolla.com.