Este documento explica cómo crear una aplicación básica en ASP.NET MVC 3 usando Razor para gestionar una lista de clientes. Describe la estructura del proyecto MVC, la creación de un modelo de datos, un controlador y vistas. Se genera una base de datos, listado y funcionalidad básica de crear/editar/eliminar clientes para explicar conceptos básicos de MVC.

1. Aplicación ABC en ASP.net MVC 3 Razor engine
En este tutorial voy a explicar como programar rápidamente una aplicación ABC muy sencilla pero ideal para entender
este patrón de diseño. Empezamos con una breve explicación.
¿Qué es MVC?
Es uno de los dos modelos de programación que propone Microsoft para el desarrollo de aplicaciones Web.
• ASP.NET WebForm (orientado a eventos)
• ASP.NET MVC (orientado a acciones)
Es un estilo de arquitectura de software que separa los datos de una aplicación, la interfaz de usuario, y la lógica de
control en tres componentes distintos (capas: Vista-Modelo-Controlador).
Empezando con el código..
Yo estoy trabajando con Visual Studio 2010 SP1 y el FrameWork MVC 3 para ASP.net, lo pueden descargar de acá
http://www.asp.net/mvc/mvc3.
Bien comenzamos con un nuevo proyecto.
Seleccionan aplicacion de ASP.NET MV3 y aceptar.
En el siguiente cuadro de dialogo seleccionan aplicación de internet, el view Engine debe ser Razor y seleccionan el
checkbox de HTML5 semantic.

2. Visual Studio crea la estructura para la aplicación. Esta es la propuesta de microsoft sin embargo a muchos
programadores cambian un poco la estructura en proyectos. Bien explico rapidamente esta estructura.
Content: Se utiliza para almacenar todos los archivos relacionados con la
estetica de nuestra App web, Skins, css, imagines, etc.
Controllers: Van los controladores que son los que interactúan con las
vistas (acciones de usuario) y los modelos (la fuente de información),
estos retornan un ViewResult, JSonResult o FileResult en base a la petición
realizada.
Models: Se tiene todo el modelado de la lógica de negocios de nuestra
aplicación. Incluye todas las clases modelo, DataAccess, Repositorios, etc.
Por convención se pone en esta carpeta, pero puede migrarse a un
proyecto separado.
Scripts: Incluye todos los archivos JS y librerías para AJAX, JQuery (por
defecto las incluye visual studio).
Views: Aquí se ponen todos los archivos cshtml, estos archivos
interaccionan con los controladores, pueden ubicarse dentro de una
carpeta shared, aquí se ponen todas las vistas que son de uso
común(controles de usuario, paginas maestras, logins, etc.) o dentro de
una carpeta con el nombre del controlador asociado.
Web.Config: Contiene las configuraciones globales de nuestra App,
cadena de conexión a BDD, autenticación, etc.
Global.asax: Contiene el mapeo de los controladores (tabla de rutas).

3. Bien vamos a comenzar a crear un nuevo Modelo. Nuestra aplicación inicialmente visualizará una cartera de clientes,
permitirá eliminar, actualizar, y ver el detalle de cada cliente. Comencemos.
Tendrá la siguiente estructura:
Ahora es necesario crear un DbContext, esta clase va a manejar la actualización, inserción y eliminación de datos de
nuestra Base de datos, y de no existir se creara la base de datos automáticamente. Aquí se aplicará el principio de code
First de Entity FrameWork, que permite crear la estructura de la base de datos a partir de un modelado de clases. Ahora
no profundizaremos en el tema. Vamos a centrarnos un poco más en la aplicación. En otro post explicaré como hacer un
uso correcto de Entity Framework en este tipo de proyectos.
Agregar el siguiente namespace y código debajo de la clase UserModel: using System.Data.Entity;

4. Bien ahora vamos a agregar la conexión a base de datos para nuestra aplicación y para que se genere nuestra BD por
primera vez.
Abrir el archivo web.config y agregar la siguiente cadena
Yo lo use con mi servidor de SQLEXPRESS, deben configurarlo con el nombre de la instancia de su servidor si es que no
utilizaron el nombre con el que se instala por default.
Bien ahora vamos a crear un controlador para ese modelo. Y las vistas que van a consumir ese controller, las vistas se
van a generar mediante un template. Bien ahora dar clic derecho en la carpeta de Controllers y dar clic en add new
controller.
Se han generado una serie de archivos.

5. Se generó el código para el controller de User y una carpeta llamada User con las vistas para crea, eliminar, editar y el
index, que será nuestro listado de usuarios.
Cuando se agregó el controller se especificó el modelo y el template para leer y escribir ActionsResults y Views. Vamos a
darle una examinada al código.
using System;
using System.Collections.Generic;
using System.Data;
using System.Data.Entity;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using Usuarios.Models;
namespace Usuarios.Controllers
{
public class UserController : Controller
{
private UserDBContext db = new UserDBContext();
//
// GET: /User/
/// <summary>
/// Vista que se mostrará por defecto con la lista de usuarios
/// al cargar la pagina http://localhost/User
/// </summary>
/// <returns></returns>
public ViewResult Index()
{
return View(db.Users.ToList());
}
/// <summary>
/// dado un id vamos a buscar en la tabla usuarios ese id y regresar la vista
/// que visualiza el detalle del usuario
/// </summary>
/// <param name="id">id que se desea mostrar</param>
/// <returns></returns>
public ViewResult Details(int id)
{
UserModel usermodel = db.Users.Find(id);
return View(usermodel);
}
//
// GET: /User/Create
/// <summary>
/// retorna la vista para introducir los datos
/// de un nuevo usuario
/// </summary>
/// <returns></returns>
public ActionResult Create()
{
return View();
}
//
// POST: /User/Create
/// <summary>
/// despues de introducir los datos de un nuevo usuario

6. /// se agregar un registro a la tabla de users y se guardan los cambios
/// se retorna la vista principal. ActionResult Index()
/// </summary>
/// <param name="usermodel"></param>
/// <returns></returns>
[HttpPost]
public ActionResult Create(UserModel usermodel)
{
if (ModelState.IsValid)
{
db.Users.Add(usermodel);
db.SaveChanges();
return RedirectToAction("Index");
}
return View(usermodel);
}
//
// GET: /User/Edit/5
/// <summary>
/// dado un id se busca un registro en la bd
/// y se retorna una vista con la informacion de
/// ese user. View(usermodel) para proceder a editar
/// </summary>
/// <param name="id"></param>
/// <returns></returns>
public ActionResult Edit(int id)
{
UserModel usermodel = db.Users.Find(id);
return View(usermodel);
}
//
// POST: /User/Edit/5
/// <summary>
/// despues de editar el user se actualiza su state
/// y se guardan los cambios.
/// </summary>
/// <param name="usermodel"></param>
/// <returns></returns>
[HttpPost]
public ActionResult Edit(UserModel usermodel)
{
if (ModelState.IsValid)
{
db.Entry(usermodel).State = EntityState.Modified;
db.SaveChanges();
return RedirectToAction("Index");
}
return View(usermodel);
}
//
// GET: /User/Delete/5
public ActionResult Delete(int id)
{
UserModel usermodel = db.Users.Find(id);
return View(usermodel);
}
//
// POST: /User/Delete/5

7. [HttpPost, ActionName("Delete")]
public ActionResult DeleteConfirmed(int id)
{
UserModel usermodel = db.Users.Find(id);
db.Users.Remove(usermodel);
db.SaveChanges();
return RedirectToAction("Index");
}
protected override void Dispose(bool disposing)
{
db.Dispose();
base.Dispose(disposing);
}
}
}
Y la vista que crea la tabla de usuarios y que es mostrada al inicio (ahora no explicaremos los HTML Helpers). Solo
veremos cómo se genera la tabla únicamente con html y código embebido solo para la presentación.
@model IEnumerable<Usuarios.Models.UserModel>
@{
ViewBag.Title = "Index";
}
<h2>Index</h2>
<p>
@Html.ActionLink("Create New", "Create")
</p>
<table>
<tr>
<th>
Name
</th>
<th>
LastName
</th>
<th>
Age
</th>
<th>
RegistrationDate
</th>
<th></th>
</tr>
@foreach (var item in Model) {
<tr>
<td>
@Html.DisplayFor(modelItem => item.Name)
</td>
<td>
@Html.DisplayFor(modelItem => item.LastName)
</td>
<td>
@Html.DisplayFor(modelItem => item.Age)
</td>
<td>
@Html.DisplayFor(modelItem => item.RegistrationDate)

8. </td>
<td>
@Html.ActionLink("Edit", "Edit", new { id=item.ID }) |
@Html.ActionLink("Details", "Details", new { id=item.ID }) |
@Html.ActionLink("Delete", "Delete", new { id=item.ID })
</td>
</tr>
}
</table>
Bien ahora vamos a correr nuestra App Web. Y podemos acceder a la página agregando al url /NombreControlador
http://localhost:4055/User
Bien ahora vamos a crear un usuario y editar alguno.
Incluso nuestra aplicación genera las validaciones para los formularios basándose en el tipo de dato del modelo que
hemos creado. Esta fue la primera parte. En próximos post explicare las validaciones, helpers y otros detalles para hacer
una aplicación más robusta. Este fue un ejemplo y no se aplicaron todas las mejores practicas de desarrollo. Como
recomendación lean el código y hagan debug para ver el flujo de la aplicación y entender mejor el patrón.
Espero que les haya servido.