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.