ASP.NET
 

Tutorial de acceso a datos en sitio Web creado con Visual Web Developer 2005 Express y SQL Server 2005 Express

 

Parte 2:
Mostrar todos los datos en un GridView
(con paginación, clasificable, etc.)

 
Publicado el 04/Feb/2007
Actualizado el 04/Feb/2007
Autor: Guillermo 'guille' Som

 

 

 

Introducción

En esta segunda parte del tutorial de cómo utilizar bases de datos en un sitio Web usando Visual Web Developer 2005 Express, te explicaré cómo mostrar en un control GridView todos los datos que tenga la tabla de usuarios. Cuando haya muchos datos, será conveniente que se muestren poco a poco, aquí te explico cómo paginar los datos en el control, además de permitir la clasificación por los distintos campos que se muestran.

Nota:
Como este ejemplo no necesita ni una sola línea de código, solo te muestro lo que hay aquí, pero verás que es muy fácil de crear la página para que muestre los datos en el GridView y que no hace falta que te muestre nada más.

 

Estos son los pasos para completar esta segunda parte del tutorial:

  • 1- Abre el proyecto que creamos en la parte anterior: vwdTut01.
     
  • 2- Añade una nueva página:
  • 2.a- En el menú Sitio Web selecciona Agregar nuevo elemento...
  • 2.b- Del cuadro de diálogo de agregar nuevo elemento, selecciona WebForms y dale el nombre MostrarUsuarios.aspx
  • 2.c- Como en este primer caso no vamos a escribir ni una línea de código, si quieres, quita la casilla que hay junto a Colocar el código en un archivo independiente.
     
  • 3- Si ya le habías dado a Aceptar antes de terminar de leer el punto anterior, puedes modificar el código interno de ese fichero para que no use un fichero de código por separado.
  • 3.a- Muestra el fichero, y pulsa en la ficha Código para que se muestre el código HTML de la página.
  • 3.b- En la parte superior, deja solo <%@ Page Language="VB" %> (si estás usando C#, en vez de VB, pues pondrá C#)
  • 3.c- Elimina el fichero extra que tendrá el mismo nombre de la página, pero con la extensión del lenguaje que hayas elegido, por ejemplo, si has usado Visual Basic, ese fichero se llamará MostrarUsuarios.aspx.vb
  • 3.d- Seguramente en la página .aspx habrá un bloque para escribir el código:
<script runat="server">

</script>
  • 3.e- Puedes borrarlo sin problemas.
     
  • 4- Ahora vamos a mostrar todos los datos que tenemos de los usuarios
  • 4.a- Como seguramente te imaginarás, la forma de hacerlo es como te mostré en el punto 24 de la parte anterior. Te lo explico de nuevo para que no te líes... ;-)))
  • 4.b- Muestra la página MostrarUsuarios.aspx en modo de diseño.
  • 4.c- Del Explorador de bases de datos selecciona la conexión vwdTut01.mdf y expándela
  • 4.d- De las Tablas, selecciona la de Usuarios y arrástrala hasta la página (el formulario Web)
  • 4.e- Esto hará que se creen dos controles: un GridView y un SqlDataSource
  • 4.f- Déjalos tal como están, ahora los personalizaremos.
     
  • 5- Haz que se muestre la página Default.aspx y que esté en modo de diseño (si no está en modo diseño, ya sabes, pulsa en la ficha Diseño)
  • 5.a- Es posible que para que se muestren los ficheros de nuestro sitio Web tengas que pulsar en la ficha Explorador de soluciones, ya que en el Visual Web Developer 2005 Express, la ficha del Explorador de bases de datos suele estar en el mismo grupo de ventanas que el explorador de soluciones.
     
  • 6- Arrastra un control HyperLink a la página (se pondrá debajo del que ya había)
  • 6.a- Selecciona ese control, y en la ventana de propiedades, asigna la cadena Mostrar todos los usuarios a la propiedad Text
  • 6.b- En la propiedad NavigateUrl tendrás que pulsar en el botoncito ese de los puntos suspensivos para que te muestre las páginas disponibles y así poder elegir a la que quieres que vaya cuando se pulse en ese link, en este caso, la página MostrarUsuaurios.aspx
     
  • 7- Prueba que todo está bien, pulsa F5 para iniciar la aplicación
  • 7.a- Si seguiste mis indicaciones del punto 35 de la primera parte, se mostrará la página Default.aspx, si no se muestra esa página y se muestra otra, ya sabes lo que tienes que hacer para que la página Default.aspx sea la página de inicio.
  • 7.b- Recuerda que si no indicas la página que se usará como inicio, al pulsar F5, la página que se mostrará será la que en ese momento esté seleccionada... y de casualidad, puede que sea Default.aspx, pero... para que siempre se inicie en esa página, sigue los pasos esos que te indiqué antes.
     
  • 8- Pulsa en el link de Mostrar todos los usuarios para ver todos los datos que tienes en la tabla de Usuarios.
  • 8.a- Verás que se muestra todo, incluso el código SHA1 de las claves.
     
  • 9- Como esa información no tiene ninguna utilidad, mejor la quitamos.
  • 9.a- Para quitar la columna Clave lo podemos hacer de varias formas.
  • 9.b- Cierra la ventana del explorer y haz que se muestre la página MostrarUsuarios.aspx en modo de diseño.
     
  • 10- Quitar columnas del GridView, método 1: Modificando el origen de datos.
  • 10.a- Selecciona el control GridView y pulsa en la flecha que tiene en la parte superior derecha para que se muestre la ventana de Tareas de GridView.
  • 10.b- De las opciones que te da, puedes elegir Configurar origen de datos... lo que hará que te muestre el asistente del origen de datos.
  • 10.c- En la primera ventana, pulsa en Siguiente (se supone que en la lista desplegable de las conexiones estará seleccionada la que estamos usando: vwdTur01ConnectionString1).
  • 10.d- En la siguiente ventana te mostrará las columnas que estás usando, quita la marca de la columna Clave (verás que el texto de la cadena usada para seleccionar los datos ya no muestra el campo Clave) y pulsa en Siguiente.
  • 10.e- En la siguiente pantalla pulsa en Finalizar.
  • 10.f- Te mostrará un mensaje de advertencia diciéndote que si quieres eliminar los campos del GridView bla, bla, bla. Dile que NO (es decir, pulsa en el botón No).
  • 10.g- Si pulsas en el botón Si, parecerá que todo está bien, pero al mostrar la ventana, (ejecutando la aplicación y mostrando todos los datos), verás que no se ve nada.
  • 10.h- Esto es porque se eliminan las columnas del control GridView, aunque el DataSource se configura de forma adecuada para que no incluya ese campo.
  • 10.i- Si lo que quieres es añadir una columna que antes has eliminado (si te estuvieras quieto en vez de estar jugueteando, no te pasaría esto, je, je), tendrás que decirle que sí en vez de que no.
  • 10.j- Pero claro, si le dices que sí, se eliminan las columnas, así que... ¡no verás los datos!
  • 10.k- Si te ocurre eso de que no se ven lo datos, lo mejor es eliminar el GridView y el SqlDataSource y volver a crearlo.
     
  • 11- Quitar columnas del GridView, método 2: Editando las columnas
  • 11.a- Selecciona el GridView y pulsa en la flecha de arriba...
  • 11.b- Pulsa en la opción Editar columnas...
  • 11.c- Te mostrará un cuadro de diálogo con las columnas de la tabla.
  • 11.d- En la parte de abajo a la izquierda, selecciona la columna Clave y pulsa en el botón con la X roja para borrarla.
  • 11.e- NO marques la casilla esa que dice Generar campos automáticamente, ya que te mostrará dos veces las columnas, además de que se incluirán todos los campos de la tabla (además de los que ya estaban, por eso te digo lo de dos veces, que hay que aclarártelo todo...)
  • 11.f- Pulsa en Aceptar para cerrar el cuadro de diálogo.
  • 11.g- Si pruebas, (F5 y esas cosas, ya sabes), verás que se muestran los datos sin la clave, que es lo que queríamos.
  • 11.h- Si te fijas en el código de la página, verás que en el DataSource sigue estando el campo Clave, incluso en el comando Select, pero como no está "boundado" (¿existe ese palabro? lo que el Guille quiere decir, es que no está vinculada automáticamente ninguna columna del grid a ese campo) en las columnas del GridView, pues no se verá.
     
  • 12- Quitar columnas del GridView, método 3: Editando el código HTML generado (sin asistentes, así a lo bravo, je, je)
  • 12.a- Para modificar manualmente lo que se va a mostrar en el GridView, debes mostrar el código HTML de la página MostrarUsuarios.aspx
  • 12.b- Si estás en modo de diseño, pulsa en la ficha Código y ve a la parte en la que está la etiqueta <Columns> del control GridView.
  • 12.c- Selecciona la fila en la que está la definición de la columna que quieres quitar, es decir, la que empieza con: <asp:BoundField DataField="Clave", y bórrala.
  • 12.d- Para que veas que ya está lo que pretendíamos, pulsa F5 y muestra los datos.
  • 12.e- Simple, ¿verdad? Pues eso...
     
  • 13- Como resulta que esta ventana solo la vamos a usar para mostrar los datos, ¿para que necesitamos los comandos de insertar, eliminar y demás? Así que, vamos a borrarlos.
  • 13.a- Esto lo puedes hacer de varias formas, por ejemplo modificando el origen de datos, pero mejor es que elimines el código que se genera en la página, así vamos a "tiro fijo" ;-)))
  • 13.b- Bueno, vale... ahora te explico cómo hacerlo con el asistente... ¡es que no me puedo negar a lo que me pides! ;-)))
  • 13.c- Para eliminar los comandos de forma manual, en el código de la página, busca los comandos a borrar y... ¡bórralos!
  • 13.d- Las "instrucciones" que debes borrar son: DeleteCommand, InsertCommand (que estará en la misma línea del anterior) y por último UpdateCommand.
  • 13.c- También tendrás que quitar los bloques de <InsertParameters>, <UpdateParameters> y <DeleteParameters>, es decir, todo lo que esté entre esas etiquetas y las correspondientes al cierre de las mismas, por ejemplo: desde <DeleteParameters> hasta </DeleteParameters>, (sí, ya se que lo has entendido, pero si no lo haces bien, al ejecutar te dará error y después vendrás protestando de que te falla, je, je, sí, vale, ya se que tu te enteras, pero...)
  • 13.d- OJO al borrar el DeleteCommand (el último antes de los parámetros), ya que suele tener el carácter > de cierre, y si lo borras, te dará error y puede que no te fijes en que es lo que ocurre.
     
  • 14- Ahora vas a usar el asistente de origen de datos para que solo se quede el comando Select.
  • 14.a- Si has estado haciendo lo que te comenté en el paso anterior, puedes borrar el GridView y el SqlDataSource y agrega nuevamente la tabla de Usuarios para que esté todo como en un principio.
  • 14.b- Bien, si ya tienes otra vez todo como estaba originalmente (se mostrará la columna Clave), haz que se muestre la página en modo de diseño y pulsa en la flechita de arriba del control GridView.
  • 14.c- Pulsa en la opción Configurar origen de datos...
  • 14.d- En la primera pantalla del asistente, pulsa en Siguiente.
  • 14.e- Quita la marca de la casilla que hay junto a Clave y pulsa en el botón Avanzadas... (el que está a la derecha del panel con los campos).
  • 14.f- Del cuadro de diálogo que te muestra, quita la marca de la opción Generar instrucciones Insert, Update y Delete y pulsa en Aceptar.
  • 14.g- Pulsa en Siguiente y después en Finalizar, si te muestra el aviso ese que te comenté en el punto 10, dile que NO.
  • 14.h- Si muestras el código de la página verás que solo está el comando Select, pero que en los campos enlazados está la clave, así que... borra esa línea (ver el punto 12).
  • 14.i- Pulsa la tecla F5 para comprobar que todo está bien y no se muestra el campo Clave.

Mejorar el aspecto del GridView

  • 15- Ahora vamos a juguetear un poco con el control GridView para cambiar el aspecto del mismo, permitir la paginación y esas monadas...
     
  • 16- Empezaremos por el aspecto del GridView propiamente dicho, es decir, la forma en que se verán los datos.
  • 16.a- Muestra el diseño de la página que tiene el grid, pulsa en el botoncito ese de arriba (para ver las Tareas de GridView)
  • 16.b- Pulsa en la primera opción: Formato automático...
  • 16.c- Te mostrará un cuadro de diálogo con los diferentes formatos que puedes usar, elige uno, por ejemplo: Clásica.
  • 16.d- Verás que el aspecto del grid ha cambiado, y que se ha añadido el código necesario para que se vea de esa forma, pero esto último es lo de menos.
     
  • 17- Ahora vamos a permitir la paginación, para que de esta forma, se muestre cada vez un número determinado de usuarios, ya que si no se pagina, se mostrarán todos los datos de una vez...
  • 17.a- Muestra las Tareas de GridView y marca la casilla Habilitar paginación, de esta forma se mostrarán los datos de 10 en 10.
  • 17.b- Si quieres que en vez de 10 datos se muestre otra cantidad, puedes cambiar el valor de la propiedad PageSize por el número de datos que quieras mostrar en cada página.
  • 17.c- Esa propiedad está accesible en modo de diseño, además de poder asignarlo desde el código.
     
  • 18- Si quieres que se puedan mostrar los datos ordenados por cualquiera de los campos, selecciona la opción Habilitar ordenacion (de las Tareas de GridView)
  • 18.a- En el caso de las fechas, las ordenará como cadenas (o eso me parece, pero creo que ni como cadenas... en fin...), así que no te asustes si ves que no están "correctamente" ordenadas.
     
  • 19- Si marcas la casilla Habilitar selección, decirte que... bueno... solo sirve para seleccionar una fila, pero nada más.

 

Y con esto y un bizcocho... pues eso, que ya tienes tarea para mostrar las cosas que tienes en una tabla de una base de datos.

Para que te vayas "entreteniendo" hasta que publique la tercera parte (que no la última) de este tutorial de acceso a datos con Visual Web Developer y SQL Server 2005, puedes agregar a cada una de las páginas un control HyperLink para que al pulsarlo se vaya a la página principal (Default.aspx).

 

Cambiar de lenguaje en una página

Antes de irme, una cosilla que me ha pasado mientras escribía el tutorial y hacía las pruebas que te iba a explicar:

Si añades una página .aspx (sin crear el fichero de separación del código o con separación, si después lo borras) y el lenguaje que tienes seleccionado al añadirla es, por ejemplo Visual Basic, y después decides que no, que debe ser C#, que sepas que no solo basta con cambiar el lenguaje en el atributo Language de la página (Page), ya que el VWD crea una clase parcial con ciertas cosas que necesita, pero que no nos muestra, y esa clase parcial la crea con el lenguaje indicado al crear la página, por tanto, se hará un lío... aunque funcionará bien, pero en la lista de errores tendrás un montón de errores, y el atributo ese del principio de la página lo tendrás marcado como erróneo, pero sin decirte ni MÚ... ;-)))

Si cierras ese fichero que has modificado manualmente, y lo vuelves a abrir, también se soluciona el error ese...

Aclararte que esto te ocurrirá cuando hayas añadido algo que necesite código, por ejemplo, al añadir el GridView, que aunque nosotros no tengamos que escribir nada, el ASP.NET 2.0 si que lo hace...

 

Espero que te sea de utilidad y sepas agradecerlo... (es de bien nacidos ser agradecidos) ;-))))

Nos vemos.
Guillermo

Nerja, 3 de Febrero de 2007


Volver al índice del tutorial


 



Ir al índice principal de el Guille