El control DataGrid

1. INTRODUCCIN

on esta leccin empezaremos a utilizar la informacin almacenada en la base de datos de la aplicacin.

Veremos cmo podemos mostrarla en los controles de las pginas web y cmo podemos modificarla. Para ello, vamos a utilizar las dos estrategias de acceso a datos que permite ADO .NET: conjuntos de datos y acceso conectado mediante comandos y lectores. En esta leccin utilizaremos la primera estrategia, creando un conjunto de datos y mostrando su contenido en un control especial: el control DataGrid. DataGrid es, seguramente, el control ms utilizado en una aplicacin ASP .NET para mostrar y trabajar con informacin almacenada en una base de datos, ya que proporciona gran funcionalidad con poco cdigo. En nuestro caso, utilizaremos un control DataGrid para acceder a la informacin de los productos que vende nuestra tienda virtual en Internet.

2. CREAR EL CONJUNTO DE DATOS ay varias formas de crear un conjunto de datos o DataSet si utiliza Visual Studio .NET. Podr hacerlo a partir de las herramientas grficas que proporciona el entorno de desarrollo o directamente escribiendo el cdigo correspondiente. En cualquier caso, es importante recordar la idea fundamental a la hora de utilizar un conjunto de datos. As pues, al utilizar el conjunto de datos, usted seguir este esquema: 1.- Abrir la conexin con la base de datos. 2.- Obtener la informacin necesaria y almacenarla en un conjunto de datos, que se mantiene en la memoria del servidor web. 3.- Cerrar la conexin y manipular la informacin del conjunto de datos.

Copyright (c) Computer Aided Education S.A.

El control DataGrid

Como puede ver, se trata de la estrategia de acceso a datos desconectada, ya que la conexin se cierra una vez obtenida la informacin de la base de datos a la que accedemos. Para crear un conjunto de datos grficamente, sin escribir cdigo para ello, lo que haremos es aadir un adaptador de datos al formulario. Este tipo de objetos los podemos encontrar en la ficha Datos del Cuadro de herramientas. Dependiendo del tipo de base de datos al que vamos a acceder, utilizaremos una serie de objetos u otros. En el caso de acceder a una base de datos SQL Server, podremos utilizar los objetos especializados, que empiezan por el prefijo Sql, o los ms genricos de acceso a bases de datos compatibles con OLE DB, que empiezan con el prefijo Ole. Ambos conjuntos de objetos nos proporcionarn la misma funcionalidad, por lo que vamos a elegir el proveedor de datos de OLE DB, de forma que aprenda a acceder a cualquier base de datos compatible.
Microsoft recomienda utilizar los objetos que empiezan con el prefijo Sql para el acceso a una base de datos SQL Server por motivos de eficiencia.

As pues, elegiremos el tipo de objeto OleDbDataAdapter y lo arrastraremos hasta el formulario web en el que estamos trabajando. Se iniciar un asistente para la configuracin de este tipo de control. En primera instancia, debe indicar qu conexin con la base de datos desea utilizar. Tambin puede crear una nueva. Despus debemos indicar cmo obtendremos los datos. Por ahora utilizaremos sentencias SQL para extraer la informacin de la base de datos. Por ejemplo, la sentencia SELECT * FROM Productos obtendra todos los datos almacenados en la tabla Productos de la base de datos TiendaBD.

El control DataGrid

Es conveniente mantener los conjuntos de datos lo ms pequeos posible. Solicite la informacin detallndola siempre que pueda y limitando el nmero de registros que realmente necesita con instrucciones SQL en las que aparezcan condiciones WHERE.

En este paso puede pulsar en el botn Opciones avanzadas, y mantener activada la casilla Generar instrucciones Insert, Update y Delete para poder utilizar este adaptador de datos para modificar la informacin de la tabla Productos.

Finalizaremos el asistente y obtendremos, en la parte inferior del formulario un adaptador de datos y de la conexin que utiliza para acceder a la correspondiente base de datos. El siguiente paso es generar el conjunto de datos al que queremos acceder. Para ello, en la parte inferior de la ventana de propiedades aparece un hipervnculo con el texto Generar conjunto de datos.

Copyright (c) Computer Aided Education S.A.

El control DataGrid

Deber establecer un nombre para el DataSet y activar la casilla de la tabla Productos. Utilizaremos el prefijo Con para el nombre de las conexiones (por ejemplo, ConTiendaBD), DA para los nombre de los adaptadores (por ejemplo, DAProductos) y DS para los conjuntos de datos (por ejemplo, DSProductos). Con estos pasos habremos obtenido la informacin que deseamos mostrar en el formulario web. Ahora veremos cmo hacerlo en un control DataGrid.

3. MOSTRAR DATOS EN UN DATAGRID a mayora de controles que podemos dibujar en un formulario web tienen la capacidad de mostrar informacin existente en un conjunto de datos. Esta propiedad se llama enlace a datos. En muchos casos, se trata de enlace sencillo, ya que pueden mostrar un nico elemento de datos, como puede ser el valor de un campo de un registro del conjunto de datos. Esto es as en cuadros de texto, etiquetas, casillas de verificacin, botones de opcin, etc. Sin embargo, tambin disponemos de controles ms sofisticados, como el control DataGrid o rejilla de datos, que permite mostrar y modificar todos los registros de un conjunto de datos a la vez. Este control est disponible en la ficha Web Forms del Cuadro de herramientas. Deberemos establecer al menos dos propiedades para enlazar el control DataGrid con el conjunto de datos: en la propiedad DataSource estableceremos el nombre del DataSet a utilizar y, opcionalmente, en la propiedad DataMember, la parte de dicho DataSet. Tambin podemos indicar el campo clave del DataSet en la propiedad DataKeyField. Esto puede ser de utilidad despus. En nuestro caso: DataSource = DSProductos; DataMember = Productos; DataKetyField = IdProducto.
4

El control DataGrid

Pero esto no es suficiente porque para que se muestre esta informacin en la pgina web, hay que rellenar ese conjunto de datos y enlazar el DataGrid en tiempo de ejecucin. Para esto, habr que escribir un poco de cdigo.
Private Sub Page_Load(...) Handles MyBase.Load DAProductos.Fill(DsProductos1, "Productos") If Not IsPostBack Then DataGrid1.DataBind() End If End Sub

Con el mtodo Fill llenamos el conjunto de datos y con el mtodo DataBind enlazamos el control DataGrid con ese conjunto de datos la primera vez que se carga la pgina. Es importante recordar la necesidad de enlazar el control DataGrid con el conjunto de datos la primera vez que se carga la pgina y cada vez que este conjunto de datos sea modificado. Con estos sencillos pasos, mostraremos la informacin deseada en la pgina web. Esta informacin proviene de la tabla Productos de nuestra base de datos, donde ya se almacenan algunos registros, como puede ver en la siguiente figura.

Copyright (c) Computer Aided Education S.A.

El control DataGrid

4. COLUMNAS DE DATOS unque hemos obtenido lo que estbamos buscando, es decir, el listado de todos los productos almacenados en la tabla Productos de nuestra base de datos, est claro que el resultado obtenido es bastante pobre. Podemos mejorar significativamente el aspecto del control DataGrid e incluso especificar qu informacin queremos mostrar del DataSet. Para ello, haga clic en el control y elija Generador de propiedades.

En la ficha General de este cuadro de dilogo nos encontramos con las tres propiedades que establecemos en tiempo de diseo para enlazar el control con el conjunto de datos: DataSource, DataMember y DataKeyField o Campo de claves de datos. Adems, podemos establecer que se muestre el encabezado o pie de cada columna. Como se nos indica, por defecto el control DataGrid mostrar todas las columnas de datos disponibles en el DataSet, pero nosotros podemos cambiar esta distribucin en el apartado Columnas de la parte izquierda. En esta ficha, si est activada la creacin de columnas automticamente, el control DataGrid mostrar un columna por cada campo disponible en el DataSet.

El control DataGrid

Esto es muy cmodo, pero nosotros podemos preferir elegir las columnas que deseamos mostrar e incluso cmo deben hacerlo. As que la desactivaremos y crearemos nosotros mismos las columnas que aparezcan en el DataGrid.

Lo que tenemos que hacer es pasar las columnas que queremos desde la lista Columnas disponibles a la lista Columnas seleccionadas. Por ejemplo, nos interesa que en el DataGrid aparezca el identificador del producto, pues elegimos IdProducto en la lista de la izquierda y pulsamos en el botn para pasarlo a la lista de la derecha. Una vez seleccionada una columna, en la parte inferior del cuadro de dilogo podremos modificar algunos detalles de la misma. Por ejemplo, podramos incluir el texto que queremos que aparezca en su encabezado, en el pie, etc. Esto es muy til. Por ejemplo, en el caso de la columna correspondiente al campo IdProducto, puede ser conveniente cambiar el texto que aparece por defecto en su encabezado. As, indicando que esa columna muestra el cdigo del producto ayudar bastante al cliente que desea comprarlo, para que entienda a qu se est refiriendo.

Copyright (c) Computer Aided Education S.A.

El control DataGrid

Pulse en el botn Ayuda de este cuadro de dilogo para obtener ms informacin de cmo crear expresiones de formato segn el tipo de datos de la columna. Por ejemplo, la expresin {0:d} utiliza el formato de fecha corta de Windows, como 29/12/2005, mientras que {0:C} muestra un valor monetario en el formato de moneda indicado en la configuracin de la aplicacin.

Tambin podramos establecer una expresin para aplicar cierto formato. Esto puede ser adecuado cuando se trate de informacin monetaria o un campo de fecha. Por otra parte, compruebe que no puede modificar el detalle Campo de datos porque enlaza la columna con la informacin que tiene que mostrar en la pgina web. En este caso se trata de un campo del DataSet. De esta forma iramos aadiendo las columnas correspondientes a los campos que queremos visualizar en el control DataGrid.

5. COLUMNAS DE HIPERVNCULO dems de columnas correspondientes a los campos que estn disponibles en el DataSet, el control DataGrid permite aadir otros tipos de columnas. Por ejemplo, si comprueba la estructura de la tabla Productos, ver que en ella aparece un campo llamado ImageURL.

En este campo se almacena la ubicacin de un pequeo archivo de imagen que ponemos a disposicin de los clientes para que puedan comprobar el aspecto del producto ofertado. En lugar de almacenar en la base de datos la imagen en s, lo que hacemos es disponer de estas imgenes en una carpeta llamada images y en la base de datos slo almacenamos esa ubicacin. Bien, en el DataGrid no tiene mucho sentido mostrar la ubicacin del producto en cuestin, sino que sera mejor mostrar la imagen en s, pero como no se almacena en la tabla Productos, lo que podemos hacer es crear un hipervnculo que apunte a la imagen correspondiente. El DataGrid permite crear columnas de hipervnculo para estos casos. En la figura siguiente puede ver la configuracin de una columna de este tipo para la imagen del producto.

El control DataGrid

En este caso, se utilizar la cadena almacenada en el campo ImageURL como destino del hipervnculo, que se establece en Campo de direccin URL. En Destino indicaremos dnde se mostrar la imagen a la que da acceso el hipervnculo. Si no indica nada, entonces el nuevo contenido sustituir a la pgina actual. Con _blank se crear una nueva ventana para mostrar la imagen del producto. Por otra parte, podemos aplicar un formato rpido con el comando Formato automtico del men contextual del DataGrid. Aqu disponemos de un gran nmero de formatos automticos con los que podemos cambiar el aspecto del control de forma realmente sencilla.
Copyright (c) Computer Aided Education S.A.

El control DataGrid

Aunque vamos mejorando el aspecto de la pgina web, no acaba de ser todo lo agradable que podra ser. Por ejemplo, podramos establecer un ancho mayor para algunas columnas de forma que sus valores se mostraran en una lnea. El resultado del DataGrid en la pgina web es realmente una tabla HTML. Esto quiere decir que podemos aprovechar nuestros conocimientos de HTML para mejorar el aspecto. Por ejemplo, podramos indicar que la tabla debe ocupar siempre el ancho de la pgina. Esto es tan sencillo como establecer la propiedad Width del DataGrid al valor 100%. De esta forma podemos ver los detalles de todos los productos disponibles en la base de datos. Sin embargo, crear tablas con muchas filas no suele ser una buena idea. Por ello, el control DataGrid permite establecer su paginacin.

6. PAGINACIN SIMPLE n este caso el nmero de registros que muestra el DataGrid no es demasiado grande, ya que 30 productos es un nmero relativamente pequeo.

10

El control DataGrid

Sin embargo, incluso as, no es conveniente presentar al usuario una tabla en la pgina web con tanta informacin. Primero porque es incmodo para l porque tiene que ir desplazndose por la pgina y segundo porque esto implicar que la pgina tarde bastante tiempo al tener que generarse toda la tabla. Normalmente, es preferible dividir el resultado en varias pginas, mostrando en cada una de ellas un nmero ms reducido de registros. Esto se conoce como paginacin. En el apartado Paginacin de las propiedades del DataGrid deberemos establecer AllowPaging al valor True. Esto permite que el DataGrid se encargue de la paginacin sin que nosotros tengamos que hacer prcticamente nada. En la propiedad PageSize indicamos cuntas filas o registros se mostrarn en cada pgina. Con estas propiedades es suficiente, pero tambin tenemos que escribir un poco de cdigo para el evento PageIndexChanged.
Private Sub DataGrid1_PageIndexChanged (ByVal source As Object, _
ByVal e As System.Web.UI.WebControls.DataGridPageChangedEventArgs)...

DataGrid1.CurrentPageIndex = e.NewPageIndex DataGrid1.DataBind() End Sub

Como se ha comentado, tenemos que enlazar el DataGrid con el conjunto de datos la primera vez que se carga la pgina y cada vez que sea modificado. Tendremos que hacerlo en este evento, que es el que sucede cuando el usuario solicita una nueva pgina. Fjese que primero modificamos el nmero de la pgina actual y despus enlazamos el DataGrid. Es importante fijarse que estamos rellenando el DataSet en cada vuelta al servidor web porque la lnea DAProductos.Fill del evento Page_Load se ejecutar cada vez. Esto puede ser adecuado o no en funcin de la naturaleza de la informacin que muestre el DataGrid.
Copyright (c) Computer Aided Education S.A.

11

El control DataGrid

Si es informacin que vara rpidamente, siempre es mejor volver a rellenar el Dataset desde la base de datos con la informacin actualizada. Sin embargo, si esta informacin no vara, podra ser interesante almacenarla en alguna parte al estilo de una memoria cach. De esta forma no se tendra que volver a acceder a la base de datos.

Fjese que ahora slo se muestran 5 productos en la pgina y en la parte inferior derecha de la tabla aparecen dos botones que permiten acceder a la pgina siguiente > o anterior <. El texto de estos botones tambin podemos cambiarlo con la propiedad PagerStyle del DataGrid. Por ejemplo, en las propiedades NextPageText y PrevPageText podremos introducir el texto que queremos que se muestre en los botones para acceder a la siguiente y anterior pgina, respectivamente. En el valor que presentan estas propiedades inicialmente se incluye su codificacin HTML. As, la cadena &gt; es la forma de escribir en HTML el carcter > y &lt; el carcter <. Tambin podramos elegir mostrar las pginas como nmeros para que los usuarios puedan acceder rpidamente a una determinada pgina. Para ello, estableceramos la propiedad Mode de esta seccin al valor NumericPages. Finalmente, indicarle que para poder utilizar este mtodo de paginacin, es necesario que la informacin que se muestra en el DataGrid provenga de un conjunto de datos o DataSet, ya que el DataGrid tiene que calcular cuntas pginas harn falta para mostrar todos los registros.
12