Tutorial de iniciacin en ASP.

NET MVC con

Visual Studio 2013
En agosto del 2011 escriba un primer tutorial sobre Desarrollo en Modelo Vista
Controlador en C# con ASP.NET MVC3 que trataba sobre un primer acercamiento
a la programacin web siguiendo este patrn arquitectnico.
Obviamente desde entonces, ms de dos aos, ha llovido mucho. Y hoy quiero
compartir un pequeo tutorial, otra vez de iniciacin, pero un poquito con ms
profundidad y con mejores prcticas.
ASP NET Web Application

Para realizar este tutorial puedes utilizar la versin gratuita de Visual Studio
2013 Express, que te permitir realizar todos los pasos. Realmente una versin
2012, 11 o preview te valdra 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# (tambin 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, aadindole el proyecto de pruebas unitarias y escribiendo el
nombre de dicho proyecto de pruebas.

Otra configuracin que quiero cambiar, para hacer el tutorial ms simple y sencillo,
es modificar el modo de autenticacin; indicando que no quiero de ningn tipo, y
ahorrndome un montn de cdigo que incluye la propia plantilla.

Si, como tengo yo, tienes enlazado un repositorio de cdigo 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 aplicacin construida.

Empezando por los cimientos: el modelo

Lo primero que debo tener antes de empezar a programar, es la Visin 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 botn adecuado.
Ya que quiero cumplir con las buenas prcticas, 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 podra 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 continuacin me voy al controlador, que en este tutorial es HomeController, y
voy a realizar dos modificaciones diferentes.

Modifico el mtodo 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 mtodo public ActionResults Index pero con un
parmetro (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 mtodo que recibe
informacin, lo decoro con el tag [HttpPost]
Es importante recordarte que estoy haciendo el tutorial sobre una plantilla
estndar de Visual Studio, por lo cual olvdate del resto del cdigo, no lo toques
ya que no molesta. Y as no tendrs problemas de compilacin.
La Vista, lo que se ve finalmente

Ahora ya hemos llegado a la capa visible, a la capa de representacin, a la Vista.
Al abrir el fichero que est situado en Views/Home/Index.cshtml, me encuentro
con un montn de cdigo. Al cual, como deca ms arriba, no le tienes que hacer
ningn caso.
Lo primero que debo aadir, 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? Bsicamente porque el uso
del Bag es una mala prctica, y el utilizar un modelo me permite trabajar con
datos tipados, y con intellisense. Obteniendo un cdigo ms limpio y robusto.
Ahora, seleccionando el div superior de la pgina, introduzco el siguiente cdigo
que voy a explicar a continuacin.

Lo primero es indicar que voy a abrir un formulario para tener interaccin con el
servidor. Acurdate que esto no es webform con sus sistemas automticos y
pesados para mantener la comunicacin bidireccional.
A continuacin 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
informacin al servidor por medio de un mensaje Post (y por eso he adornado el
mtodo oportuno en el Controlador). Aqu la sintaxis es un poco ms compleja, al
tener que utilizar una expresin lambda para indicarle cual es la propiedad que
debe usar para almacenar los datos y enviarlos al servidor.
Por ltimo, aado un botn html normal de submit, que es el que lanzar la
actualizacin de la pgina.
Esto solo es el principio

Y as he conseguido lo que quera. 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 separacin en
tres capas de la aplicacin Web, siguiendo las mejores prcticas al utilizar las
propiedades de un modelo para recibir y transferir informacin desde la Vista, y
manteniendo desacopladas las funciones de cada capa.
Fjate que ahora podra extender las capacidades de la aplicacin a leer de
una base de datos, sin tener que modificar ms cdigo que el del modelo. Incluso
puedo convertir la aplicacin en un buscador, sin tener que modificar la Vista, y
solamente cambiar levemente el Controlador; dejando los cambios grandes al
Model que tambin se podra evitar utilizando tcnicas ms avanzadas
(Application, 2014).