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
|
