MVC 4 desarrollando una aplicacion web desde cero Parte I

ASP.NET MVC es un cambio radical para el desarrollo web usando la plataforma de Microsoft que destaca una arquitectura limpia, patrones de diseño y capacidad de pruebas, entre otras cosas.

ASP.NET MVC es un marco de desarrollo Web de Microsoft que combina la eficacia  y la pulcritud de la arquitectura Modelo-Vista-Controlador (MVC), las ideas más avanzados hasta la fecha y las técnicas de desarrollo ágil, y las mejores partes de la plataforma ASP.NET existente.

Es una alternativa completa a Formas tradicionales de Web ASP.NET. Bueno no ahondaremos mas que esta breve introducción ya que en linea hay mucha de información , así que vamos a lo practico.

Tu primera aplicacion MVC

Para desarrollar la aplicacion utilizaremos Microsoft Visual Studio Express 2012 para web, es gratis y nos permitira trabajar bien lo que necesitamos. lo podemos descargar desde aqui: 

Descarga el Visual Studio 2012 Express

La mejor forma de apreciar este marco de desarrollo es comenzarlo a usar asi que manos a la obra. Crearemos una aplicacion sencilla y poco a poco iremos agregando mas complejidad.

Preparando la Estacion de Trabajo (Workstation)

Lo unico necesario para desarrollar una aplicacion MVC4 es instalar el Visual Studio 2012 el cual contiene todo lo necesario para iniciar, en nuesto caso el Visual Studio Express 2012 for Web. Una vez que has instalado el Visual Studio, estas listo para iniciar. 

Creando un nuevo proyecto ASP.NET MVC

Iniciamos creando un nuevo proyecto MVC dentro de Visual Studio. Seleccionamos Archivo / Nuevo Proyecto y en el cuadro de dialogo que se despliega seleccionamos  dentro de la seccion "Visual C#" dentro del apartado "web" la opcion de  "Aplicacion web de ASP.NET MVC4".

De esta forma creamos el proyecto "MiPrimerAplicacion" y presionamos Aceptar. La siguiente ventana que se muestra nos da la opcion de escoger entre diferentes  tipos de plantillas para proyectos MVC.

Para nuestro caso utilizaremos un proyecto limpio seleccionamos "Vacio" el cual crea un proyecto con una estructura de carpetas básica, pero sin los archivos necesarios para crear nuestra apliacion MVC, estos archivos los iremos creando con forme avancemos.  Seleccionamos Aceptar. 

Una vez creado el proyecto veremos un determinado numero de archivos y carpetas dentro del Explorador de Soluciones. Esta es la estructura por default de un proyecto de MVC4. Si intentamos correr nuestra aplicacion vemos el siguiente error 404 Not Found Error. 

Creando nuestro primer Controlador

Dentro de la arquitectura MVC, las peticiones entrantes son manejadas por los controllers(Controladores). Los controladores son simples clases en C# (normalmente heredando de System.Web.Mvc.Controller). Cada metodo publico dentro de un controlador es conocido como action method (Metodos de Accion), los cuales significan que puedes invocarlos desde Web por medio de URL para permitirles alguna accion.  La convencion dentro de MVC es colocar los controllers en una carpeta llamada Controllers, la que se crea en automatico juntos con el proyecto. Agregamos un nuevo controlador como se ve en la imagen: 

Le ponemos el nombre de HomeController , esta es otra convencion dentro de MVC, la terminacion "Controller" del nombre de cada controlador creado, y asi la usaremos. Las opciones de scaffolding nos premite crear nuestro controlador usando algun template con funciones comunes, pero nosotros usaremos un controlador vacio por lo que dejamos seleccionado la opcion por defautl "vaciar controlador MVC" o "Empty MVC Controller" (esta medio raro como tradujeron esa opcion al español a mi parecer debia se Controlador Vacio MVC o algo asi). Vemos nuestro controlador HomeController creado dentro de nuestra carpeta Controllers.

Puedes ver que la clase llamada HomeController hereda de System.Web.Mvc.Controller.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace MiPrimerAplicacion.Controllers
{
    public class HomeController : Controller
    {
        //
        // GET: /Home/

        public ActionResult Index()
        {
            return View();
        }

    }
}



Una buena manera de iniciar con MVC es haciendo algunos cambios a la clase controlador. 

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace MiPrimerAplicacion.Controllers
{
    public class HomeController : Controller
    {
        //
        // GET: /Home/

        public string Index()
        {
            return "Hola Mundo";
        }

    }
}





Hemos cambiado el action method llamado Index el cual me regresara una cadena "Hola Mundo". Al correr de nuevo el proyecto y se mostrara el resultado en el explorador como sigue: 











Entendiendo las Rutas




Tanto para los modelos como para las vistas y los controladores (models, views y controllers), MVC usa el ASP.NET routing system, el cual decide el mapa particular de URLs para determinado controlador y accion. Cuando se crea el proyecto MVC, este agrega algunas rutas por default para iniciar. Puedes realizar peticiones a cualquiera de las siguientes URLs y ellas te llevaran al Index del HomeController: 


/
/Home
/Home/Index


Este es un buen ejemplo de los beneficios de las convenciones que MVC maneja. En este caso la convencion es tener un controlador llamado HomeController el cual nos servira de punto de inicio de nuestra aplicacion. La configuracion respecto al punto de inicio de nuestra aplicacion esta en el archivo Global.asax.cs.




Renderizando las Paginas Web 


En nuestro ejemplo la salida no fue HTML - solo fue una cadena "Hola Mundo". Para producir una respuesta HTML a una peticion del explorador , necesitamos crear una vista. 




Creando y Renderizando una Vista (View)

Modificaremos nuestro metodo de accion Index.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace MiPrimerAplicacion.Controllers
{
    public class HomeController : Controller
    {
        //
        // GET: /Home/

        public ViewResult Index()
        {
            return View();
        }

    }
}

En este momento estamos regresando un objeto ViewResult de un metodo de accion, con esto indicamos a MVC que renderize una vista. Se crea llamando al metodo View sin parametros, indicandole al MVC renderizar una vista por default para la accion.

Si corremos la aplicacion en este punto, podremos ver que el Framework MVC trata de encontrar la vista por default a usar, como se muestra a continuacion:

Este mensaje de error es de bastante ayuda, pues se nos muestra no solo que MVC no encuentra la vista para el metodo de accion correspondiente, sino las rutas donde deberia de estar, en base a la convencion que toma en cuenta.

Para crear la vista detenemos la ejecucion de nuestro proyecto y damos click derecho sobre el metodo de accion Index y elegimos agregar vista.

En esta parte deseleccionamos Usar una pagina de diseño o maestra. No estamos usando layouts en este ejemplo. Mas adelante vemos como implementarlas. Damos click en aceptar y vemos que se agrega una vista llamada Index dentro de la carpeta de Views/Home/. En automatico se ha creado la carpeta Home dentro de Views.

El archivo Index.cshtml es creado, esta extension indica a C# que la vista es un archivo que se procesara con Razor. Las versiones anteriores de MVC  corrian sobre el motor de vistas de ASPX, por lo cual los archivos tenian la extension .aspx .

Hasta arriba del documento observamos la siguiente linea.

@{
    Layout = null;
}

Esta expresion es interpretada por el motor de vistas Razor. este es un ejemplo muy sencillo. Esto le indica a Razor que escoginos no usar una pagina maestra. Ignoraremos Razor por el momento. Y modificamos el codigo de la vista.

Corremos el proyecto y listo .

Ahora nuestro me metodo Index regresa un ViewResult, se le indico a MVC renderizar una vista y regresar HTML. No le dijimos al MVC que vista deberia usar, simplemente uso la convencion de nombres para encontrarlo automaticamente. Esta convencion indica que la vista tiene el mismo nombre del metodo de accion y esta contenido en una carpeta que lleva el nombre del controlador ( /Views/Home/Index.cshtml).

Podemos regresar otros reultados desde los metodos de accion mas alla de cadenas  y objetos ViewResult.  Por ejemplo al retornar un RedirectResult, le indicamos al explorador que nos redireccione a otra URL. Si regresamos un HttpUnauthorizedResult, forzamos al usuario a identificarse.  todos estos objetos son conocidos como action results, y ellos son derivados de la clase ActionResult. El systema de resultados de accion nos permite encapsular y reusar respuestas comunes en las acciones.