sábado, 4 de julio de 2009

Desarrollo de Aplicaciones Web con ASP.Net

En esta ocasion hablare un poco de como empezar un proyecto web con ASP.Net cubriendo las nociones basicas para desarrollarlo no entrare en tanto detalle ya que desarrollar una aplicación Web lleva mas tiempo y planeación dependiendo de lo que se quiere hacer. Al final crearemos una pequeña aplicacion de ejemplo para ilustrar lo aprendido.
He dividido este mini tutorial en 4 partes:
  1. Lo basico: Como agregar controles, sus propiedades y como codificarlos.
  2. Manteniendo el estado de la aplicación.
  3. Controles de validacion.
  4. Master Pages, Temas y Skins.
Creacion de una Aplicacion Web.

Una aplicacione Web se crea como cualquier otro proyecto de Visual Studio, con la diferencia que debemos elegir New Web Site en vez de New Project en el menu File. Seguidamente nos aparecerá una cuadro de dialogo donde nos da la opcion de seleccionar el tipo de aplicacion Web a crear.



Una vez que seleccionamos el tipo de proyecto debemos elegir donde guardarlo haciendo click en la opcion Location y seleccionando cualquiera de las 3 opciones: FileSystem, Http, FTP. El mas comun es el FileSystem ya que nos permite ejecutar nuestra aplicación con el servidor de Visual Studio y es la que usaremos en este tutorial. Luego debemos elegir en que lenguaje queremos programar nuestro sitio Web: VB o C# y por ultimo escribimo el nombre de nuestro proyecto. En este caso le pondre ejemploWebVB.



Como podemos ver en la imagen de arriba, seguidamente que hacemos click en el boton OK, Visual Studio automaticamente muestra el entorno para empezar a programar. De hecho ya nos genera codigo que es el basico de cualquier aplicacion ASP.Net y en el Explorador de soluciones los archivos igualmente basicos.
Ahora lo que haremos nos pasamos a la vista de diseño. En la parte inferior se podran dar cuenta que hay 3 pestañas etiquetadas como: Diseño, Split,Codigo.
Ya en el modo de Diseño agregamos los siguientes controles arrastrandolos y soltandolos:
CONTROL PROPIEDADES
---------------------------------------------------------------
  • Label Id: lblTitulo
    Text: Saludo
    Font-Size: X-Large
  • Label Id: lblNombre
    Text: Nombre
  • Textbox Id: txtNombre
    Text: (vacio)
  • Button Id: btnSaludar
    Text: Saludar
  • Label Id: lblResultado
    Text: (vacio)
El resultado debería ser similar al siguiente:

Asp.Net utiliza un mecanismo de organización de controles, denominado Flow Layaout, en el que los controles se ubican uno a continuación del otro.
Despues de a ver agregado los controles y cambiar sus propiedades, si hacemos click en la pestaña de codigo (Source) podremos ver que Visual Studio agregao codigo automaticamente para esos controles.
Hasta aquí ya tenemos como se vera nuestra pequeña aplicacion de ejmplo. Ahora solo falta programar algo. Vamos a hacer que cuando el usuario presione el boton Saludar, en el Label lblResultado nos muestre el nombre que el usuario ingreso en el textbox. Hacemos doble click en el boton y Visual Studio nos generará codigo automaticamente para ese boton.

Codigo VB:


Codigo CS:
Una vez agregado el codigo que se ejecutará al momento de presionar el botón y despues de que el usuario escribio algo. Ahora solo nos queda ejecutar el ejemplo presionando F5 (modo de depuración) o Ctrl-F5. En ambos casos se ejecuta el servidor propio de Visual Studio, el cual procesa las peticiones de las páginas. Cada vez que se reinicia la máquina la PC, este servicio escoge un puerto diferente para evitar conflictos con los dispositivos con los que contemos.


Como podemos ver este fue un ejemplo bastante sencillo y el proceso como funciona también los es. Cuando se solicita una página el servidor web envía la página HTML con los datos iniciales, si es la primera vez, al browser. Cuando el usuario interctua con algún control (el botón, por ejemplo), la información en el resto de los controles se envía al servidor nuevamente, se procesa el código asociado con los eventos y se envía nuevamente otra página en rspuesta a la acción.
Este proceso se realiza automaticamente cada vez que el usuario interactúa con algún control en el que estén capturando los eventos.
Esta es la manera que tiene ASP.Net de responder a eventos desde el Cliente. Este proceso de ida y vuelta (round trip) del cliente al server y viceversa en respuesta a un evento se denomina PostBack.

Aquí podran encontrar los link del ejemplo tanto en VB.Net como en C#.
Link VB
Link CS

Bueno, hasta aquí termina la primera parte de este minitutorial. Espero que les halla ayudado a entender como funciona ASP.Net. Nos vemos en el proximo post.

2 comentarios:

_ALEX_ dijo...

me parece muy interesante la entrada, y en general todo el blog, un muy buen recurso para los que iniciamos en el mundo de .net

Espero podamos seguir viendo mas anotaciones. Un saludo

rc dijo...

Gracias por la info! :):):):):):)!