domingo, 28 de octubre de 2012

Mi primer aplicación ASP.NET MVC 3. 1ra Parte

¿Qué es MVC?


MVC acrónimo de Modelo Vista Controlador mejor conocido en ingles como Model View Controller, aunque hoy en día la definición de este varía entre distintos autores y/o tecnologías sobre la que se implemente, es decir mientras para algunos es un patrón de diseño o un tipo de arquitectura de software o incluso hasta un framework, para Microsoft en lo particular ASP.NET es un todo en uno, ya que cuenta con un framework para desarrollar aplicaciones Web eficaces, altamente testables y fáciles de mantener, todo esto sacando provecho del patrón de diseño MVC.

De igual manera se le conoce como una arquitectura, siendo que separa nuestras aplicaciones en tres componentes principales, tales como un Modelo de datos, las Vista y los Controladores.

a) - Diagrama MVC

En el diagrama a) se muestra de manera general el funcionamiento de este patrón, empezando por el controlador quien se encarga de recibir las peticiones al servidor web, además de interactuar con  el modelo para realizar las transacciones y/o actualizaciones, una vez terminados los cambios o la extracción de datos solicitados al controlador, este mismo empuja hacia la vista el modelo de datos resultante de la petición inicial, logrando así la actualización de la interfaz de usuario (UI). 

Una vez ya habiendo explicado un poco lo que es MVC, continuaré con un tutorial paso a paso y desde cero para crear nuestra primer aplicación ASP.NET MVC 3.

Tutorial paso a paso


1.- El primer paso a seguir es la instalación del software necesario para llevar a cabo esta practica, pero para eso asumo que ya se tiene instalado Visual Studio 2010 por lo cual pasaré directamente a instalar el instalador de plataforma Web la cual es una herramienta gratuita de Microsoft que sirve para la descarga e instalación de software necesario para crear aplicaciones, desde frameworks, librerías, etc.



2.- Un vez instalado se lanza una ventana del Web Platform Installer que marcará la librería de ASP.NET MVC 3 como articulo a instalar, aceptamos los términos y condiciones de uso y esperamos algunos minutos a que concluya su instalación, al finalizar cerramos el asistente.  




3.- Ahora pasamos a abrir una instancia de Visual Studio 2010 y creamos un proyecto siguiendo "File->New->Project...", en la siguiente ventana en el panel de la izquierda vamos a las plantillas instaladas "Visual C#->Web", en el panel central seleccionamos "ASP.NET MVC 3 Web Application", enseguida nombramos el proyecto Mvc3Application, también dejamos marcada la opción de "Create directory for solution" y finalmente hacemos clic en OK



4.- Enseguida se lanza una nueva caja de dialogo "New ASP.NET MVC 3 Project" donde seleccionamos las opciones "Internet Application" para platilla de proyecto y en al lista desplegable dejamos como motor de vistas "Razor", y seguimos con clic en OK


5.- Una vez creado nuestro proyecto en el panel de la derecha o mejor dicho explorador de soluciones se encuentran todos los elementos que conforman nuestra aplicación, entre ellos los principales Modelo, Vistas y Controladores, ademas de carpetas para contenidos como recursos y scripts.


6.- En el panel central encontramos el área de codificación en la cual modificaremos el archivo HomeController.cs, de no encontrarse abierto abrir con doble clic sobre el archivo en el explorador de soluciones, ya abierto modificamos el valor de la variable ViewBag.Message a "Hola Mundo!".


7.- Finalmente ejecutamos nuestra aplicación, para eso vamos a la opción "Debug->Start Debugging" en nuestro menú principal o simplemente mediante el atajo con la tecla F5,  lo cual nos mostrará una ventana como la siguiente.



Bueno como habrán notado es muy sencillo crear aplicaciones MVC, pero realmente esta aplicación aun no hace uso de todos sus componentes, ya que hasta el momento el controlador solo esta enviando una variable con un mensaje hacia la vista, la cual se encarga de desplegarlo en nuestra interfaz, por lo tanto no se hace uso alguno del modelo.

En nuestra siguiente parte del post agregaremos mas funcionalidad a la aplicación haciendo uso del modelo, lo cual nos ayudará a comprender de manera más clara la relación entre estos tres componentes principales.

3 comentarios:

  1. Algo similar pero en CodeIgniter de PHP http://alexcytek.blogspot.mx/2012/07/como-crear-una-pagina-sencilla-con-php_20.html

    ResponderEliminar
  2. Este comentario ha sido eliminado por el autor.

    ResponderEliminar