IntroducciónEn esta primera parte del tutorial de cómo utilizar bases de datos en un sitio Webusando Visual Web Developer ...
• 3.h- Dale a guardar y ponle el nombre Usuarios• 4- Ahora te explico cómo crear el formulario de introducción de datos.• ...
• 9.a- Selecciona la fila del botón• 9.b- En el menú Diseño selecciona Combinar celda• 9.c- De esa forma, esa columna ocup...
o 16.b- txtCorreo, txtClave, txtNombre y txtComentarios• 17- Al botón dale el nombre btnNuevo• 18- A la etiqueta del final...
• 21.d- Cambia el texto de la etiqueta a Fecha y el nombre de la caja detextos a txtFecha• 21.e- Como la fecha es de solo ...
• 25.a- Muestra la página en modo de diseño y del Cuadro deherramientas, selecciona el grupo Validación• 25.b- Arrastra un...
ErrorMessage.• 28- Si queremos que la clave tenga un mínimo de caracteres, podemosagregar un control CustomValidator, indi...
• 31- Antes de seguir, decirte que si la caja de textos está en modoPassword, y cuando se compruebe por código si el usuar...
Comprobamos si el nombre ya existeUsing cnn As New SqlConnection(Me.SqlDataSource1.ConnectionString)Dim cmd As New SqlComm...
• 33.a- Ahora debemos hacer casi lo mismo de antes, pero ejecutando elcomando Insert, el cual también lo tomaremos del obj...
cmd.Parameters.AddWithValue("@Clave", clave) La fecha a guardar es la actualtxtFecha.Text = DateTime.Now.ToString()cmd.Par...
escribe menos de 6 caracteres en la clave, etc.• 37- Una vez que hayas probado que las validaciones funcionan, introduce u...
independiente.• 3- Si ya le habías dado a Aceptar antes de terminar de leer el puntoanterior, puedes modificar el código i...
• 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 mod...
• 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...
• 10.i- Si lo que quieres es añadir una columna que antes has eliminado (si teestuvieras quieto en vez de estar jugueteand...
• 12.b- Si estás en modo de diseño, pulsa en la ficha Código y ve a la parteen la que está la etiqueta <Columns> del contr...
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...
• 16.b- Pulsa en la primera opción: Formato automático...• 16.c- Te mostrará un cuadro de diálogo con los diferentes forma...
2005, puedes agregar a cada una de las páginas un control HyperLink para que alpulsarlo se vaya a la página principal (Def...
• 1- Abre el proyecto vwdTut01.• 2- Añade un nuevo WebForm (ya sabes los pasos).• 2.a- El nombre será ModificarUsuario.asp...
• 5.d- En Visual Basic esto no suele ocurrir, ya que si tenemos el códigoseparado del diseño (se usa un fichero aparte par...
sabremos que clave es... porque recuerda que si solo conocemos el valorSHA1 será imposible saber que clave era... y como m...
• 10.c- Pon el ratón encima de la segunda columna y pulsa en la flechita esa,de esa forma se seleccionarán todas las colum...
{// Generar la clave SHA1 a partir de lo que haya en txtClave// y asignar nuevamente a ese mismo textBox el resultadostrin...
• 14.d- Vale... pero primero te muestro el código para hacerlo de formanormal.• 15- En el formulario ModificarUsario.aspx,...
Mostramos los datos que estarán en la primera fila de la tabla, ya que solo debería haber un solo usuario con ese correoMe...
// Si la tabla no tiene filas, es que no existe ese usuarioif (tabla.Rows.Count == 0){// Avisamos y salimosthis.lblAviso.T...
• 17.a- En ese caso, cuando solo quieras mostrar los datos, tendrás querellenar los controles que se validan.• 18- ¿Quiere...
@Correo nvarchar(64)ASSELECT Correo, Clave, Nombre, Fecha, ComentariosFROM dbo.UsuariosWHERE Correo = @CorreoRETURN• 20.f-...
• 21.e- Cuando no asignamos el valor StoredProcedure a la propiedadCommandType, el valor que tiene es Text, que es el pred...
cmd.Parameters.AddWithValue("@Correo", txtCorreo.Text) Si devuelve cero, es que no existeDim i As Integeri = CInt(cmd.Exec...
Al salir del bloque Using se cierra la conexiónEnd UsingMe.lblAviso.Text = "Se han actualizado los datos correctamente"End...
cmd = new SqlCommand(this.SqlDataSource1.UpdateCommand, cnn);// Añadimos el valor del parámetro de la consultacmd.Paramete...
Y esto es todo, creo que con lo explicado en estas tres partes tendrás una pequeñaidea de cómo manejar los datos en un sit...
Upcoming SlideShare
Loading in …5
×

Diseño web visual basic 2005

1,096 views

Published on

Como diseñar un sitio WEB en Visual Basic

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,096
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
18
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Diseño web visual basic 2005

  1. 1. IntroducciónEn esta primera parte del tutorial de cómo utilizar bases de datos en un sitio Webusando Visual Web Developer 2005 Express, vas a ver cómo crear un proyectoWeb, crear una base de datos de SQL Server 2005 desde el IDE del Visual WebDeveloper (VWD), añadir controles a una página Web ASPX, añadir controles devalidación, comprobar si un usuario ya está en la base de datos, y en caso de queno esté, añadirlo.Nota:El código mostrado aquí es para Visual Basic 2005, pero más abajo tieneslos links para el código completo, tanto para Visual Basic como para C#.Ejemplo paso a paso• 0- Abre el Visual Studio 2005 (o el Visual Web Developer 2005 Express)• 1- Crea un nuevo proyecto ASP.NET (vwdTut01)• 1.a- Elege el lenguaje a usar para el código de forma predeterminada• 2- Añade un nuevo elemento• 2.a- Elige Base de datos de SQL Server y dale el nombre vwdTut01.mdf• 2.b- Nos avisa de que la base de datos debe estar en la carpeta App_Data,acepta• 3- Crea una tabla (debes mostrar la ficha Explorador de bases de datos)• 3.a- Usa estos campos:o 3.b- ID, int, Identidado 3.c- Correo, nvarchar(64)o 3.d- Clave, nvarchar(40)o 3.e- Nombre, nvarchar(50)o 3.f- Fecha, datetimeo 3.g- Comentarios, nvarchar(300)
  2. 2. • 3.h- Dale a guardar y ponle el nombre Usuarios• 4- Ahora te explico cómo crear el formulario de introducción de datos.• 4.a- En el menú Sitio Web selecciona Agregar nuevo elemento• 4.b- Selecciona WebForms y dale el nombre AgregarUsuario.aspx• 4.c- El lenguaje será el indicado al principio, pero lo puedes cambiar (yodejo Visual Basic)• 4.d- Marca la casilla Colocar el código en un archivo independientepara que se separe el diseño del formulario del código que vamos a escribir.• 5- Ahora vamos a añadir una tabla, para que queden alineado los textos ylas cajas de textos• 5.a- En el menú Diseño seleccionar Insertar tabla• 5.b- En el cuadro de diálogo de insertar tabla, selecciona:3 filas y 2 columnas, ancho 90%, Alinear: center, Atributos: borde: 1,Espaciado celdas: 4• 6- En la tabla recién creada, añade una etiqueta en la primera columna, untextBox en la segunda columna• 7- Queremos que estén alineadas a la izquierda y arriba• 7.a- Selecciona la celda (pulsando en la flecha que sale al pasar el ratón)• 7.b- En la ventana de propiedades, en align selecciona left y en VAlignselecciona top• 8- Selecciona esa fila y pulsa en Copiar de la barra de herramientas• 8.a- Ahora, al pulsar en el botón Pegar y se añadirá una nueva fila con loscontroles• 8.b- Selecciona la siguiente fila (la vacía) y pulsa en pegar• 8.c- Repite los pasos anteriores hasta que tengas 4 filas con los controles• 9- Añade un botón en la siguiente fila
  3. 3. • 9.a- Selecciona la fila del botón• 9.b- En el menú Diseño selecciona Combinar celda• 9.c- De esa forma, esa columna ocupará toda la fila• 10- En la última fila, añade una etiqueta• 10.a- Selecciona esa última fila para que ocupe las dos columnas, ya sabes:• 10.b- En el menú Diseño, selecciona Combinar celda• 11- Selecciona esa etiqueta y en la ventana de propiedades busca lapropiedad Width y escribe 100% para que ocupe todo el ancho.• 12- Cambia el texto de las 4 primeras etiquetas para que muestre: Correo,Clave, Nombre y Comentarios• 13- Como puede ser que no interese que se vea la clave escrita, seleccionala segunda caja de textos• 13.a- En la ventana de propiedades, en la propiedad TextMode seleccionaPassword• 14- Selecciona la última caja de textos, te digo lo que hay que hacer paraque tenga más espacio para escribir• 14.a- En la ventana de propiedades, en la propiedad TextMode seleccionaMultiline• 14.b- En la propiedad Rows escribe 4 y en Columns escribe 60• 15- Selecciona el botón y en el texto escribe Nuevo usuario• 16- Lo correcto es que los controles tengan nombres que indiquen para queson• 16.a- Siguiendo el orden de arriba abajo, a las cajas de texto dale estosnombres:
  4. 4. o 16.b- txtCorreo, txtClave, txtNombre y txtComentarios• 17- Al botón dale el nombre btnNuevo• 18- A la etiqueta del final, dale el nombre lblAviso, el resto déjalas con elnombre que tienen ya que no las usaremos desde el código y da igual elnombre, pero si quieres, le puedes dar el nombre que te apetezca, aunqueya puestos, podría ser como el de la caja de textos que tienen al lado, peroen lugar de txt puedes usar lbl.• 19- Ahora vamos a darle funcionalidad al botón, de forma que al pulsar en élse cree un nuevo usuario con los datos que tenemos• 19.a- Como queremos que las cosas se hagan bien, después añadiremosvalidadores para que se escriba lo que haya que escribir• 19.b- Haz dobleclic en el botón para que se muestre la ventana de código• 19.c- El código se habrá mostrado en un fichero aparte con el mismonombre que la página y con la extensión del lenguaje que has elegido, en micaso es: AgregarUsuario.aspx.vb• 19.d- Antes de hacer nada te explico que es lo que habría que hacer paraañadir correctamente los datos.• 20- No debemos admitir ninguna de las cajas en blanco, salvo la decomentarios (ahora veremos como)• 21- La fecha la podremos nosotros de forma automática, para que tenga lafecha actual• 21.a- Para que se muestre la fecha, deberíamos agregar una nueva fila, porejemplo, entre el nombre y los comentarios• 21.b- Selecciona la fila del nombre y pulsa en copiar• 21.c- Selecciona la fila de los comentarios y pulsa en pegar, se insertara unanueva fila
  5. 5. • 21.d- Cambia el texto de la etiqueta a Fecha y el nombre de la caja detextos a txtFecha• 21.e- Como la fecha es de solo lectura, selecciona la caja de textos y en laspropiedades, asigna el valor True a la propiedad ReadOnly• 21.f- Para que se vea de otro color, en las propiedades, seleccionaBackColor y en el cuadro de propiedades que te muestra, selecciona laficha Web y el color WhiteSmoke• 22- Otra cosa a hacer es que si ese correo ya existe, que diga que no esválido• 23- Pero antes de hacer nada, necesitamos crear la conexión a la base dedatos• 24- Con el Visual Web Developer Express y el SQL Express la forma masfácil de crear una conexión a la base que hemos creado es haciendo losiguiente: (a lo mejor hay otra forma mejor, pero... esto me funcionasiempre)• 24.a- Muestra la página de agregar usuario en modo diseño• 24.b- En el explorador de bases de datos, arrastra la tabla de Usuarios a lapágina• 24.c- Esto creará un GridView y un control DataSource, el GridView lovamos a borrar• 24.d- Selecciona solo el GridView y pulsa la tecla suprimir, pulsa antes encualquier parte de la página y después selecciona el grid• 24.e- Ahora tendrás un control llamado SqlDataSource1 que tendrá todoslos comandos para insertar, eliminar, actualizar, etc.• 24.f- También se habrá creado el fichero web.config con los datos deconexión a la base de datos• 25- Vamos a añadir controles de validación para que el usuario tenga queescribir algo en ellos
  6. 6. • 25.a- Muestra la página en modo de diseño y del Cuadro deherramientas, selecciona el grupo Validación• 25.b- Arrastra un control RequiredFieldValidator y déjalo al lado deltextBox del correo• 25.c- Seguramente se pondrá debajo de la caja de textos, posiciónate justodelante del control de validación y borra (con la tecla backspace) el espacioque habrá, para que quede pegado al textBox, después puedes pulsar unespacio para que haya algo de separación• 25.d- Añade otro al lado de la caja de textos de la clave y otro al lado deltextBox del nombre• 25.e- Para la fecha y los comentarios no hace falta añadir ninguno• 26- Como queremos que la cuenta de correos sea valida, vamos a añadir uncontrol de validación de expresiones regulares junto al textBox delcorreo (detrás del validador que ya había)• 26.a- En la ventana de propiedades, selecciona la propiedadValidationExpression y pulsa en el botón• 26.b- Del cuadro de dialogo selecciona Dirección de correo electrónicode Internet y pulsa en aceptar• 27- Ahora vamos a enlazar esos controles de validación con las cajas detexto correspondientes• 27.a- Selecciona el primer RequiredFieldValidator (Correo) y busca lapropiedad ControlToValidate y de la lista desplegable que te mostrará,selecciona txtCorreo• 27.b- Haz lo mismo con el control RegularExpressionValidator (el de laexpresiones regulares)• 27.c- Ahora el de la clave y después el del nombre, seleccionando loscontroles correspondientes en la propiedad ControlToValidate• 27.d- Puedes cambiar el mensaje de aviso de cada uno de los controles devalidación, con idea de que si, por ejemplo, no se escribe nada en la clavediga que debe escribir algo... La propiedad que debes asignar es
  7. 7. ErrorMessage.• 28- Si queremos que la clave tenga un mínimo de caracteres, podemosagregar un control CustomValidator, indica que control se debe validar,escribe el texto del mensaje de error, por ejemplo: Debes escribir más de5 caracteres• 28.a- Haz dobleclic en el control de validación y en el evento que se crea enel fichero de código, escribe lo siguiente: (args es el nombre del segundoparámetro)args.IsValid = (args.Value.Length > 5)• 28.b - Esto hará que se compruebe que no este vacío y que tenga más de 5caracteres• 29- Si en lugar de hacer la validación en el servidor, quieres hacerla en ellado del cliente, tendrás que crear un código Script en la pagina con estecódigo:<script type="text/javascript">function comprobarClave(oSrc, args){args.IsValid = (args.Value.length > 5);}</script>• 29.a- Selecciona el control y en la propiedad ClientValidationFunctionescribe el nombre de la función, en este caso comprobarClave.• 30- Como los controles de validación se empeñan en ponerse como les da lagana, si quieres, puedes poner todos esos controles de validación en la parteinferior de la tabla, aunque en el caso de que, por ejemplo, el usuario pulseen el botón sin haber escrito nada, le mostrará todos los mensajes de error,por tanto, esos mensajes deberían decir lo que queremos que haga elusuario, es decir, no lo dejes con el texto predeterminado.
  8. 8. • 31- Antes de seguir, decirte que si la caja de textos está en modoPassword, y cuando se compruebe por código si el usuario existe, etc., y secancele la creación del usuario, lo que se escriba se borrará, así que siquieres que se siga manteniendo la contraseña, debes dejarla como textonormal. En cualquier caso, mejor dejarlo como Password y si el usuario seequivoca, pues... que hubiese prestado más atención, je, je.• 32- Ahora vamos a escribir el código de validación de que el usuario noexista ya y en caso de que exista, que se cancele la inserción de datos, y sino existe, que se añada a la base de datos.• 32.a- Muestra el código del evento del botón (el que creaste en el punto 19)• 32.b- Al principio del fichero añade las importaciones de los espacios denombres que vamos a usar, en particular el System.Data.SqlClient• 32.c- Lo primero es comprobar si el usuario ya existe, por tanto vamos aejecutar la siguiente sentencia (cadena de selección):SELECT Count(*) FROM Usuarios WHERE Correo = @Correo• 32.d- Esto hará que se compruebe en la tabla de Usuarios si el correoescrito ya está, el truco es que si esas instrucciones devuelven algún valorque no sea cero, es que ya hay una cuenta de correo como la quebuscamos.• 32.e- Para ejecutar esa sentencia de SQL vamos a usar un objetoSqlConnection y un objeto SqlCommand• 32.f- Para el objeto Connection necesitas la cadena de conexión, y como yatenemos en el formulario (pagina Web) un objeto SqlDataSource, pues latomamos de ahí.• 32.g- Este es el código para comprobar si el usuario ya existe, verás que usouna instrucción Using para controlar la conexión, de esa forma, si nossalimos nos aseguramos de que el objeto se destruye y se cierra laconexión, ya que esa instrucción se encarga de liberar todos los recursosque estuviera usando al llegar al final del bloque, en Visual Basic, será alllegar a End Using.
  9. 9. Comprobamos si el nombre ya existeUsing cnn As New SqlConnection(Me.SqlDataSource1.ConnectionString)Dim cmd As New SqlCommand( _"SELECT Count(*) " & _"FROM Usuarios " & _"WHERE Correo = @Correo", cnn) Abrimos la conexióncnn.Open() Añadimos el valor del parámetro de la consultacmd.Parameters.AddWithValue("@Correo", txtCorreo.Text) Si devuelve algún valor, es que ya existeDim i As Integeri = CInt(cmd.ExecuteScalar())If i > 0 Then Avisamos y salimosMe.lblAviso.Text = "El usuario ya existe"Exit SubEnd If Al salir del bloque Using se cierra la conexiónEnd Using• 32.h- El parámetro @Correo lo asignamos usando el métodoAddWithValue que es la forma más cómoda de crear los parámetros altiempo que se le asigna el valor que tendrá.• 32.i- Al llamar al método ExecuteScalar del comando, le estamos diciendoque devuelva la primera columna de la primera fila, y como resulta que loque queremos es el número de veces que esté en la tabla Usuarios esacuenta de correo, pues si ya está una vez, devolverá un 1, si no estádevolverá un cero. El valor que devuelve esa función es de tipo Object, yaque en realidad el tipo devuelto depende de lo que pongamos después deSELECT, en este caso es un valor entero, que es lo que devuelve la funciónCount(*).• 32.j- Si lo que devuelve es mayor de cero, es que hay algún correo como elque se ha escrito, por tanto mostramos el mensaje de error y salimos delmétodo.• 33- Si se continúa, es decir, se llega después del End Using, es que noexiste esa cuenta de correo, por tanto debemos agregar los datos.
  10. 10. • 33.a- Ahora debemos hacer casi lo mismo de antes, pero ejecutando elcomando Insert, el cual también lo tomaremos del objetoSqlDataSource1.• 33.b- Aunque antes de guardar nada en la base de datos debemos asignarlos valores de los parámetros, que si te fijas en el código de la página, esosparámetros se llaman igual que los campos, pero empezando con la arroba(@).• 33.c- Otra cosa que debemos hacer es convertir el password (la clave) en unvalor SHA1. Esto es para no guardar la clave como un texto en la base dedatos, de esa forma, el que vea los datos que hay no sabrá cual es la clavede cada usuario. Ese valor SHA1 lo podemos crear usando un objeto de tipoSHA1CryptoServiceProvider o bien usar la funciónHashPasswordForStoringInConfigFile de la claseFormsAuthentication, que es lo que normalmente haremos en una paginaWeb, ya que así nos evitamos tener que crear nuestro propio código. Detodas formas, en el código completo, he añadido la función para crear esevalor SHA1, por si quieres ver como hacerlo, por ejemplo para unaaplicación de Windows.• 33.d- Una vez que tenemos todo esto, lo juntamos y lo mezclamos bien...je, je, mejor es que veas el código para que lo tengas más claro: El usuario no existe, lo añadimosUsing cnn As New SqlConnection(Me.SqlDataSource1.ConnectionString) Usamos el comando Insert del DataSourceDim cmd As New SqlCommand(Me.SqlDataSource1.InsertCommand, cnn) Abrimos la conexióncnn.Open() Añadimos el valor del parámetro de la consultacmd.Parameters.AddWithValue("@Correo", txtCorreo.Text) La clave la guardaremos como un valor SHA1Dim clave As Stringclave =FormsAuthentication.HashPasswordForStoringInConfigFile(txtClave.Text,"SHA1")clave = generarClaveSHA1(txtClave.Text)
  11. 11. cmd.Parameters.AddWithValue("@Clave", clave) La fecha a guardar es la actualtxtFecha.Text = DateTime.Now.ToString()cmd.Parameters.AddWithValue("@Fecha", txtFecha.Text)cmd.Parameters.AddWithValue("@Nombre", txtNombre.Text)cmd.Parameters.AddWithValue("@Comentarios", txtComentarios.Text) Ejecutamos el comando de insercióncmd.ExecuteNonQuery() Al salir del bloque Using se cierra la conexiónEnd UsingMe.lblAviso.Text = "Se ha añadido el nuevo usuario correctamente"• 34- Ya lo único que nos queda es poner en la pagina principal(Default.aspx) un link para que podamos entrar a la página de crearnuevos usuarios. En esa misma página crearemos links para otrasfuncionalidades, por ejemplo, modificar un dato o ver los datos quetenemos, etc.• 34.a- Muestra la página Default.aspx en modo diseño y del Cuadro deherramientas añade un control HyperLink, en la propiedad Text escribeAñadir usuario y en la propiedad NavigateUrl pulsa en el botón con lospuntos suspensivos para que puedas seleccionar la página a la que quieresque navegue cuando se pulse en el link, en este caso la página que debesseleccionar del cuadro de diálogo que te muestra es AgregarUsuario.aspx• 35- Vamos a probar que todo funciona, pero antes, en el explorador desoluciones, selecciona la página Default.aspx y pulsando con el botónderecho, selecciona del menú contextual la opción Establecer comopágina de inicio, de esta forma, cada vez que pulses F5 se iniciara con esapágina, si no haces esto que te acabo de comentar, cuando pulses F5 seiniciara por la página que en ese momento esté seleccionada.• 36- Una vez que esté en ejecución, prueba a no escribir nada en las cajas detexto y pulsa en el botón, verás que salen los mensajes de aviso. Siguehaciendo pruebas de validación, por ejemplo no escribas bien el correo,
  12. 12. escribe menos de 6 caracteres en la clave, etc.• 37- Una vez que hayas probado que las validaciones funcionan, introduce unusuario (o varios) y después intenta introducir uno que ya exista, para queveas que se muestra el mensaje de error y esas cosas.Bueno, pues con esto ya tienes para entretenerte un rato.En la próxima parte veremos cómo modificar los datos y cómo mostrar los quehay.Esto último lo haremos de forma automática, usando un GridView y de formamanual, para que podamos navegar entre los datos y se muestren uno a uno, etc.IntroducciónEn esta segunda parte del tutorial de cómo utilizar bases de datos en un sitio Webusando Visual Web Developer 2005 Express, te explicaré cómo mostrar en uncontrol GridView todos los datos que tenga la tabla de usuarios. Cuando hayamuchos datos, será conveniente que se muestren poco a poco, aquí te explicocómo paginar los datos en el control, además de permitir la clasificación por losdistintos campos que se muestran.Nota:Como este ejemplo no necesita ni una sola línea de código, solo te muestrolo que hay aquí, pero verás que es muy fácil de crear la página para quemuestre los datos en el GridView y que no hace falta que te muestre nadamás.Estos son los pasos para completar esta segundaparte 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, seleccionaWebForms y dale el nombre MostrarUsuarios.aspx• 2.c- Como en este primer caso no vamos a escribir ni una línea de código, siquieres, quita la casilla que hay junto a Colocar el código en un archivo
  13. 13. independiente.• 3- Si ya le habías dado a Aceptar antes de terminar de leer el puntoanterior, puedes modificar el código interno de ese fichero para que no useun fichero de código por separado.• 3.a- Muestra el fichero, y pulsa en la ficha Código para que se muestre elcódigo HTML de la página.• 3.b- En la parte superior, deja solo <%@ Page Language="VB" %> (si estásusando C#, en vez de VB, pues pondrá C#)• 3.c- Elimina el fichero extra que tendrá el mismo nombre de la página, perocon la extensión del lenguaje que hayas elegido, por ejemplo, si has usadoVisual Basic, ese fichero se llamará MostrarUsuarios.aspx.vb• 3.d- Seguramente en la página .aspx habrá un bloque para escribir elcó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 temostré en el punto 24 de la parte anterior. Te lo explico de nuevo para queno 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ónvwdTut01.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 unSqlDataSource
  14. 14. • 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 dediseñ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 Webtengas que pulsar en la ficha Explorador de soluciones, ya que en elVisual Web Developer 2005 Express, la ficha del Explorador de bases dedatos suele estar en el mismo grupo de ventanas que el explorador desoluciones.• 6- Arrastra un control HyperLink a la página (se pondrá debajo del que yahabía)• 6.a- Selecciona ese control, y en la ventana de propiedades, asigna lacadena Mostrar todos los usuarios a la propiedad Text• 6.b- En la propiedad NavigateUrl tendrás que pulsar en el botoncito ese delos 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 estecaso, 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, semostrará la página Default.aspx, si no se muestra esa página y se muestraotra, ya sabes lo que tienes que hacer para que la página Default.aspx seala página de inicio.• 7.b- Recuerda que si no indicas la página que se usará como inicio, al pulsarF5, la página que se mostrará será la que en ese momento estéseleccionada... y de casualidad, puede que sea Default.aspx, pero... paraque 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 datosque tienes en la tabla de Usuarios.
  15. 15. • 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áginaMostrarUsuarios.aspx en modo de diseño.• 10- Quitar columnas del GridView, método 1: Modificando el origende datos.• 10.a- Selecciona el control GridView y pulsa en la flecha que tiene en laparte superior derecha para que se muestre la ventana de Tareas deGridView.• 10.b- De las opciones que te da, puedes elegir Configurar origen dedatos... 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 listadesplegable 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 usadapara seleccionar los datos ya no muestra el campo Clave) y pulsa enSiguiente.• 10.e- En la siguiente pantalla pulsa en Finalizar.• 10.f- Te mostrará un mensaje de advertencia diciéndote que si quiereseliminar los campos del GridView bla, bla, bla. Dile que NO (es decir, pulsaen el botón No).• 10.g- Si pulsas en el botón Si, parecerá que todo está bien, pero al mostrarla ventana, (ejecutando la aplicación y mostrando todos los datos), verásque 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 incluyaese campo.
  16. 16. • 10.i- Si lo que quieres es añadir una columna que antes has eliminado (si teestuvieras 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... ¡noverás los datos!• 10.k- Si te ocurre eso de que no se ven lo datos, lo mejor es eliminar elGridView 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 ypulsa en el botón con la X roja para borrarla.• 11.e- NO marques la casilla esa que dice Generar camposautomáticamente, ya que te mostrará dos veces las columnas, además deque se incluirán todos los campos de la tabla (además de los que yaestaban, 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 losdatos 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 DataSourcesigue estando el campo Clave, incluso en el comando Select, pero como noestá "boundado" (¿existe ese palabro? lo que el Guille quiere decir, es queno 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ódigoHTML 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
  17. 17. • 12.b- Si estás en modo de diseño, pulsa en la ficha Código y ve a la parteen 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 quieresquitar, es decir, la que empieza con: <asp:BoundFieldDataField="Clave", y bórrala.• 12.d- Para que veas que ya está lo que pretendíamos, pulsa F5 y muestralos datos.• 12.e- Simple, ¿verdad? Pues eso...• 13- Como resulta que esta ventana solo la vamos a usar para mostrar losdatos, ¿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 elorigen de datos, pero mejor es que elimines el código que se genera en lapágina, así vamos a "tiro fijo" ;-)))• 13.b- Bueno, vale... ahora te explico cómo hacerlo con el asistente... ¡es queno me puedo negar a lo que me pides! ;-)))• 13.c- Para eliminar los comandos de forma manual, en el código de lapá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 últimoUpdateCommand.• 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, porejemplo: 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 seque tu te enteras, pero...)• 13.d- OJO al borrar el DeleteCommand (el último antes de losparámetros), ya que suele tener el carácter > de cierre, y si lo borras, te
  18. 18. 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 quedeel comando Select.• 14.a- Si has estado haciendo lo que te comenté en el paso anterior, puedesborrar el GridView y el SqlDataSource y agrega nuevamente la tabla deUsuarios para que esté todo como en un principio.• 14.b- Bien, si ya tienes otra vez todo como estaba originalmente (semostrará la columna Clave), haz que se muestre la página en modo dediseñ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ónAvanzadas... (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ónGenerar instrucciones Insert, Update y Delete y pulsa en Aceptar.• 14.g- Pulsa en Siguiente y después en Finalizar, si te muestra el aviso eseque 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 comandoSelect, pero que en los campos enlazados está la clave, así que... borra esalínea (ver el punto 12).• 14.i- Pulsa la tecla F5 para comprobar que todo está bien y no se muestra elcampo Clave.Mejorar el aspecto del GridView• 15- Ahora vamos a juguetear un poco con el control GridView para cambiarel 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 botoncitoese de arriba (para ver las Tareas de GridView)
  19. 19. • 16.b- Pulsa en la primera opción: Formato automático...• 16.c- Te mostrará un cuadro de diálogo con los diferentes formatos quepuedes usar, elige uno, por ejemplo: Clásica.• 16.d- Verás que el aspecto del grid ha cambiado, y que se ha añadido elcódigo necesario para que se vea de esa forma, pero esto último es lo demenos.• 17- Ahora vamos a permitir la paginación, para que de esta forma, semuestre cada vez un número determinado de usuarios, ya que si no sepagina, se mostrarán todos los datos de una vez...• 17.a- Muestra las Tareas de GridView y marca la casilla Habilitarpaginació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, puedescambiar el valor de la propiedad PageSize por el número de datos quequieras mostrar en cada página.• 17.c- Esa propiedad está accesible en modo de diseño, además de poderasignarlo desde el código.• 18- Si quieres que se puedan mostrar los datos ordenados por cualquiera delos campos, selecciona la opción Habilitar ordenacion (de las Tareas deGridView)• 18.a- En el caso de las fechas, las ordenará como cadenas (o eso meparece, pero creo que ni como cadenas... en fin...), así que no te asustes sives que no están "correctamente" ordenadas.• 19- Si marcas la casilla Habilitar selección, decirte que... bueno... solosirve para seleccionar una fila, pero nada más.Y con esto y un bizcocho... pues eso, que ya tienes tarea para mostrar las cosasque 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
  20. 20. 2005, puedes agregar a cada una de las páginas un control HyperLink para que alpulsarlo se vaya a la página principal (Default.aspx).Cambiar de lenguaje en una páginaAntes de irme, una cosilla que me ha pasado mientras escribía el tutorial y hacíalas pruebas que te iba a explicar:Si añades una página .aspx (sin crear el fichero de separación del código o conseparación, si después lo borras) y el lenguaje que tienes seleccionado al añadirlaes, por ejemplo Visual Basic, y después decides que no, que debe ser C#, quesepas que no solo basta con cambiar el lenguaje en el atributo Language de lapágina (Page), ya que el VWD crea una clase parcial con ciertas cosas quenecesita, pero que no nos muestra, y esa clase parcial la crea con el lenguajeindicado 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 delprincipio de la página lo tendrás marcado como erróneo, pero sin decirte niMÚ... ;-)))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, porejemplo, al añadir el GridView, que aunque nosotros no tengamos que escribirnada, el ASP.NET 2.0 si que lo hace...IntroducciónEn esta tercera parte del tutorial de cómo utilizar bases de datos en un sitio Webusando Visual Web Developer 2005 Express, vas a ver cómo buscar usuariossabiendo la cuenta de correo, también actualizaremos los datos de un usuarioexistente.Como "extra", te muestro cómo averiguar el valor SHA1 de un texto y cómo definiry usar un procedimiento almacenado de SQL Server para buscar el usuario segúnla cuenta de correo.Nota:En esta ocasión, el código mostrado en el propio artículo es tanto paraVisual Basic 2005 como para C#, (para que nadie se queje), pero másabajo tienes los links para el código completo, tanto de la página ASPXcomo para el código de Visual Basic y de C#.Estos son los pasos para completar esta tercera partedel tutorial:
  21. 21. • 1- Abre el proyecto vwdTut01.• 2- Añade un nuevo WebForm (ya sabes los pasos).• 2.a- El nombre será ModificarUsuario.aspx, dile que el código lo ponga enun fichero aparte.• 3- Como el formulario de modificar los datos será casi igual que el deintroducir nuevos datos, vamos a copiar el que ya tenemos y después leharemos los cambios necesarios para darle la funcionalidad que queremosque tenga.• 3.a- Abre la página AgregarUsuario.aspx en modo de Código, ya quevamos a copiar todo el código HTML para pegarlo en la página que acabasde crear en el punto 2.• 3.b- Selecciona desde la etiqueta <body> hasta el final, lo copias y lopegas en la página nueva.• 3.c- Por supuesto, al pegar, debes hacerlo desde <body> hasta el final,pero esto supongo que ya te lo imaginabas.• 4- Ahora lo que hay que hacer es añadir un nuevo control (un botón), queestará al lado de la caja de textos Correo.• 4.a- Ese botón, al que le darás el nombre btnMostrar, servirá para mostrarel usuario que quieres modificar.• 4.b- El texto a mostrar en el botón será precisamente Mostrar.• 5- Al botón que ya estaba, debes cambiarle el nombre y el texto para quesean: btnActualizar y Actualizar respectivamente.• 5.b- Si estás usando C# tendrás un pequeño problema al copiar el textoanterior y cambiarle el nombre al botón, ya que si haces dobleclic en esebotón, en la ventana de código se mostrará el método btnNuevo_Click enlugar del nombre que debería mostrarse: btnActualizar_Click.• 5.c- Esto es así porque en C# en las propiedades del botón estará asignadoel valor del atributo OnClick con el valor "btnNuevo_Click".
  22. 22. • 5.d- En Visual Basic esto no suele ocurrir, ya que si tenemos el códigoseparado del diseño (se usa un fichero aparte para el código), los métodosde los eventos se manejan con la cláusula Handles, por tanto, lo importantees que esa instrucción esté en un método para que ese método estéasociado con el evento que se indique después de Handles.• 5.e- Pero si en lugar de tener el código separado del diseño, está todo en elmismo fichero, el problema será el mismo tanto en Visual Basic como en C#.• 6- Para que en C# tenga el nombre "adecuado", lo que tienes que hacer esquitar ese atributo (OnClick) y el código que se ha añadido al hacer antesdobleclic en el botón.• 6.a- Una vez que lo has borrado, vuelve a hacer dobleclic en el botónActualizar y esta vez si que se creará el método con el nombre que debetener.¿Qué hacer para modificar un usuario?• 7- Esa es la pregunta que tenemos que hacernos ahora, en principio,escribirás la cuenta de correo del usuario a modificar, pulsarás en el botónMostrar, se mostrarán los datos del usuario si es que existe, y en caso deque no exista se avisará de ese hecho y no pasará nada.• 7.a- Una vez que tenemos los datos del usuario que queremos modificar, lospodremos modificar y al pulsar en el botón Actualizar, se guardarán losdatos en la base de datos.• 8- Ahora tenemos que plantearnos que hacemos con la clave, al menos sinuestra intención es poder cambiarla. Ya que la guardamos como un valorSHA1.• 8.a- La primera posibilidad que tenemos es introducir la clave en modo"normal" y hacer lo mismo que hicimos en la parte de introducir un nuevousuario, es decir, crear la clave SHA1 a partir del texto que introduzcamos.• 8.b- El problema es que si queremos modificar otros datos, pero dejar laclave como estaba, pues... lo tendremos complicado, ya que en realidad no
  23. 23. sabremos que clave es... porque recuerda que si solo conocemos el valorSHA1 será imposible saber que clave era... y como me imagino que no tevas a saber todas las claves de memoria, pues... habrá que hacer algo paraque no tengamos que preguntarle al usuario cual era su clave, o decirle quese la hemos cambiado.• 8.c- Si introducimos la clave directamente como un valor SHA1, ya notendremos el problema de saber que clave era, y de esa forma, si hacemosalgún cambio en cualquiera de los otros datos, no habrá problemas con laclave, ya que en esta ocasión no volveremos a generar el valor SHA1, sinoque guardaremos lo que haya en la caja de textos.• 8.d- El problema lo tendremos a la hora de introducir una nueva clave(porque queramos cambiarla), ya que tendremos que saber el valor SHA1 deesa nueva clave.• 8.e- Una solución es tener un "generador" de valores SHA1 a partir de untexto, de esa forma, si queremos cambiar una clave, escribiremos el textode la nueva clave, pulsaremos en el botón de generar el valor SHA1 y elresultado será lo que usemos para guardar en el campo Clave.• 8.f- Es decir, lo mismo (o casi) que hicimos a la hora de añadir un nuevousuario, pero sin que sea automático. Mejor te explico cómo hacerlo y así lotendrás más claro.• 9- Añade un botón junto a la caja de textos de la clave.• 9.a- Modifica las propiedades del botón para que muestre el texto Generarclave SHA1 y el nombre sea btnClaveSha1.• 10- Como el editor de formularios Web se empeña en manejar el tamaño delas celdas con valores en pixel, y para que se vea bien los 40 caracteres quetiene el valor SHA1 generado, tendremos que "engañar" al editor... o casi.• 10.a- Así que, vamos a seleccionar todas las columnas en las que están lascajas de textos y le vamos a dar un valor en porcentaje.• 10.b- Si mueves el cursor encima de la primera fila (el borde de la tabla),verás que se muestra una especie de flecha.
  24. 24. • 10.c- Pon el ratón encima de la segunda columna y pulsa en la flechita esa,de esa forma se seleccionarán todas las columnas (en realidad las columnasque están en las filas que tienen dos columnas).• 10.d- Una vez que tienes las columnas seleccionadas, en la ventana depropiedades ve a la propiedad Style, verás que pone WIDTH: 100px, borradesde los dos puntos, y escribe 80%, de forma que ahora muestre WIDTH:80%.• 10.e- Ahora selecciona el control txtClave y en la propiedad Width escribe90% (o 100%, como quieras), esto hará que la caja de texto ocupe eseporcentaje de la celda en la que está.• 11- Ahora es tiempo de escribir el código. Te explico lo que hará al pulsar enel botón de generar la clave SHA1• 11.b- Se leerá el valor que haya en txtClave, se usará para generar el valorSHA1 y se volverá a asignar a ese mismo control.• 11.c- Como en este caso queremos que se vea lo que se generará,asegúrate de que el control txtClave NO tiene el valor Password en lapropiedad TextMode, sino que tiene el valor SingleLine.• 12- Haz dobleclic en el botón de generar la clave y escribe este código:Protected Sub btnClaveSha1_Click(ByVal sender As Object, _ByVal e As System.EventArgs) _Handles btnClaveSha1.Click Generar la clave SHA1 a partir de lo que haya en txtClave y asignar nuevamente a ese mismo textBox el resultadoDim clave As Stringclave = FormsAuthentication.HashPasswordForStoringInConfigFile( _txtClave.Text, "SHA1")txtClave.Text = claveEnd Sub• 12.a- El código para C# es el siguiente:protected void btnGenerarClaveSha1_Click(object sender, EventArgs e)
  25. 25. {// Generar la clave SHA1 a partir de lo que haya en txtClave// y asignar nuevamente a ese mismo textBox el resultadostring clave;clave = FormsAuthentication.HashPasswordForStoringInConfigFile(txtClave.Text, "SHA1");txtClave.Text = clave;}• 13- Prueba esto que acabas de hacer, pero para que se pueda "navegar" aesta nueva página, tendrás que añadir un nuevo control HyperLink en lapágina Default.aspx para que vayas a esta nueva página al pulsar en él.• 13.a- Para probar, escribe una clave y pulsa en el botón Generar claveSHA1 y verás que se muestra el valor que le corresponde al texto que hasescrito, por ejemplo, para el valor 123456, el valor de SHA1 será:7C4A8D09CA3762AF61E59520943DC26494F8941B.• 13.b- Por supuesto, para hacer esa prueba, debes escribir una cuenta decorreo y un nombre, ya que al tener los validadores, pues... nos avisará deque esos campos deben tener algo.Mostrar los datos de un usuario• 14- Ahora le toca al código del botón Mostrar, en ese botón vamos acomprobar si el correo indicado está en la tabla, y en caso de que así sea,mostraremos los datos en las cajas de texto que correspondan.• 14.a- Para leer los datos, usaremos un objeto SqlConnection, un objetoSqlCommand con la cadena de selección para recuperar todos los datos delusuario que tenga la cuenta de correo que indiquemos. Para poder acceder aesos datos devueltos por la consulta, usaremos un objeto SqlDataAdaptery un objeto DataTable.• 14.b- En realidad no nos hacen falta ni el objeto para la conexión ni elcomando, ya que lo podríamos hacer todo con el adaptador, pero así podrásver otra forma de acceder a los datos, ya que te será útil si, por ejemplousas un procedimiento almacenado (stored procedure) para hacer esacomprobación.• 14.c- ¿Que dices? ¿Quieres que usemos un procedimiento almacenado?
  26. 26. • 14.d- Vale... pero primero te muestro el código para hacerlo de formanormal.• 15- En el formulario ModificarUsario.aspx, pulsa en el botón Mostrar yescribe lo siguiente:15.a- Primero en Visual Basic:Protected Sub btnMostrar_Click(ByVal sender As Object, _ByVal e As System.EventArgs) _Handles btnMostrar.ClickMe.lblAviso.Text = "" Comprobamos si el nombre ya existeUsing cnn As New SqlConnection(Me.SqlDataSource1.ConnectionString) La cadena de slección será la que tenga el DataSource, pero buscando el correo que hemos escritoDim sel As Stringsel = Me.SqlDataSource1.SelectCommand & _" WHERE Correo = @Correo"Dim cmd As New SqlCommand(sel, cnn) Abrimos la conexióncnn.Open() Añadimos el valor del parámetro de la consultacmd.Parameters.AddWithValue("@Correo", txtCorreo.Text) El resultado lo guardaremos en una tablaDim tabla As New DataTable Usaremos un DataAdapter para leer los datosDim da As New SqlDataAdapter(cmd) Llenamos la tabla con los datos leídosda.Fill(tabla) Si la tabla no tiene filas, es que no existe ese usuarioIf tabla.Rows.Count = 0 Then Avisamos y salimosMe.lblAviso.Text = "El usuario NO existe"Exit SubEnd If
  27. 27. Mostramos los datos que estarán en la primera fila de la tabla, ya que solo debería haber un solo usuario con ese correoMe.txtClave.Text = tabla.Rows(0)("Clave").ToStringMe.txtFecha.Text = tabla.Rows(0)("Fecha").ToStringMe.txtNombre.Text = tabla.Rows(0)("Nombre").ToStringMe.txtComentarios.Text = tabla.Rows(0)("Comentarios").ToStringMe.lblAviso.Text = "El usuario existe y se han leído los datos." Al salir del bloque Using se cierra la conexiónEnd UsingEnd Sub• 15.b- Ahora el código de C#:protected void btnMostrar_Click(object sender, EventArgs e){this.lblAviso.Text = "";//// Comprobamos si el nombre ya existeusing (SqlConnection cnn = new SqlConnection(this.SqlDataSource1.Connec{// La cadena de slección será la que tenga el DataSource,// pero buscando el correo que hemos escritostring sel;sel = this.SqlDataSource1.SelectCommand +" WHERE Correo = @Correo";SqlCommand cmd = new SqlCommand(sel, cnn);// Abrimos la conexióncnn.Open();// Añadimos el valor del parámetro de la consultacmd.Parameters.AddWithValue("@Correo", txtCorreo.Text);// El resultado lo guardaremos en una tablaDataTable tabla = new DataTable();// Usaremos un DataAdapter para leer los datosSqlDataAdapter da = new SqlDataAdapter(cmd);// Llenamos la tabla con los datos leídosda.Fill(tabla);
  28. 28. // Si la tabla no tiene filas, es que no existe ese usuarioif (tabla.Rows.Count == 0){// Avisamos y salimosthis.lblAviso.Text = "El usuario NO existe";return;}// Mostramos los datos// que estarán en la primera fila de la tabla,// ya que solo debería haber un solo usuario con ese correothis.txtClave.Text = tabla.Rows[0]["Clave"].ToString();this.txtFecha.Text = tabla.Rows[0]["Fecha"].ToString();this.txtNombre.Text = tabla.Rows[0]["Nombre"].ToString();this.txtComentarios.Text = tabla.Rows[0]["Comentarios"].ToString();this.lblAviso.Text = "El usuario existe y se han leído los datos.";// Al salir del bloque Using se cierra la conexión}}• 15.c- Acuérdate de añadir las importaciones para System.Data ySystem.Data.SqlClient• 16- Si quieres probar esto... pruébalo, pero antes de ir a probarlo, deberíasleer lo que te voy a decir...• 16.a- Tal como está el código de esta página, si no escribes nada en la claveni en el nombre, te mostrará el mensaje de error y no te dejará hacer nada.• 16.b- Así que, lo mejor será que quitemos los controles de validación, almenos los de la clave y los del nombre.• 16.c- Pero al hacer eso, tenemos el problema de que nos olvidemos deescribir algo en esas cajas de texto, y... bueno... que no podemos tenerlotodo, así que... tienes que decidir que quieres hacer...• 17- ¿Quieres dejar los controles de validación?
  29. 29. • 17.a- En ese caso, cuando solo quieras mostrar los datos, tendrás querellenar los controles que se validan.• 18- ¿Quieres quitar los controles de validación?• 18.a- En ese caso, si modificas y borras el contenido de la clave o delnombre, pues no habrá nadie que te avise.• 19- Mejor quita los controles de validación que controlan la clave y elnombre. Pero puedes hacer lo que quieras.• 19.a- Si quitas los controles de validación, al menos deja los dos que validanla cuenta de correo.Crear un procedimiento almacenado• 20- Ahora vamos a añadir un procedimiento almacenado a la base de datos.• 20.a- Muestra la ventana del Explorador de bases de datos.• 20.b- Si es preciso, expande la conexión de la base vwdTut01.mdf.• 20.c- En la carpeta Procedimientos almacenados, pulsa con el botón derechodel ratón y selecciona Agregar nuevo procedimiento almacenado.• 20.d- Se abrirá una nueva ventana en la que podemos escribir el código deese procedimiento almacenado, inicialmente tendrá este código:CREATE PROCEDURE dbo.StoredProcedure1/*(@parameter1 int = 5,@parameter2 datatype OUTPUT)*/AS/* SET NOCOUNT ON */RETURN• 20.e- Sustitúyelo por este otro y pulsa en el botón guardar.ALTER PROCEDURE dbo.MostrarUsuario
  30. 30. @Correo nvarchar(64)ASSELECT Correo, Clave, Nombre, Fecha, ComentariosFROM dbo.UsuariosWHERE Correo = @CorreoRETURN• 20.f- Este procedimiento almacenado hace lo mismo que en el códigoanterior (punto 15)• 21- Ahora solo falta cambiar el código del objeto SqlCommand para queuse este procedimiento almacenado.• 21.a- En el código del método del botón mostrar, sustituye el código de ladeclaración del comando (y el de la variable sel) y pon este para VisualBasic: Usando un procedimiento almacenadoDim cmd As New SqlCommand()cmd.CommandText = "MostrarUsuario"cmd.CommandType = CommandType.StoredProcedurecmd.Connection = cnn• 21.b- Este es el de C#:// Usando un procedimiento almacenadoSqlCommand cmd = new SqlCommand();cmd.CommandText = "MostrarUsuario";cmd.CommandType = CommandType.StoredProcedure;cmd.Connection = cnn;• 21.c- El resto del código es exactamente igual, pruébalo y saldrás de dudas.• 21.d- Fíjate que al usar un procedimiento almacenado, asignamos a lapropiedad CommandType del comando el valorCommadType.StoredProcedure para que se entere de que estamosusando un procedimiento almacenado en lugar de una sentencia T-SQLdirecta.
  31. 31. • 21.e- Cuando no asignamos el valor StoredProcedure a la propiedadCommandType, el valor que tiene es Text, que es el predeterminado deesa propiedad.El código para actualizar los datos modificados• 22- Lo siguiente que tienes que hacer es escribir el código para actualizar losdatos escritos.• 22a- En el evento Click del botón Actualizar tendrás que escribir el códigopara actualizar los datos del usuario cuyo correo hayas escrito.• 22b- ¿Que haremos en ese método?• 22c- Pues, comprobar que el correo indicado está en la base de datos.• 22d- Si no está, mostrar un error.• 22.e- Si existe, usaremos el contenido de la propiedad UpdateCommanddel DataSource para actualizar los datos.• 22.f- La llamada a ese comando de actualización la hacemos por medio delmétodo ExecuteNonQuery del comando, pero una vez que hemosasignado los valores de los parámetros, que en este caso, también usamosel método AddWithValue.• 22.g- Este es el código para Visual Basic:Protected Sub btnActualizar_Click(ByVal sender As Object, _ByVal e As System.EventArgs) _Handles btnActualizar.ClickMe.lblAviso.Text = "" Comprobamos si el nombre ya existeUsing cnn As New SqlConnection(Me.SqlDataSource1.ConnectionString) El valor que necesitamos es el IDDim cmd As New SqlCommand( _"SELECT ID " & _"FROM Usuarios " & _"WHERE Correo = @Correo", cnn) Abrimos la conexióncnn.Open() Añadimos el valor del parámetro de la consulta
  32. 32. cmd.Parameters.AddWithValue("@Correo", txtCorreo.Text) Si devuelve cero, es que no existeDim i As Integeri = CInt(cmd.ExecuteScalar())If i = 0 Then Avisamos y salimosMe.lblAviso.Text = "El usuario NO existe"Exit SubEnd If Si llegamos aquí, es que el usuario existe Deberíamos hacer las comprobaciones de que haya datos que guardar, pero... eso te lo dejo a ti... Seguimos usando la misma conexión, pero cambiamos el comando Usamos el comando Update del DataSourcecmd = New SqlCommand(Me.SqlDataSource1.UpdateCommand, cnn) Añadimos el valor del parámetro de la consultacmd.Parameters.AddWithValue("@Correo", txtCorreo.Text) La clave la guardaremos como un valor SHA1 pero como ya estará como SHA1, simplemente la asignamoscmd.Parameters.AddWithValue("@Clave", txtClave.Text) Esto nos puede dar problemas dependiendo del forma del servidor en el que está la base de datoscmd.Parameters.AddWithValue("@Fecha", txtFecha.Text)cmd.Parameters.AddWithValue("@Nombre", txtNombre.Text)cmd.Parameters.AddWithValue("@Comentarios", txtComentarios.Text) El valor de la variable i es el ID a actualizarcmd.Parameters.AddWithValue("@ID", i) Ejecutamos el comando de actualización podemos usar el método Update del DataSource (pero no actualiza nada)Me.SqlDataSource1.Update() Mejor con una llamada a ExecuteNonQuerycmd.ExecuteNonQuery()
  33. 33. Al salir del bloque Using se cierra la conexiónEnd UsingMe.lblAviso.Text = "Se han actualizado los datos correctamente"End Sub• 22.h- Este es el código del método de evento del botón Actualizar para C#:protected void btnActualizar_Click(object sender, EventArgs e){this.lblAviso.Text = "";//// Comprobamos si el nombre ya existeusing (SqlConnection cnn =new SqlConnection(this.SqlDataSource1.ConnectionString)){// El valor que necesitamos es el IDSqlCommand cmd = new SqlCommand("SELECT ID " +"FROM Usuarios " +"WHERE Correo = @Correo", cnn);// Abrimos la conexióncnn.Open();// Añadimos el valor del parámetro de la consultacmd.Parameters.AddWithValue("@Correo", txtCorreo.Text);// Si devuelve cero, es que no existeint i = (int)cmd.ExecuteScalar();if (i == 0){// Avisamos y salimosthis.lblAviso.Text = "El usuario NO existe";return;}// Si llegamos aquí, es que el usuario existe// Deberíamos hacer las comprobaciones de que haya datos queguardar,// pero... eso te lo dejo a ti...//// Seguimos usando la misma conexión, pero cambiamos el comando// Usamos el comando Update del DataSource
  34. 34. cmd = new SqlCommand(this.SqlDataSource1.UpdateCommand, cnn);// Añadimos el valor del parámetro de la consultacmd.Parameters.AddWithValue("@Correo", txtCorreo.Text);// La clave la guardaremos como un valor SHA1// pero como ya estará como SHA1, simplemente la asignamoscmd.Parameters.AddWithValue("@Clave", txtClave.Text);// Esto nos puede dar problemas dependiendo del forma// del servidor en el que está la base de datoscmd.Parameters.AddWithValue("@Fecha", txtFecha.Text);cmd.Parameters.AddWithValue("@Nombre", txtNombre.Text);cmd.Parameters.AddWithValue("@Comentarios", txtComentarios.Text);// El valor de la variable i es el ID a actualizarcmd.Parameters.AddWithValue("@ID", i);// Ejecutamos el comando de actualización// con una llamada a ExecuteNonQuerycmd.ExecuteNonQuery();// Al salir del bloque using se cierra la conexión}this.lblAviso.Text = "Se ha añadido el nuevo usuario correctamente";}• 23- En el código hay un par de cosas que te quiero comentar.• 23.a- En el primer comando he usado el ID como valor a recuperar paracomprobar si existe el usuario, ya que ese valor del ID lo necesitaremospara el comando UpdateCommand del DataSource.• 23.b- La conexión no la he cerrado, ya que después hay que volver a abrirla,y en realidad podemos aprovecharla para las dos cosas que hay que hacer.Por eso solo hay un bloque Using.• 23.c- La otra cosa es que en teoría, el objeto DataSource tiene un métodoUpdate, que supuestamente es para actualizar los datos usando la cadenade UpdateCommand, pero... bueno, a mi no me funciona, así que, mejorusar el método ExecuteNonQuery del objeto SqlCommand, que si quefunciona.
  35. 35. Y esto es todo, creo que con lo explicado en estas tres partes tendrás una pequeñaidea de cómo manejar los datos en un sitio Web creado con ASP.NET.Lo que queda por explicarte es que podamos crear una parte del sitio que estéprotegida por contraseña, de forma que el usuario que quiera entrar deba escribirla contraseña que se le ha asignado.Otra cosa que habrá que hacer es crear otro directorio con las páginas queestamos creando en estas tres partes del tutorial, ya que, al menos en teoría, soloel usuario que tenga los permisos suficientes debería poder crear, modificar y verlos datos del resto de usuarios.Para que te vayas haciendo una idea (y puedas ir modificando el código que yatenemos e incluso hacerlo por tu cuenta), hay que añadir otro campo a la tabla deusuarios, de forma que nos sirva para saber el "nivel" que tiene, por ejemplo, elnivel cero es para los usuarios normales, y el nivel 3 para los que puedan modificarlos datos de los usuarios.Ese campo será de tipo entero (int) y el nombre del campo puede ser Nivel.

×