Información general sobre DataList (Control de servidor Web)

Artículo
10/22/2014

Actualización: noviembre 2007

El control de servidor web DataList muestra filas de información de una base de datos con un formato personalizable. El formato para mostrar los datos se define en plantillas que el usuario crea. Se pueden crear plantillas para elementos, elementos alternos, elementos seleccionados y elementos de edición. También hay disponibles plantillas de encabezado, pie y separador que permiten personalizar la apariencia general del control DataList. Al incluir controles de servidor Web Button en las plantillas, es posible conectar los elementos de la lista con código que permita a los usuarios cambiar entre los modos de presentación, selección y edición.

Este tema contiene:

Información general
Ejemplos de código
Referencia de clase

Información general

El control DataList de servidor Web muestra datos en un formato que se puede definir mediante plantillas y estilos. El control DataList resulta útil para los datos que se encuentran en una estructura de repetición, como una tabla. El control DataList puede mostrar los datos con diferentes diseños, por ejemplo ordenados en columnas o filas.

Nota:
El control DataList representa los elementos de una lista utilizando los elementos de la tabla HTML. Para controlar de forma precisa el código HTML que se utiliza para representar una lista, utilice el control Repeater de servidor Web en lugar del control DataList.

Si lo desea, puede configurar también el control DataList para permitir que los usuarios editen o eliminen información. También puede personalizar el control para que admita otras funcionalidades, como la selección de filas.

Utilice plantillas para definir el diseño de los elementos de datos mediante la inclusión de controles y texto HTML. Por ejemplo, puede utilizar un control Label de servidor Web en un elemento para mostrar un campo procedente del origen de datos.

En las secciones siguientes se presentan las características del control DataList.

Enlazar datos al control

El control DataList de servidor Web debe estar enlazado a un origen de datos. El origen de datos más común es un control de origen de datos, como un control SqlDataSource u ObjectDataSource. Si lo desea, puede enlazar también un control DataList a cualquier clase que implemente la interfaz IEnumerable, que incluye los conjuntos de datos de ADO.NET (la clase DataSet ), lectores de datos ( las clases SqlDataReader u OleDbDataReader ) o la mayoría de las colecciones. Al enlazar datos, debe especificar un origen de datos para el control DataList como una unidad. Cuando agregue otros controles a este control, por ejemplo etiquetas o cuadros de texto incluidos en elementos de lista, puede enlazar las propiedades de los controles secundarios a los campos del elemento de datos actual.

Definir plantillas para elementos DataList

En el control DataList, puede definir el diseño de la información mediante plantillas.

Nota:
Para obtener información general acerca del uso de las plantillas, vea Plantillas de controles de servidor Web ASP.NET.

En la tabla siguiente se describen las plantillas compatibles con el control DataList.

Propiedad de plantilla	Descripción
ItemTemplate	Contiene elementos HTML y controles que se representan una vez por cada fila del origen de datos.
AlternatingItemTemplate	Contiene elementos HTML y controles que se representan una vez en filas alternas del origen de datos. Normalmente, esta plantilla se utiliza para proporcionar un aspecto diferente a las filas alternas, como un color de fondo distinto al color especificado en la propiedad ItemTemplate.
SelectedItemTemplate	Contiene los elementos que se van a representar cuando el usuario seleccione un elemento del control DataList . Normalmente, esta plantilla se utiliza para distinguir visualmente la fila seleccionada con un color de fondo o de fuente diferente. También puede expandir el elemento y mostrar campos adicionales del origen de datos.
EditItemTemplate	Especifica el diseño de un elemento cuando se encuentra en modo de edición. Esta plantilla suele contener controles de edición, como controles TextBox.
HeaderTemplate y FooterTemplate	Contiene texto y controles que se representan al inicio y al final de la lista, respectivamente.
SeparatorTemplate	Contiene los elementos que se representan entre elemento y elemento. Un ejemplo típico puede ser una línea (si se utiliza un elemento HR).

Estilos

Para especificar la apariencia de los elementos de una plantilla, puede establecer el estilo de la plantilla. Por ejemplo, podría especificar que:

Los elementos se representen con texto negro sobre un fondo blanco.
Los elementos alternos se representen con texto negro sobre un fondo gris claro.
El elemento seleccionado se represente con texto negro en negrita sobre un fondo amarillo.
Los elementos que se estén editando se representen con texto negro sobre un fondo azul claro.

Cada plantilla admite su propio objeto de estilo, cuyas propiedades pueden establecerse tanto en tiempo de diseño como en tiempo de ejecución. Los estilos con los que puede trabajar son los siguientes:

Para obtener más información, consulte Controles de servidor Web ASP.NET y estilos de CSS.

Diseño de los elementos

El control DataList utiliza una tabla HTML para diseñar la representación de los elementos a los que se aplica la plantilla. Puede controlar el orden, la dirección y el número de columnas de cada celda de la tabla utilizada para representar los elementos DataList. En la tabla siguiente se describen las opciones de diseño admitidas por el control DataList.

Opción de presentación	Descripción
Diseño de flujo	En el diseño de flujo, los elementos de la lista se representan en línea, como en un documento de un procesador de textos.
Diseño de tabla	En el diseño de tabla, los elementos se representan en una tabla HTML. De este modo, se proporcionan más opciones para definir la apariencia de los elementos porque permite establecer las propiedades de las celdas de la tabla, como por ejemplo cuadrículas. Para obtener información detallada, consulte Cómo: Especificar el formato de flujo o tabla en controles DataList de servidor Web.
Diseño vertical y horizontal	De forma predeterminada, los elementos de un control DataList se muestran en una única columna vertical. Sin embargo, puede especificar que el control contenga más de una columna. Si es así, puede especificar además que los elementos se ordenen verticalmente (como columnas de un periódico) u horizontalmente (como los días de un calendario). Para obtener información detallada, consulte Cómo: Especificar la disposición horizontal o vertical en los controles DataList de servidor Web.
Número de columnas	Si los elementos de un control DataList están ordenados vertical u horizontalmente, puede especificar el número de columnas que tendrá la lista. Esto le permite controlar el ancho que se representa en la página Web, lo que se utiliza normalmente para evitar el desplazamiento horizontal.

Eventos

El control DataList admite varios eventos. Uno de ellos, el evento ItemCreated, proporciona un medio para personalizar el proceso de creación de elementos en tiempo de ejecución. El evento ItemDataBound ofrece también la capacidad de personalizar el control DataList, aunque después de que los datos estén disponibles para su inspección. Por ejemplo, si estuviera utilizando el control DataList para mostrar una lista de tareas pendientes, podría representar los elementos atrasados con texto en rojo, los elementos completados en negro y el resto con texto en verde. Puede utilizar cualquier evento para reemplazar el formato de la definición de la plantilla.

Los eventos restantes se producen en respuesta a clics en botones en elementos de la lista. Los eventos están diseñados para ayudarle a responder a la funcionalidad de uso más común del control DataList. Se admiten cuatro eventos de este tipo:

Para que estos eventos se desencadenen, agregue los controles Button, LinkButtono ImageButton a las plantillas en el control DataList y establezca la propiedad CommandName de los botones en una palabra clave, como edit, delete, update o cancel. Cuando un usuario hace clic en un botón de un elemento, el evento se envía al contenedor del botón (el control DataList). El evento exacto que desencadena el botón depende del valor de la propiedad CommandName del botón en que se hace clic. Por ejemplo, si la propiedad CommandName de un botón se establece en edit, el botón desencadena un evento EditCommand cuando se hace clic. Si la propiedad CommandName se establece en delete, el botón desencadena un evento DeleteCommand, etc.

El control DataList también admite el evento ItemCommand, que se desencadena cuando un usuario hace clic en un botón que no tiene un comando predefinido como edit o delete. Puede utilizar este evento para crear una funcionalidad personalizada; para ello, establezca la propiedad CommandName de un botón en el valor que necesite y, a continuación, pruébelo en el controlador de eventos ItemCommand. Puede utilizar este enfoque, por ejemplo, al seleccionar un elemento, tal como se describe en Cómo: Permitir que los usuarios seleccionen elementos en los controles DataList de servidor Web.

Para obtener más información sobre los eventos de los formularios Web Forms, vea Modelo de eventos de control de servidor Web ASP.NET.

Editar y seleccionar elementos

Puede permitir que los usuarios editen elementos individuales del control. Otros controles de datos, como GridView, DetailsView y FormView, pueden interactuar con los controles de origen de datos para admitir las operaciones de paginación o las actualizaciones automáticas. Por el contrario, el control DataList no puede aprovechar las funciones de actualización automática de los controles de origen de datos, o de paginación u ordenación. Para realizar las actualizaciones, la paginación y la ordenación mediante el control DataList, deberá realizar la tarea de actualización en el código que escriba.

La estrategia general consiste en crear una propiedad EditItemTemplate que proporcione el diseño y los controles adecuados para la edición. También deberá proporcionar un medio para que los usuarios indiquen que desean editar el elemento. El modo más habitual de hacer esto consiste en incluir un botón en la plantilla del elemento (y si se está utilizando, en la propiedad AlternatingItemTemplate ) y, a continuación, establecer la propiedad CommandName del botón en edit. Entonces, cuando se hace clic en el botón, el control DataList desencadena automáticamente el evento EditCommand. En el código que escriba para el controlador de eventos, establezca el elemento en modo de edición, que muestra la propiedad EditItemTemplate.

La propiedad EditItemTemplate normalmente incluye botones que permiten a los usuarios guardar o descartar sus cambios (por ejemplo, los botones Actualizar y Cancelar ). Estos botones funcionan de manera similar al botón Editar: envían un mensaje de comando predefinido (update o cancel) al control DataList, que desencadena el evento UpdateCommand o CancelCommand al que puede responder de forma apropiada. Para obtener más información, consulte Cómo: Permitir que los usuarios editen elementos en controles DataList de servidor Web.

El proceso de selección de un elemento es similar y utiliza el evento SelectedIndexChanged. Agregue un botón a la propiedad de plantilla ItemTemplate y establezca su propiedad CommandName en select. A continuación, escriba un controlador para el evento SelectedIndexChanged. El evento SelectedIndexChanged se desencadena cuando el usuario hace clic en el botón Seleccionar. Para obtener información detallada, consulte Cómo: Permitir que los usuarios seleccionen elementos en los controles DataList de servidor Web. Para obtener más información, consulte Cómo: Permitir que los usuarios seleccionen elementos en los controles DataList de servidor Web.

Volver al principio