Nota
El acceso a esta página requiere autorización. Puede intentar iniciar sesión o cambiar directorios.
El acceso a esta página requiere autorización. Puede intentar cambiar los directorios.
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 <table>de una sola columna . 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 una lista de datos de una sola fila y de varias columnas.
Podemos personalizar el diseño de DataList a través de sus RepeatColumns propiedades 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 una lista de datos que muestra información del producto en una tabla con tres columnas.
Figura 1: La lista de datos 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 una lista de datos
Antes de examinar las RepeatColumns propiedades y RepeatDirection , vamos a crear primero una lista de datos 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 RepeatColumnAndDirection.aspx página en la DataListRepeaterBasics carpeta y arrastre una lista de datos desde el cuadro de herramientas al Diseñador. En la etiqueta inteligente de DataList, opte por crear un nuevo ObjectDataSource y configúrelo 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 objeto que muestra el nombre y el valor de cada uno de los campos de datos del producto. Ajuste directamente ItemTemplate 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, el nombre de categoría y el texto price por controles Label que usan la sintaxis de enlace de datos adecuada para asignar valores a sus Text propiedades. Después de actualizar el ItemTemplate, el marcado declarativo de la página debería verse 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 de enlace de datos Eval 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.
Figura 2: De forma predeterminada, la lista de datos 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 La lista de datos
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 DataList.RepeatDirection La RepeatDirection propiedad puede aceptar uno de los dos valores posibles: Horizontal o Vertical (el valor predeterminado).
Al cambiar la RepeatDirection propiedad 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 lista de datos del Diseñador y, a continuación, en la ventana Propiedades, cambie la RepeatDirection propiedad 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).
Figura 3: La RepeatDirection propiedad dicta cómo se diseña la dirección de los elementos de la lista de datos (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 desplaza aquellos elementos que no caben a la derecha de la pantalla. En la figura 4 se muestran los productos cuando se representan en una lista de datos 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.
Figura 4: Para orígenes de datos suficientemente grandes, una lista de datos 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 configurar la RepeatColumns propiedad para el número de columnas que se desean mostrar. De forma predeterminada, la RepeatColumns propiedad 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 RepeatDirection propiedad).
En nuestro ejemplo, vamos a mostrar tres productos por fila de tabla. Por lo tanto, establezca la RepeatColumns propiedad 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.
Figura 5: Se muestran tres productos por fila (haga clic para ver la imagen de tamaño completo)
La RepeatDirection propiedad afecta a cómo se disponen los elementos de DataList. En la figura 5 se muestran los resultados con la RepeatDirection propiedad 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 RepeatDirection propiedad a Vertical, estos productos se muestran de arriba a abajo, de izquierda a derecha, como se muestra en la figura 6.
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 RepeatColumns propiedad. Puesto que la Products tabla 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 RepeatColumns propiedad no son divisibles, la última fila o columna tendrá celdas en blanco. Si se establece RepeatDirectionen Vertical , la última columna tendrá celdas vacías; si RepeatDirection es Horizontal, la última fila tendrá las celdas vacías.
Resumen
DataList, de forma 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 DataList en RepeatColumns el número de columnas que se van a mostrar por fila. Además, la propiedad DataList se RepeatDirection 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, entrenador y escritor. Su último libro es Sams Teach Yourself ASP.NET 2.0 en 24 horas. Se puede contactar con él en mitchell@4GuysFromRolla.com.
Agradecimientos especiales a
Esta serie de tutoriales contó con la revisión de muchos revisores que fueron 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í, mándame un mensaje a mitchell@4GuysFromRolla.com.