Home > Articulos & Tutoriales, Desarrollo > Acceso a Datos con Visual Web Developer

Acceso a Datos con Visual Web Developer


Desde la salida de Visual Studio 2005 y junto con el la salida de las versiones express, se han podido dar cuenta de como estas versiones gratuitas pueden ser explotadas de una forma bastante interesante. En versiones anteriores el acceso a fuentes de datos en algunos casos resultaba confuso y en algunos casos complicado, en la nueva version de visual studio mas exactamente con Visual Web Developer Express edition veremos las ventajas, el manejo y en general el beneficio que trae con sigo esta herramienta y mas especificamente en el tema de acceso a datos. Veremos como sin necesidad de escribir ni una sola linea de codigo se puede llegar a construir una aplicacion sencilla graficamente pero fuerte funcionalmente.

Creacion de la Base de Datos

1. Para la creacion de la base de datos utilizaremos Access 2003. Abrimos Access y en el menu archivo seleccionamos nuevo y en el panel de la derecha seleccionamos "Base de datos en Blanco".

image

2. Le asignamos un nombre, para el ejemplo sera Usuarios, una ubicacion especifica y selecionamos "Crear", al crearlo se presenta la siguiente ventana de dialogo.

image

3. La unidad escencial de almacenamiento de informacion en una base de datos es la tabla asi que para almacenar nuestros datos vamos a crear una tabla y definir los campos que vamos a almacenrar. Hacemos doblo clic en "Crear Tabla" en vista de diseño.

image

4. Una tabla esta formada por campos (columnas) y por registros (filas), para nuestra tabla en el ejemplo crearemos los campos cedula, nombre, telefono y carrera, al compo cedula le asignamos el tipo numero y a los demas tipo texto. Una de las principales caracteristicas de una table es la existencia de un identificador unico cuya funcion es "diferenciar" cada uno de los registros de la tabla, conocido como Llave primaria (Primay Key), para el ejemplo nuestra llave primaria sera la cedula. Para asignarla como llave primaria seleccionamos toda la fila cedula y seleccionamos de la barra de herramientas el icono "Clave Principal".

image

5. Una vez que hemos definido los campos y la llave primaris guardamos la tabal con el nombre de "Usuario".

Ahora vamos a ingresar un dato para posteriormente luego manipularlo y visualizarlo, por ejemplo los datos personales del usuario. Para ello hacemos doble clic sobre la tabla que acabamos de crear e ingresamos los datos.

image

Con este utimo paso hemos terminado de crear y poblar nuestra base de datos , esta ha quedado lista para su consumo desde Web Developer.

Control para la Insercion de Registros (Details View)

En este punto una vez creada la base de datos vamos a iniciar la creacion de la aplicaion web, primero vamos a crear el modulo de insercion de registros utilizando uno de los controles que nos ofrece la herramienta conocido como "DetailsWiew".

Abrimos Visual Web Developer 2005 Express Edition, seguidamente hacemos clic en "Nuevo sitio web".

image

Para crear un sitio web hacemos clic en "Crear Sitio Web…" o bien podemos ia a Archivo/Nuevo Sitio Web.

A continuacion se nos presenta la siguiente ventat en donde seleccionamos "Sitio Web ASP.NET" en ubicacion seleccionamos "Sistema de Archivos" y el que mas nos parezca comodo (aunque como comente al inicio no vamos a tener que escribir codigo) por ultimo al sitio lo llamaremos Sistema de Informacion.

image

En la ventana de "Nuevo Sitio Web" en ubicacion seleccionamos "Sistema de Archivos" (para indicar que nuestro sitio web va a quedar ubicado en un conjunto de archivos en una carpeta como una aplicacion normal), seleccionamos la ubicacion que deseemos y le damos el nombre de "SistemadeInformacion", el lenguaje seleccionaremos el que mas nos agrade.

2. Una vez creado el sitio se nos presenta la siquiente ventana en donde podemos visualizar la estructuda de la pagina en html, nos pasaremos a la vista de diseño para manipular mas grafica y facilmente la misma, una vez en la vista de diseño traemos del cuadro de herramientas una tabla Html y la arrastraremos hasta la pagina.

Al crear el proyecto se presenta una pagina llamada Default.aspx esta se muestra en vista "Source" o fuente donde podemos ver el codigo Html que compone la pagina. Vamos a cambiarnos a vista de diseño para observer como manejar los controles.

image

Ya estando en vista de diseño, en al cuadro de herramientas seleccionamos la pestaña HTML y arrastramos un control "Tabla" a la pagina.

A continuacion vamos a manipular la tabla.

image

En esta tabla vamos a agregar los controles que vamos a utilizar, para visualizar mejor ello vamos a combinar las celdas seleccionando toda la fila, clic derecho y seleccionar "Combinar Celdas". Como podemos ver el manejo de esta tabla es muy simlar al de una tabla de Excel podemos agregar mas filas, columnas, mezclarlas etc.

image

3. Una vez acomodada nuestr tabla, en ella vamos a ubicar los controles que vamos a utilizar, pero primero debemos agregar la base de datos al proyecto, luego arrastramos del cuadro de herramientas el control "DetailsView" de la ficha Data y posteriormente configuramos la conexion a la base de datos.

Para poder manipular la base de datos que creamos anteriormente, primero debemos agregarla al proyecto ya que es desde aqui que nuestra aplicacion va a acceder a ella. Para ello en el cuadro de explorador de soluciones hacemos clic derecha sbre la carpeta "App_Data" (En esta carpeta se almacenana todas las fuentes de datos que intervienen el el proyecto) y seleccionamos "Agregar elemento Existente", buscamos la base de datos y la abrimos.

image

Con la base de datos incluida en el proyecto ahora vamos a utilizar el control "DetailsView" para ingresar los datos a la base de datos.

Una vez incluida la base de datos, en el cuadro de herramientas en la ficha "Data" arrastramos el control "DetailsView" y lo colocamos en la tabla.

Ahora que tenemos la base de datos incluida en el proyecto vamos a configurar la conexion a esta para poder manipular la info existente.

image

Primero creamos un nuevo objeto de fuente de datos, este objeto es el que se va a conectar y contendra las caracteristicas de la misma (proveedor, path, tipo, etc), estas propiedades las podemos visualizar en el panel de propiedades.

image

Al hacer clic en "Nueva fuente de datos" se nos presenta la siguiente ventana, en ella seleccionamos el tipo de fuente a la que nos vamoa a conectar, para este caso "Base de datos de access", damos nombre a la funente o OK.

image

A continuacion nos preguntanla ubicacion de la base de datos la cual ubicamos en la carpeta "App_Data" (por defecto la ubico ahi) la seleccionamos damos OK y Next

Ya hemos creado la conexion a nuestra base de datos ahora vamos a configurar el como vamos a trabajar con ella, es decir la vamos a indicar como vamos a hacer las inserciones, busquedas, actualizaciones y borrados.

image

A continuacion se nos presenta la ventana Configuración de fuente de datos, el ayudante nos da la posibilidad de crear automáticamente las sentencias para hacer las tareas antes mencionadas. Para ello En el panel Columnas Seleccionamos el primer valor “*” indicando que todos los campos de la tabla son los que van a ser modificados. Posteriormente hacemos clic en el botón avanzado que se encuentra a mano derecha, y así surge la ventana “Opciones avanzadas de generación de SQL”. Se nos muestra la posibilidad de generar sentencias INSERT, UPDATE Y DELETE sobre la tabla que seleccionamos, checkeamos ambas opciones como se muestra en la figura. Damos OK y Next.

image

Ahora se nos da la posibilidad de mirar si la conexión quedo bien hecha hacemos clic en “Test Query” y podemos ver que salen los valores que ya habíamos ingresado en la tabla. Clickeamos en “Finish”.

Una vez creada y configurada la conexion podemos ver las propiedades de esta en el panel de propiedades, a continuacion vamos a configurar el control (Details View) que ya teniamos para que trabaje con la fuente de datos que acabamos de crear.

Una vez terminada de crear y configurar la conexión podemos ver que se creo un pequeño cuadro de nombre “AccessDataSource – …” esta es nuestra conexiona la fuente de datos podemos trabajar con ella de aquí en adelante cuando la necesitemos.

Adicionalmente podemos ver sus propiedades en el panel de propiedades.

 image

Por otro lado podemos cambiar el estilo del control haciendo clic en “Autoformato”, que nos permite seleccionar algunos de los estilos predefinidos para nuestra tabla.

image image

Ahora vamos a terminar de configurar el control, cuando terminamos de crear la fuente de datos podemos observar como el control toma os nombres de los campos que habíamos definido en nuestra base de datos (cedula, nombre…), adicionalmente, se nos habilitaron las opciones de “Activar Paginación”, “Activar Inserción” entre otros. Para nuestro ejercicio activamos “Activar Inserción”.

 image image

Como nuestro control va a ser utilizado para ingresar usuarios, seleccionamos el control y nos vamos al panel de propiedades buscamos la propiedad “Default Mode” y seleccionamos “Insert”, para que cuando arranque nuestra aplicación esta arranque por defecto con los campos listos para insertar valores.
El control lo vamos a utilizar únicamente para inserciones entonces en el menú desplegable del control seleccionamos la opción “Editar campos” en ella en el panel de “Campos Seleccionados”.

Listo, configurardo tando la fuente de datos como la conexion vamos probar la misma para verificar su funcionamiento.

 image image

Para ejecutar la aplicación hacemos clic en “start Debugging” u oprimimos F5. Al hacerlo e nos presenta un cuadro de dialogo con titulo “Depuración no establecida” aquí se nos advierte que el proyecto no esta habilitado para ser depurado, hacemos clic en OK y la aplicación se ejecuta.

image

Si hacemos clic en este icono se nos muestra la ventana de Servidor de desarrollo de ASP.NET el cual nos indica la dirección física del proyecto, el puerto que utiliza y la dirección del servidor local por el cual podemos acceder a la aplicación a través de un navegador web.

image

Como podemos ver cuando se corre la aplicación la dirección URL del explorador coincide con la que se nos mostro en el cuadro anterior.

Ahora podemos probar la aplicación para ver si se esta haciendo correcta la inserción en la base de datos.

Control de visualizacion, edicion y eliminacion de datos (GridView)

A continuacion vamos a configurar el control GridView ya que con este vamos a poder visualzar los datos que se encuentran almacenados ademas de editarlos y eliminarlos.

image

Primero arrastramos un control GridView del cuadro de controles en la ficha Data. Al igual que el control anterior (DetailsView) debemos configurar la fuente de datos a la cual este se va a conectar.

Como la fuente de datos ya la habíamos creado simplemente seleccionamos la misma que teníamos.

image

Al igual que el anterior control podemos asignarle algún de los estilos que ya vienen junto con el control, para esto hacemos clic en “Autoformato”.

image

Una vez asignada la fuente de datos se habilitan las opciones de permitir acciones adicionales. Para nuestro ejemplo seleccionamos “Permitir Paginación”, “Permitir Edición” y “Permitir Borrado.”

Una vez configurado el control vamos a probarlo.

image

Como podemos ver en la tabla de abajo (GridView) podemos visualizar los datos que ya teníamos en nuestra base de datos.

image

Cuando seleccionamos Editar en alguna de las filas de la tabla esta se transforma de tal forma que nos permite editar los valores que se encuentra almacenados.

Ahora cada vez que ingresemos un dato por medio del control (DetailsView) podemos ver como la tabla (GridView) se va actualzando automaticamente.

image image

Conclusiones

Pudimos ver como sin tener que escribir una sola linea de codigo creamos y configuramos la conexiona a una base de datos, creamos los controles y manipulamos sus propiedades para conseguir el objetivo, Visual Studio 2005 trae duficientes recursos para temas como este en donde el objetivo principal es facilitar el trabajo del desarrollador y agilizar los procesos.

Gerardo Ramos – Microsoft Student Partner

  1. May 18, 2007 at 3:30 pm

    estuve mirando su procedimiento y lo hice en mi casa y no me funciono, quisiera saber como hago para que desde una base de datos pueda cargar un formulario con solo meter el numero de cedula

    gracias

  2. bengy
    May 29, 2007 at 12:41 pm

    excelente gerardo pero tengo un problema de insertar un dato lo hice primero con acces y despues con sql y los dos me dan el mismo problema:

    La acción de insertar no es compatible con el origen de datos ‘SqlDataSource1’ a menos que se especifique InsertCommand

  3. Pedro
    October 4, 2007 at 2:09 pm

    Hola Gerardo, me parece muy util tu articulo para lo que necesito hacer, sin embargo no puedo ver las imagenes, podrias revisar los enlaces porfavor, y gracias.

  4. Gerardo
    October 4, 2007 at 2:12 pm

    OK, parece que me “tumbaron” el site donde tenia las imagenes, gracias por el aviso las subire de nuevo lo mas pronto posible.

    Gerardo Ramos – Microsoft Student Partner

  5. Ian
    November 30, 2007 at 12:05 pm

    Gerardo, muy util en verdad tu articulo, por favor podrias revizar los enlaces de las imagenes ya que estas no se cargan.

  6. vero
    December 1, 2007 at 4:42 pm

    Hola, Gerardo muy buena ayuda, yo hice esto en pc pero como no hay un boton de agregar no se van los datos a la base de datos talvez puedas ayudarme con eso. gracias

  7. January 5, 2009 at 9:31 pm

    Hola a todos, ya estan listos los enlaces de las imagenes, pido disculpas por la demora.

  8. MICHEL
    March 27, 2009 at 2:45 pm

    Saludo esto es de lo que andaba buscando, ya realice la pequeña practica y funciona muy bien gracias

  9. Miguel
    April 25, 2009 at 1:13 am

    Buen Post Amigo, pero me gustaria saber como se manipulan los datos com mysql.

  10. Edo
    June 1, 2009 at 10:54 pm

    Hola a todos los master de la web, consulta, como puedo mostrar un grafico dinamico access en visual web developer???

  11. carlos
    June 17, 2009 at 7:27 pm

    El ejemplo esta perfecto. me gustaria saber un poco más. Donde puedo encontrar más tutoriales como este.
    Quisiera a partir de un diseño con cajas de texto, botones, etc. poder configurar los codigos para acceder a una base de datos.

  12. fernando
    July 17, 2009 at 4:14 pm

    Gerardo: quería preguntarte de que manera verificás los valores de los campos antes de proceder a insertarlos.
    Gracias

  13. omar
    February 19, 2010 at 11:06 am

    una pregunta, tengo una bd en MySQL y con un gridview en vwd.net 2008 muestro el contenido de una tabla llamada miembros, despues de esto necesito poder modificar, borrar o crear nuevos miembros a partir del gridview ¿como puedo hacer eso?

  14. Pedro Moreno
    August 19, 2010 at 4:23 pm

    Hola Gerardo.

    Como hago para ver esta pagina en otros equipoa de la red y si fuese posible que la base de datos fuese MySQL.

    Y por cierto excelente tutorial ya con esto conoci bastante el ambiente.

  15. Nelly M
    November 20, 2011 at 3:34 am

    wow buenísimo!!
    Me has sacado de un gran apuro!!
    Mil graxxxxxxxxxxxx!!

    =0)

  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: