El Nuevo GridView en ASP.NET 2.0
Introducción
ASP.NET 2.0 incluye nuevos controles para el acceso a datos para que de alguna forma podamos interactuar con nuestra base de datos sin tener que escribir tanto código. Estos nuevos controles no sólo nos van a permitir realizar consultas a la Base de Datos, sino que también podemos realizar operaciones de Inserción, Actualización y Borrado de Datos, además de la paginación, ordenación y filtrado. Estos nuevos controles son:
Control Data Source
Descripción
SqlSource
Permite trabajar con cualquiera de las bases de datos basadas en SQL, tales como Microsoft SQL Server u Oracle.
AccessDataSource
Permite trabajar con archivos de Microsoft Access (.mdb).
ObjectDataSource
Permite trabajar con objetos de negocio o Visual Studio 2005 Data Component.
SiteMapDataSource
Permite trabajar con datos jerárquicos en el archivo site map (.sitemap).
XmlDataSource
Permite trabajar con información de un archivo o de una fuente de XML.
DataSetDataSource
Permite trabajar con datos que se representan en un objeto DataSet.
Controles de Enlace a Datos
ASP.NET 2.0 proporciona nuevas colecciones de controles del servidor que se pueden utilizar junto con los nuevos controles de acceso a datos para mostrar datos recuperados en nuestro navegador. Aunque vamos a encontrar muchos controles de las versión de ASP.NET 1.0/1.1, también encontraremos nuevos y más poderosos controles como lo son el GridView.Los nuevos controles de Enlace a Datos que incluye ASP.NET 2.0 son:
- <asp:GridView>
- <asp:DataList>
- <asp:DetailsView>
- <asp:FormView>
- <asp:TreeView>
- <asp:Repeater>
- <asp:Menu>
- <asp:DropDownList>
- <asp:BulletedList>
- <asp:CheckBoxList>
- <asp:RadioButtonList>
- <asp:ListBox>
- <asp:AdRotator>
En esta primera entrega vamos a profundizar sobre los controles SqlDataSource y el Control GridView, en las próximas entregas hablaremos sobre los nuevos controles que tenemos para el acceso a Datos.
Controles SqlDataSource y GridView
El control SqlDataSource se puede utilizar con varios nuevos controles que incluye la versión de ASP.NET 2.0, uno de ellos es el GridView. El control SqlDataSource no solo es utilizado para realizar conexiones a Bases de Datos de SQL Server y Oracle, también puede manejar conexiones de ODBC y OLEDB.
Vamos a realizar un pequeño ejemplo con este nuevo control.
En este ejemplo vamos a utilizar la Base de Datos de ejemplo que se llama Northwind
Primero vamos a crear un nuevo WebSite desde nuestro entorno de desarrollo de Visual Studio 2005. Lo vamos a guardar en nuestro directorio virtual http://localhost/DataAccess
Es importante mencionar que con la nueva versión de ASP.NET 2.0 ya no necesitamos tener instalado el IIS en nuestra máquina de desarrollo, ya que el propio Visual Studio levanta un IIS Virtual para poder ejecutar nuestras aplicaciones.
Ya que tenemos nuestro Web Site vamos a tomar el WebForm que nos pone pro default cuando creamos nuestro nuevo sitio.Dentro de WebForm vamos a arrastrar el control SqlDataSource desde la barra de herramientas. Nos quedará algo como se muestra a continuación:
Una vez que agregamos el control vamos a configurarlo, para esto vamos a darle un click en la opción que nos aparece del lado derecho del control que dice: “Configure Data Souce…” (Configurar Fuente de Datos)
A continuación nos aparecerá un asistente para poder realizar nuestra configuración en donde daremos un click en el botón New para poder acceder a las propiedades de la conexión.
Y colocaremos los siguientes valores:
Server name: (local) /** Que se refiere a nuestra instancia de SQL Server. También podemos colocar un punto (.), con eso nos ahorramos más trabajo, jejeje**/
Vamos a elegir la seguridad integrada de Windows:
Use Windows Authentication
Y seleccionaremos nuestra base de datos: Northwind.
Para finalizar vamos a dar un click en el botón Test Connection, si nos aparece una ventana que dice que la conexión fue exitosa podremos continuar.
Una vez que agregamos el control vamos a configurarlo, para esto vamos a darle un click en la opción que nos aparece del lado derecho del control que dice: “Configure Data Souce…” (Configurar Fuente de Datos)
A continuación nos aparecerá un asistente para poder realizar nuestra configuración en donde daremos un click en el botón New para poder acceder a las propiedades de la conexión.
Y colocaremos los siguientes valores:
Server name: (local) /** Que se refiere a nuestra instancia de SQL Server. También podemos colocar un punto (.), con eso nos ahorramos más trabajo, jejeje**/
Vamos a elegir la seguridad integrada de Windows:
Use Windows Authentication
Y seleccionaremos nuestra base de datos: Northwind.
Para finalizar vamos a dar un click en el botón Test Connection, si nos aparece una ventana que dice que la conexión fue exitosa podremos continuar.
Una vez hecho eso nos regresará a la ventana anterior y nos pondrá algo como esto:
Vamos a dar un click en Next (Siguiente) y salvamos nuestra nueva conexión que deberá de llamarse algo asi: NorthwindConnectionString
En la siguiente ventana nos mostrará todas las tablas que tenemos en nuestra Base deDatos y elegiremos la tabla de Customers, y a continuación seleccionaremos el campo (*) para que recupere todos los campos de la tabla Customers, que sería el equivalente a hacer un SELECT * FROM Customers
Una vez hecho esto le daremos click en el botón Next y luego Finish y con esto habremos creado nuestro acceso a datos con este control.
Ahora vamos a arrastrar de nuestra barra de herramientas el control GridView y después vamos a dar un click en la opción AutoFormat y pueden elegir el formato que más te guste, yo elegí el formato Professional, esto es para cambiar el aspecto de nuestro nuevo control y nos deberá de quedar como se muestra en la siguiente imagen.
Después en la opción Choose Data Source vamos a elegir nuestro control SqlDataSource que ya hemos creado, al elegirlo nos va a quedar una pantalla como la siguiente:
Y listo ya hemos creado nuestro GridView con los datos de nuestra tabla Customers. Ahora vamos a ver si funciona.
Vamos a dar un click en cualquier parte de nuestro WebForm y elegimos la opción “View in Browse” para poder ver nuestra página en el navegador de Internet Explorer. Y veremos algo similar a esto:
Qué fácil es tener acceso a nuestros datos sin tener que escribir código no lo creen? Con esto nos vamos a ahorrar mucho trabajo y varias líneas de código.
Bueno ahora después de este pequeño ejemplo se preguntarán, que tan cierto es hacer paginación y ordenación sin tener que escribir código, bueno pues vamos a ver los siguientes ejemplos:
Paginación en el GridView
El control GridView tiene una serie de atributos que nos ayudan a hacer maravillas una de ellas es la paginación del Grid, antes teníamos que escribir en los eventos del Grid, el código para hacer esto, pero ahora con la nueva versión de ASP.NET 2.0 esto ya no será un dolor de cabeza y lo haremos con unos cuantos clicks.
Vamos a seleccionar nuestro GridView y en la ventana de propiedades vamos a cambiar los siguientes valores:
AllowPaging = True
PageSize = 15
Con esto le estamos diciendo al GridView que queremos tener páginas de datos, en donde cada habrá 20 registros por cada página mostrada.
El aspecto de nuestro GridView quedaría de la siguiente forma:
Qué fácil no? Y no tuvimos que escribir código. Bueno ahora vamos a ver como ordenar.
Ordenamiento en el GridView
Para poder hacer que nuestro GridView haga el ordenamiento es fijar el siguiente valor en la propiedad AllowSorting = True
Vamos a ver que los campos en el Header están subrayados y esto nos indica que podemos hacer el ordenamiento por cualquier campo y de forma ascendente y descendente. Ahora vamos a ejecutarlo y vamos a ordenar por medio del campo País y nos deberá de quedar algo como lo que tenemos en la siguiente figura.
Hasta ahora hemos visto como ordenar y hacer la paginación, pero ahora veamos cómo podemos realizar una edición o borrado de registros, todo esto sin escribir código.
Edición y Borrado de Registros desde el GridView
En las tareas comunes del GridView vamos a dar un click en “Configure Data Source” para activar las opciones de Edición y Borrado de registros, esto lo vamos a encontrar en el botón Advanced y ahí activamos la casilla “Generate INSERT, UPDATE and DELETE statements” con esto generamos las sentencias en SQL para insertar, actualizar y eliminar registros.
Una vez hecho estos cambios damos click en el botón “Finish” para que los cambios se guarden y se agreguen las opciones Editing y Deleting en las propiedades más comunes al GridView.
Después hecho esto vamos a seleccionar las opciones “Enable Editing”, “Enable Deleting” y “Enable Selection” y listo con esto hemos creado las sentencias para Editar, Borrar y Seleccionar registros en el GridView.
Cuando lo ejecutemos nos quedará una imagen como que mostramos a continuación:
Vamos a cambiar la Ciudad, en lugar de tener “Buenos Aires” vamos a cambiarlo por “México, D.F.”, ahora damos un click en Update, y con esto hemos hecho una actualización en nuestra tabla.
Qué fácil es todo esto verdad? Ahora vamos a ver qué tan sencillo es eliminar un registro.
Eliminar datos de la tabla producida por el GridView es incluso más fácil que editarlos. Apenas algunas adiciones al código te permiten suprimir una fila entera de datos de la tabla. Como hemos visto en el ejemplo anterior, agregamos simplemente el botón de “Delete” y listo ya podemos eliminar registros.
Nota Importante: Si el registro que queremos eliminar de nuestra tabla tiene alguna relación con otra tabla, es decir tenemos una llave foránea nos va a marcar un error si queremos eliminar el registro de la tabla, esto por la integridad de nuestras tablas.
Conclusiones
Con esto podemos decir que al día de hoy con la nueva versión de ASP.NET 2.0 es más fácil crear aplicaciones Web y en menor tiempo, sin tener la necesidad de escribir líneas de código. En los próximos artículos estaremos hablando de los controles DetailsView, FormView y veremos cómo podemos hacer una vista de detalles con tan solo unos clicks.
Víctor Alameda
MCP
DevelopersDotNet.com