Trabajando con Visual Web Developer

Tal como les comenté en el post anterior, estos días he estado desarrollando algunos sitios web para clientes y amigos. En dos de esos sitios se utiliza el acceso a datos para consultar calificaciones.

Estas escuelas, el CPMA y otra que por el momento no puedo dar detalles, necesitaban que tanto los padres de familia como los alumnos puedan ver su información académica básica en línea. Para esta tarea, y dado que en ambos casos se manejan pocos registros, decidí usar ASP.NET en el Web Developer con bases de datos en Access.

Esto, además de hacer más fácil el desarrollo, permite que personas que no conozcan de programación o de SQL Server puedan actualizar los datos utilizando sólo Access y nada más. A continuación, un “how to” de como hacer un pequeño sitio con acceso a datos. Al final, podrán descargarlo desde el SkyDrive “EjemplosVisualBasic”, a un costado de está página.

Primero, creamos una base de datos desde Access. Cabe resaltar que el formato tiene que ser de Access 2000. Dentro de la base de datos, creamos una tabla llamada “1ero”, que contendrá las calificaciones del primer año. A continuación pongo el nombre de los campos y el tipo de valor de cada uno.

 

Campo	Valor
ncontrol	Número
materia1	Texto
materia2	Texto
materia3	Texto
materia4	Texto
materia5	Texto

 

En todos los casos se maneja texto dado que no vamos a realizar operaciones ni cosas complicadas, todo es una simple búsqueda en SQL, la cuál veremos más adelante. Te sugiero que rellenes la tabla con registros. El campo ncontrol es muy importante, ya que la búsqueda se realizará utilizando los registros que haya en dicho campo. Guardamos todo y cerramos Access. Ahora, nos pasamos al Visual Web Developer 2008.

Vamos al menú Archivo y seleccionamos la opción Nuevo sitio web. Ahí, le especificamos la ruta y el nombre del proyecto, en este caso, EjemploPechocho. En la parte de Lenguaje, especificamos que será Visual Basic.

Una vez que terminó de cargar, nos vamos al panel Explorador de soluciones. Ahí veremos diferentes archivos: Default1.aspx y Default1.aspx.vb, web.config y una carpeta llamada App_Data. Los dos primeros son el estilo de la página y el código en Visual Basic de esta, el archivo config guarda la configuración del sitio web y la carpeta App_Data almacena las bases de datos que se ocuparán en el proyecto. Ahí mismo copiamos o movemos nuestra base de datos de Access desde el Explorador de Windows y en VWD presionamos el botón actualizar en el Explorador de soluciones. Debe quedarte algo así:

Ahora, renombraremos el archivo Default1 con el botón secundario del ratón y le pondremos el nombre que deseemos. En este caso, 1ero. En este paso, haremos lo que quizá sea lo más pesado de hacer: el diseño de la página. Dado que es un proyecto de ejemplo, haremos un diseño sencillo. Si vas a utilizar imágenes para tu página, estás tienen que estar en la raíz del sitio y no en carpetas aparte. Al menos eso me hace a mí. Después de unos minutos, nuestra página queda así:

Como nota aclaratoria: tanto el encabezado como los controles están en tablas. Llega pasar que, si intentas cambiar el tamaño de una, se altera la otra al mismo tiempo. Para evitar eso, selecciona la tabla que quieras cambiar de tamaño y en la parte de código borra la etiqueta <table xxx=”style1”> por simplemente <table>. Como ves, hay sólo dos controles. En la tabla siguiente pongo las propiedades de cada control:

 

Control	Propiedad
Textbox1	(ID) = txtControl
Button1	(ID) = cmdBuscar Text = “Buscar calificaciones”

 

Bien, ya tenemos nuestra página, pero esta todavía no hace nada. Para que empiece a trabajar, tenemos que crear un enlace a datos. En el panel de herramientas, buscamos en el apartado Datos la opción Gridview. Arrastramos el control a la página o le damos doble clic y esto nos agrega una tabla simple, seguida de un SmartTag con sus propiedades más usadas. Seleccionamos la opción Elegir origen de datos y finalmente la opción Nuevo acceso a datos. Esto nos abre el asistente para el origen de datos.

Damos clic en Aceptar. Enseguida, el asistente nos pedirá el origen de la base de datos. Presionamos Examinar y seleccionamos App_Data donde veremos nuestra base de datos que creamos hace rato. Presionamos Aceptar y Siguiente. El siguiente paso es muy importante, ya que nos pregunta sobre la instrucción SELECT, la cual en SQL es la que se encarga de seleccionar los campos en los cuales trabajaremos. El * es un comodín que señala todos los campos. Seleccionaremos ese, ya que queremos mostrar todos los campos de la tabla 1ero.

En el siguiente cuadro podremos hacer una consulta de prueba, con el fin de verificar que la conexión a los datos y el acceso a ellos esté hecho correctamente. Si todo salió bien, damos clic en Finalizar.

Ahora, nuestra tabla en la página principal muestra los campos de la tabla 1ero de la base de datos de Access. Dado que se ve muy simplona, seleccionen la SmartTag de la tabla y seleccionen la opción Formato automático. Al igual que en Access, seleccionen el tipo de tabla que deseen usar en su proyecto. Denle Aceptar y todo debe quedar de la siguiente forma.

Para probar el sitio, presionen el botón Play como en cualquier aplicación del Visual Studio, o presionen en su teclado Ctrl+F5. Esto abrirá la página en ejecución en su navegador, al igual que creará un localhost virtual para ejecutar la aplicación web. Cuando ejecutes, te darás cuenta de que se ven todos los registros y que nuestro botón no sirve para nada. Bien, vamos a arreglar eso. Cierra la ventana del navegador y regresa a VWD. En vista diseño, dale doble clic a cualquier parte en blanco de la página. Esto nos llevará al archivo “1ero.aspx.vb” y a la propiedad Load_Page. Establece la propiedad del Gridview visible en False. Esto hará que la tabla sea invisible al momento de cargarla.

Regresa a la vista diseño y dale doble clic al botón. Aquí, en la propiedad Click del botón, establece el Gridview.visible a True. Regresa la vista diseño, y dale click al SmartTag del Gridview y selecciona el origen de datos. Abrirá el mismo asistente de hace un rato. Dale en siguiente y nos pondrá de nuevo en Configurar instrucción SELECT. Aquí es donde se pone divertido. Presiona el botón WHERE. Nos abrirá la caja de Agregar cláusula WHERE. En la parte de Columna, selecciona el campo que servirá de referencia para las búsquedas, en este caso, ncontrol. Automáticamente, el operador se establece en “=”. En origen, dale en Control. Se activa la parte de Propiedades del parámetro. En Id. de control, selecciona la caja de texto, txtControl. Abajo, nos generará automáticamente la expresión en SQL correspondiente. Presiona el botón Agregar y dicha expresión quedará agregada y lista para usarse.

Presiona Aceptar y Siguiente. Verás la caja donde podemos probar las instrucciones SQL que hemos creado. Presiona el botón Consulta de prueba. Esta vez, veremos que nos sale un cuadro de diálogo, pidiéndonos un valor para realizar la consulta. Introduce algunos de los números que estableciste al crear la base de datos. Si todo sale bien, al presionar Aceptar nos mostrará los resultados de dicha búsqueda.

Presiona Finalizar. Guarda todo y ejecuta de nuevo. Realiza de nuevo una búsqueda. Si todo salió bien, te debe aparecer la tabla mostrando sólo el registro que se buscó.

Eso es todo. Sin embargo, este sitio tiene un problema: prácticamente carga todos los registros de la tabla pero los mantiene ocultos hasta realizar la búsqueda. Si la tabla contiene pocos datos, no es problema. Pero si hablamos de más de 100 ó 200 registros, cargar todo eso y hacer la búsqueda tomaría bastante tiempo si es que subimos la aplicación a un sitio web. Si alguien sabe como resolver este problema, se lo agradecería de todo corazón, :D.

No duden en hacer preguntas o comentarios al respecto y espero que este “extenso” tutorial les haya servido. Por cierto: si descargan el archivo desde el SkyDrive, les agradecería que cualquier cosa al respecto la comenten aquí y no en el SkyDrive, ya que rara vez checo los comentarios que ahí se dejan.