Aplicación abc. asp net mvc 3

5,395 views
5,199 views

Published on

introducción Aplicación abc. asp net mvc 3

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
5,395
On SlideShare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
177
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Aplicación abc. asp net mvc 3

  1. 1. Aplicación ABC en ASP.net MVC 3 Razor engineEn este tutorial voy a explicar como programar rápidamente una aplicación ABC muy sencilla pero ideal para entendereste 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 decontrol 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 elcheckbox de HTML5 semantic.
  2. 2. Visual Studio crea la estructura para la aplicación. Esta es la propuesta de microsoft sin embargo a muchosprogramadores cambian un poco la estructura en proyectos. Bien explico rapidamente esta estructura.Content: Se utiliza para almacenar todos los archivos relacionados con laestetica de nuestra App web, Skins, css, imagines, etc.Controllers: Van los controladores que son los que interactúan con lasvistas (acciones de usuario) y los modelos (la fuente de información),estos retornan un ViewResult, JSonResult o FileResult en base a la peticiónrealizada.Models: Se tiene todo el modelado de la lógica de negocios de nuestraaplicación. Incluye todas las clases modelo, DataAccess, Repositorios, etc.Por convención se pone en esta carpeta, pero puede migrarse a unproyecto separado.Scripts: Incluye todos los archivos JS y librerías para AJAX, JQuery (pordefecto las incluye visual studio).Views: Aquí se ponen todos los archivos cshtml, estos archivosinteraccionan con los controladores, pueden ubicarse dentro de unacarpeta shared, aquí se ponen todas las vistas que son de usocomún(controles de usuario, paginas maestras, logins, etc.) o dentro deuna 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. 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 denuestra Base de datos, y de no existir se creara la base de datos automáticamente. Aquí se aplicará el principio de codeFirst de Entity FrameWork, que permite crear la estructura de la base de datos a partir de un modelado de clases. Ahorano profundizaremos en el tema. Vamos a centrarnos un poco más en la aplicación. En otro post explicaré como hacer unuso 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. 4. Bien ahora vamos a agregar la conexión a base de datos para nuestra aplicación y para que se genere nuestra BD porprimera vez.Abrir el archivo web.config y agregar la siguiente cadenaYo lo use con mi servidor de SQLEXPRESS, deben configurarlo con el nombre de la instancia de su servidor si es que noutilizaron 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 sevan a generar mediante un template. Bien ahora dar clic derecho en la carpeta de Controllers y dar clic en add newcontroller.Se han generado una serie de archivos.
  5. 5. Se generó el código para el controller de User y una carpeta llamada User con las vistas para crea, eliminar, editar y elindex, 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 adarle 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. 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/5public ActionResult Delete(int id){UserModel usermodel = db.Users.Find(id);return View(usermodel);}//// POST: /User/Delete/5
  7. 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). Soloveremos 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. 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 /NombreControladorhttp://localhost:4055/UserBien 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 quehemos creado. Esta fue la primera parte. En próximos post explicare las validaciones, helpers y otros detalles para haceruna aplicación más robusta. Este fue un ejemplo y no se aplicaron todas las mejores practicas de desarrollo. Comorecomendació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.

×