En agosto del 2011 escribía un primer tutorial sobre Desarrollo en Modelo Vista Controlador en C# con ASP.NET MVC3 que trataba sobre un primer acercamiento a la programación web siguiendo este patrón arquitectónico.
Obviamente desde entonces, más de dos años, ha llovido mucho. Y hoy quiero compartir un pequeño tutorial, otra vez de iniciación, pero un poquito con más profundidad y con mejores prácticas.
ASP NET Web Application
Para realizar este tutorial puedes utilizar la versión gratuita de Visual Studio 2013 Express, que te permitirá realizar todos los pasos. Realmente una versión 2012, 11 o preview te valdría igualmente; incluso lo puedes realizar sin problemas con Visual Studio 2010 SP1.
Así lo primero que debes hacer es abrir el VS2013 y seleccionar que quieres crear un nuevo proyecto, en C# (también se puede realizar en visual basic .net), del tipo Web y en ASP.NET Web Application.
En la ventana que se abre, puedo escoger entre los diferentes “sabores” de plantillas predeterminadas que me ofrece el IDE. Y entre las cuales escogeré MVC, añadiéndole el proyecto de pruebas unitarias y escribiendo el nombre de dicho proyecto de pruebas.
Otra configuración que quiero cambiar, para hacer el tutorial más simple y sencillo, es modificar el modo de autenticación; indicando que no quiero de ningún tipo, y ahorrándome un montón de código que incluye la propia plantilla.
Si, como tengo yo, tienes enlazado un repositorio de código a tus proyectos (cosa que considero absolutamente imprescindible), Visual Studio te preguntará que con qué tipo de repositorio quieres trabajar: con TFS o con Git. Aquí que cada uno responda como mejor le parezca.
Y Voala!! Ya tengo el esqueleto de la aplicación construida.
Empezando por los cimientos: el modelo
Lo primero que debo tener antes de empezar a programar, es la Visión de lo que quiero hacer. En este caso quiero hacer un Saludador de Nombres. Es decir, veré la palabra Hola seguido de un nombre, y este nombre lo podré introducir en una caja de texto y deberá actualizarse cuando pulse en el botón adecuado.
Ya que quiero cumplir con las buenas prácticas, voy a empezar por los cimientos, y estos son el modelo. Así que creo un nuevo fichero del tipo clase dentro de la carpeta de Models, y en esta defino una clase Personas con dos propiedades: Saludo y Nombre.
Aquí se podría hacer de varias formas, como hacer la propiedad de Saludo como solo de lectura, y que siempre devolviera “Hola” por medio del Get; pero yo he preferido hacer un setter abreviado de las propiedades y, en el constructor de la clase, introducir los valores por defecto.
Dando poder al Controlador
A continuación me voy al controlador, que en este tutorial es HomeController, y voy a realizar dos modificaciones diferentes.
- Modifico el método public ActionResults Index para introducirle el modelo a la vista. Es decir, cuando entre a la vista Index por primera vez, me instanciará una nueva clase persona, y la pasará como modelo a la vista.
- Creo un nuevo método public ActionResults Index pero con un parámetro (Persona persona). Esto lo que hace es permitir que el modelo que viene de la vista, pueda ser capturado por el controlador. El cual, a su vez, lo vuelve a mandar a la vista. Y para indicarle que es un método que recibe información, lo decoro con el tag [HttpPost]
Es importante recordarte que estoy haciendo el tutorial sobre una plantilla estándar de Visual Studio, por lo cual olvídate del resto del código, no lo toques ya que no molesta. Y así no tendrás problemas de compilación.
La Vista, lo que se ve finalmente
Ahora ya hemos llegado a la capa visible, a la capa de representación, a la Vista.
Al abrir el fichero que está situado en Views/Home/Index.cshtml, me encuentro con un montón de código. Al cual, como decía más arriba, no le tienes que hacer ningún caso.
Lo primero que debo añadir, arriba del todo del fichero, como primera fila del documento, es el enlace al modelo que quiero utilizar; que, en este caso, es @model GenbetaDev_MVC_2013.Models.Persona
¿Por qué lo hago así y no por medio del ViewBag? Básicamente porque el uso del Bag es una mala práctica, y el utilizar un modelo me permite trabajar con datos tipados, y con intellisense. Obteniendo un código más limpio y robusto.
Ahora, seleccionando el div superior de la página, introduzco el siguiente código que voy a explicar a continuación.
Lo primero es indicar que voy a abrir un formulario para tener interacción con el servidor. Acuérdate que esto no es webform con sus sistemas automáticos y pesados para mantener la comunicación bidireccional.
A continuación creo dos helper html del tipo label – uno debajo del otro – y le indico qué campo del modelo se debe ver en cada uno.
Continuo dando de alta un helper del tipo textbox, pero que es capaz de enviar información al servidor por medio de un mensaje Post (y por eso he adornado el método oportuno en el Controlador). Aquí la sintaxis es un poco más compleja, al tener que utilizar una expresión lambda para indicarle cual es la propiedad que debe usar para almacenar los datos y enviarlos al servidor.
Por último, añado un botón html normal de submit, que es el que lanzará la actualización de la página.
Esto solo es el principio
Y así he conseguido lo que quería. En una casilla pongo mi nombre, y cuando pulso en Enviar Consulta, se me actualiza el saludo.
Lo importante de este tutorial es que se realiza una verdadera separación en tres capas de la aplicación Web, siguiendo las mejores prácticas al utilizar las propiedades de un modelo para recibir y transferir información desde la Vista, y manteniendo desacopladas las funciones de cada capa.
Fíjate que ahora podría extender las capacidades de la aplicación a leer de una base de datos, sin tener que modificar más código que el del modelo. Incluso puedo convertir la aplicación en un buscador, sin tener que modificar la Vista, y solamente cambiar levemente el Controlador; dejando los cambios grandes al Model... que también se podría evitar utilizando técnicas más avanzadas.
Espero que este artículo te motive a profundizar en este patrón arquitectónico.
