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.

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).

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;

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.

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

/// 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

[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)

</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.