Aplicación MVC + Razor Simple

MVC, Modelo Vista Controlador, es un patrón de arquitectura de una aplicación, el cual define una clara separación entre la interfaz del usuario, y la capa de negocios de la aplicación. 
Como su nombre lo indica, las tres partes principales de este patrón son:

Controlador: Es el elemento encargo de recibir y procesar la peticiones HTTP, desde el usuario, y se encarga de comunicarse con el Modelo, para devolver la Vista correcta. Es el corazón del patrón, se encarga de coordinar la ejecución, generar el modelo y devolver la vista.
Modelo: Es la capa de datos y entidades de la aplicación.

Vista: Es la que recibe los datos del modelo, para representarlos visualmente.

La "Vista", como vimos en la entrada previa, puede ser renderizada en la forma clásica aspx, en Razor, o en otras formas más. Por lo tanto como último paso el motor de renderizado del ASP.NET MVC se encarga de traducir la vista, de acuerdo al View Engine utilizado para devolver al usuario los datos.

A continuación procedemos a crear una aplicación básica ASP.NET MVC utilizando el Motor de renderizado RAZOR.

a) CREAR LA APLICACION ASP.NET MVC

Dentro de Microsoft Visual Studio, se debe "Crear Nuevo Proyecto..."
Se selecciona dentro del árbol VISUAL C# -> Web, y se selecciona ASP.NET MVC 4 Web Application.
Se ingresa un nombre para el proyecto (.csproj), la ruta donde se guardaran los archivos, y un nombre para la solución(sln).

Posteriormente se debe seleccionar una plantilla, "Empty", y el View Engine "Razor".

Luego de haber creado el proyecto, se puede apreciar en el explorador de soluciones el grupo de carpetas y archivos que han sido creadas automáticamente.

b) CREAR UN MODELO

En el explorador de soluciones, click derecho sobre la Carpeta MODELS, Agregar -> Clase.

Se ingresa un nombre a la clase, para este ejemplo UsuarioModel.cs

Un Modelo es una Clase con propiedades. Las propiedades que definamos en el modelo deben estar de acuerdo a la Interface de Usuario.

c) CREAR UN CONTROLADOR

Se debe crear un controlador. En el explorador de soluciones, click derecho sobre la Carpeta CONTROLLERS, Agregar -> Controller.

Se le coloca el nombre teniendo en cuenta de dejar el sufijo controller

Se crear un controlador vacío, aunque ya es agregada por defecto el método de Acción "Index".

d) CREAR UNA VISTA

Para crear la Vista correspondiente al ActionResult Index, del Controlador UsuarioController, se debe hacer click con el botón derecho en el código correspondiente el método de Acción, y posteriormente hacer click en "Agregar Vista".

En el momento de crear la vista pueden definirse una seria de opciones, tales como el Motor de renderizado, se puede determinar si es una vista fuertemente tipada, es decir relacionada directamente a un modelo, en este caso la relacionamos al modelo creada previamente UsuarioModel.
También puede determinarse si se desea crear una vista vacía, una vista de detalle de datos, de alta de datos, de edición, de eliminación o de listado.
Por último puede determinarse el nombre de la master page, layout, la cual estaría alojada dentro de la carpeta Shared. Para este ejemplo en particular trabajeremos sin Layout Master.

Como puede verse se crea el código de la vista, con el renderizado Razor.

En este momento, si se inicia la aplicación, y accedemos dentro de nuestro servidor de desarrollo a la carpeta: http://localhost/Usuario (tal y como es el nombre del controlador) estariamos recuperando la Vista INDEX de dicho Controlador. Para el ejemplo, una página en blanco.

Ahora realizamos una serie de modificaciones en el código, primero dentro del controlador, realizamos una llamada al paquete Models de nuestra aplicación, y dentro del método de Acción de la llamada al Index, creamos una nueva instancia del Modelo Usuario, y se la pasamos a la Vista (dado que esta esta fuertemente tipada).

var usuarioModelo = new UsuarioModel() 
                {
                    IdUsuario=1,
                    Nombre="Sebastián",
                    Email="loquesea@gmail.com" 
                };
return View(usuarioModelo);

Y por último dentro del contenido de la vista, mostramos el nuevo usuario creado, por medio de una label para el titulo, y una caja de texto para el valor

    <div>
        @*Codigo Razor => Muestra el Nombre*@
        <span>@Html.LabelFor(m=>m.Nombre)</span>
        <span>@Html.TextBoxFor(m=>m.Nombre)</span>
  </div>

Si ahora se inicia nuevamente la aplicación, y accedemos dentro de nuestro servidor de desarrollo a la carpeta: http://localhost/Usuario, se observarán en acción los cambios realizados.

Hasta aquí esta primera aplicación simple en MVC con Motor RAZOR, más adelante iremos agregando funcionalidades extras, como conexiones a base de datos, Altas, Bajas, Consultas y Actualizaciones de datos.