El modelo de arquitectura Model-View-Controller (MVC) separa una aplicación en tres componentes principales: el modelo, la vista y el controlador. Fue descrito por primera vez1979 por Trygve Reenskaug, de los laboratorios de Xerox, en la publicación Programación de Aplicaciones en Smalltalk-80™: Como utilizar Modelo Vista Controlador.
La implementación de Microsoft ASP.NET MVC proporciona una alternativa al modelo de formularios Web Forms de ASP.NET para crear aplicaciones web. ASP.NET MVC es un marco de presentación de poca complejidad y fácil de testear que, como las aplicaciones basadas en formularios Web Forms, se integra con características de ASP.NET como son las páginas maestras y la autenticación basada en pertenencias.
De todas sus ventajas a mí me resulta especialmente útil el control total que tengo sobre el código HTML que produzco, al no utilizar sistemas de persistencia como los ViewStates u objetos como eventos como el PostBack.
Creando el proyecto
Como siempre en Visual Studio, tengo los asistentes de creación de proyectos que nos preparan plantillas de proyectos predefinidos. En este caso selecciono un proyecto en C#, del tipo Web con la plantilla de Aplicación Web de ASP.NET MVC3.
El siguiente elección es configurar la plantilla como Aplicación de Internet y elegir el motor de vistas que quiero utilizar. ¿Y qué es eso de motor de vistas? Pues a este nivel de inicio se podría resumir en el lenguaje con el cual vamos a construir nuestras vistas, aunque realmente es mucho más que eso. El que he estado utilizado antes de la llegada de MVC2, en el propio de los WebForms de .Net, pero ha llegado arrasando Razor. Mucho más ligero, entendible y mantenible.
Como tengo instalado el SP1 de Visual Studio, también me ofrece la capacidad de utilizar la semántica de HTML5 en mis proyectos MVC3. Y, como no, crear automáticamente el proyecto de testing. Además de permitirme utilizar otro framework de testing que no sea MSTest, aunque en este artículo es el que voy a utilizar.
Hello World
Por el tipo de plantilla que he escogido, Visual Studio ha construido todo un esquema de carpetas y ficheros. Es más, ha construido todo lo necesario para poder realizar la validación de usuarios, además de las carpetas de Controladores, Modelos y Vistas (MVC). Si acaso, me instala por defecto las librerías jQuery 1.5x. Cuando ya están las 1.6 cuando estoy escribiendo estas letras.
Pero vamos a ver cómo se ve en el navegador y donde puedo poner mi Hello World. Para ello, aunque lo ideal es configurar un Site en mi IIS, lanzo la depuración y se abre la página en el servidor de desarrollo que integra Visual Studio.
Y ahora voy a escribir mi saludo de la forma más sencilla, que no la más correcta. Me voy a la carpeta de View -> Home y abro el fichero index.cshtml y lo edito para quitar la fila de más información y añado mi saludo entre negritas
@{
ViewBag.Title = "Página principal";
}
<h2>@ViewBag.Message</h2>
<p>
<b>Hola Mundo</b>
</p>
Al refrescar la página en el navegador obtengo el resultado esperado, mi primer Hello World en Asp.Net MVC3
Mejorando lo presente
Pero esta forma de escribir código directamente en html no utiliza para nada la potencia del patrón de arquitectura. De hecho, le sobra todo porque lo podría haber hecho en un fichero html y me hubiera dado el mismo resultado.
Asi que voy a utilizar una primera forma, de las numerosas que puedo utilizar, de pasar información de la capa de los Controladores a la capa de Vistas. Y para eso voy a utilizar el ViewBag, un objeto dinámico al cual le puedo ir añadiendo propiedades y que está disponible en ambas capas. Vamos, como una variable de sesión pero más ordenada. Asi que esta vez abro en Controllers -> HomeController.cs y modifico el contenido de las propiedades Message del ViewBag, además de añadir una nueva llamada Saludo.
Ojo, para realizar estos cambios tengo que parar la depuración. Por lo cual antes copia la url en donde se ha abierto la página ya que podrás acceder a ella directamente sin necesidad de depurar, al quedarse funcionando el servidor web de desarrollo aunque no estemos debugeando. Por ejemplo, en este artículo la url es: http://localhost:14907/
public class HomeController : Controller
{
public ActionResult Index()
{
ViewBag.Message = “GenbetaDev. Tutorial MVC3.”;
ViewBag.Saludo = “Hola Mundo”;
return View();
}
public ActionResult About()
{
return View();
}
}
@{
ViewBag.Title = "Página principal";
}
<h2>@ViewBag.Message</h2>
<p>
<b>@ViewBag.Saludo</b>
</p>
Antes de continuar, señalarte que la manera de decirle a la vista que voy a introducir algo desde el controlador es iniciar la sentencia con el carácter @. Si, tiene toda la pinta de PHP o ASP clásico o cualquiera de los antiguos lenguajes que producían espantoso código spaguetti. Pero esto es porque estoy utilizando los mecanismos más básicos y menos recomendados.
Mejor con Helpers
Para evitar lo anterior, utilicé toda la potencia de MVC3 que me permite construir una aplicación fuertemente tipada, si bien es cierto que para un Hello World es bastante sobredimensionada; y que da un primer vistazo a cómo se pasa la información desde la capa de modelo hasta la capa de Vista pasando por el Controlador.
Entonces lo primero es ir a la carpeta de Modelos y hacer un copy&paste del fichero cs existente y renombrarlo a HomeModel.cs. A continuación lo edito para que solamente me quede la siguiente clase.
public class HelloWorld
{
[DataType(DataType.Text)]
public string Saludo { get; set; }
}
Ahora me voy al controlador y le digo que mande a la vista el modelo del tipo HelloWorld. Pero para eso debo añadir la referencia a el NameSpace model del proyecto. Creo una instancia de la clase HelloWorld y le introduzco el texto a visualizar en la propiedad adecuada.
using GenbetaDevMVC3.Models;
public class HomeController : Controller
{
HelloWorld saludo = new HelloWorld();
public ActionResult Index()
{
ViewBag.Message = “GenbetaDev. Tutorial MVC3.”;
saludo.Saludo = “Hola Mundo desde un Helper”;
return View(saludo);
}
public ActionResult About()
{
return View();
}
}
@{
ViewBag.Title = "Página principal";
}
<h2>@ViewBag.Message</h2>
<p>
<b>@Html.DisplayText("Saludo")</b>
</p>
Y con esto creo que he dado material para estarle dando vueltas un buen rato. Espero que sea de utilidad.
Más información | Página oficial de ASP.NET MVC
