Una introducción a ASP.NET MVC

1. Introducción a ASP.NET MVC
Danae Aguilar Guzmán
MCT, MS, MCTS, MCP
danaeaguilar@gmail.com

2. Tipos de proyectos Web ASP.NET
Tipos de proyectos Web ASP.NET:
• Web Forms:
• ASP.NET Web Site
• ASP.NET Web application
• ASP.NET MVC projects

3. Web Forms vs MVC
Web Forms:
 Construido sobre
ASP.NET
 RAD (Rapid application
development)
 Desarrollo Drag & drop
 HTML generado por los
controles
 Event-driven
 Solo un form
 Viewstate
 Difícil de testear
MVC:
 Construido sobre ASP.NET
 Control total sobre la
generación de HTML
 Separación de
responsabilidades (Model-
View-Controller)
 Fácil de testear
 No hay Postback ni
Viewstate

4. El ciclo de vida de las aplicaciones
Web
HTTP
Handler
Initialization
LoadViewState
LoadPostbackData
Load
RaisePostBackEvent
SaveViewState
PreRender
Render
Se inicia con la
invocación a
ProcessRequest()
del HTTP Handler
El markup se
retorna al web
server
Los controles lanzan
el evento Init
Solo en Postbacks
Solo en Postbacks
Solo en Postbacks
Los controles lanzan
el evento Load
Ciclo de Vida de un Request Web Forms:

5. El ciclo de vida de las aplicaciones
Web
Ciclo de Vida de un Request MVC:
Browser
POST
new
Invoke action
Invoke
method
Lookup view
Render (viewData)
HTML
URL
Routing
Controller Model View

6. El ciclo de vida de las aplicaciones
Web
Comparando el Ciclo de Vida ASP.NET vs MVC:
IIS
Browser
ASP.NET HTTP runtime
Response output stream
Page class
Mapped page HTTP handler
Page life cycle
(preliminaries)
Postback event
Page life cycle
(finalization)
Updating Controls
URL router
Controller Factory
Method execution
View Engine
Mapped MVC HTTP handler
Web
Forms
ASP.NET
MVC

7. Creando un Sitio ASP.NET MVC
1. En VS Seleccionar File | New| Project…:
2. Seleccionar ASP.NET MVC 4 Web
Application:

8. Creando un Sitio ASP.NET MVC
3. Seleccione el template Basic y click on OK

9. Creando un Sitio ASP.NET MVC
4. Tendremos esta estructura:

10. Creando un Sitio ASP.NET MVC
5. seleccione el folder Controllers y hagale
click derecho, seleccione Add > Controller...

11. Creando un Sitio ASP.NET MVC
6. Especifique el nombre HomeController y
click en Add

12. Creando un Sitio ASP.NET MVC
7. En el método Index que se ha generado
haga click derecho sobre el código y
seleccione la opción Add View…

13. Creando un Sitio ASP.NET MVC
8. El nombre de la vista Index, y click en el
botón Add

14. Creando un Sitio ASP.NET MVC
9. Observe la estructura que se ha generado:
10. Edite Index.cshtml y ejecute la aplicación.

15. MVC Routing
MVC Routing
 Nos permite crear un sistema de mapeo
para poder encontrar/llamar a los
controladores y sus acciones
 El enrutado por defecto se define en
App_Start/RouteConfig.cs

16. MVC Routing
MVC Routing
public static void RegisterRoutes
(RouteCollection routes)
{
routes.MapRoute(
name: "Default",
url: "{controller}/{action}/{id}",
defaults: new { controller = "Home",
action = "Index",
id = UrlParameter.Optional }
);
}

17. Controller Action Result
ActionResult de los Controllers
 Nos permite especificar que vista retornar o
que datos retornará la acción del Controller
 Podemos retornar un archivo:
public ActionResult Search(string name = "french")
{
return File(Server.MapPath("~/Content/site.css"),
"text/css");

18. Controller Action Result
ActionResult de los Controllers
 Podemos retornar datos Json:
public ActionResult Search(string name)
{
var mensage = Server.HtmlEncode(name);
return Json(new { Message = mensage,
Name = "Juanito" });

19. Modelos MVC
• Son clases de .NET.
• Representan la información que se mostrará
en el sitio.
public class LoginModel
{
[Display(Name = "User name")]
public string UserName { get; set; }
[DataType(DataType.Password)]
[Display(Name = "Password")]
public string Password { get; set; }
[Display(Name = "Remember me?")]
public bool RememberMe { get; set; }
}

20. Modelos MVC
Creando un modelo con Entity Framework
Code First.
1. Crear el DbContext
public class LibrosContext : DbContext
{
public LibrosContext()
: base("LibrosDb")
{
}
public DbSet<Libro> Libros { get; set; }
}

21. Modelos MVC
2. Agregar las tablas y compilar:
[Table("Libros")]
public class Libro
{
[Key]
public int LibroId { get; set; }
public string Titulo { get; set; }
public string Autor { get; set; }
public DateTime FechaPublicacion { get; set; }
public int Paginas { get; set; }
}

22. Modelos MVC
3.1. Crear el controlador:
Para Crear Nuevos Libros:
– Agregar la Accion para GET:
public class MiLibroController : Controller
{
// GET: /MiLibro/Crear
public ActionResult Crear()
{
return View();
}

23. Modelos MVC
3.2. Agregar la referencia al modelo en la
vista:
@model EjemploDeMvc.Models.Libro
@{
ViewBag.Title = "Crear Libro";
}

24. Modelos MVC
3.2. En la vista agregar un formulario para los
datos:
<form method="post" action="">
<fieldset>
Ingrese titulo: <br />
<input type="text" name="titulo"
maxlength="200" />
<br /><br />Autor:<br />
<input type="text" name="autor" />
<br /><br />Páginas:<br />
<input type="number" name="paginas" />
<br /><br />
<input type="submit" value="Crear libro" />
</fieldset>
</form>

25. Modelos MVC
3.3. En el controlador:
Para Crear Nuevos Libros:
– Agregar la Acción para POST (la que recibe
los datos del usuario):
[HttpPost]
public ActionResult Crear(Libro libro)
{
libro.FechaPublicacion = DateTime.Now;
_db.Libros.Add(libro);
_db.SaveChanges();
return Content("Se agregó el libro!");
//return RedirectToAction("Index");
}
LibrosContext _db = new LibrosContext();

26. Modelos MVC
3.4. En el controlador:
Para Listar los Libros:
public ActionResult Index()
{
var ultimosLibros =
(from b in _db.Libros
orderby b.FechaPublicacion descending
select b).Take(20);
ViewBag.MisLibros = ultimosLibros.ToList();
return View();
}

27. Modelos MVC
3.4. Crear la vista para mostrar los libros:
Para Listar los Libros:
<p><a href="/MiLibro/Crear">Agregar Libro</a></p>
@foreach (var libro in ViewBag.MisLibros)
{
<section class="contact">
<header><h3>@libro.Titulo</h3></header>
<p>Autor: @libro.Autor, fecha de publicación
@libro.FechaPublicacion.ToLongDateString()
</p>
</section>
}

28. Modelos MVC
Crear el controlador desde Visual Studio:
 Al agregar un nuevo Controller:

29. Modelos MVC
Modificando los modelos Entity Framework
Code First. (Para agregar validaciones y
constraints)
[Table("Libros")]
public class Libro
{
[Key]
public int LibroId { get; set; }
[Required]
[StringLength(200)]
public string Titulo { get; set; }
[Required]
[StringLength(100)]
public string Autor { get; set; }

30. Modelos MVC
Modificando los modelos Entity Framework
Code First.
1. Abrir la consola de Nuget:

31. Modelos MVC
2. Habilitar Migraciones:
– Ejecutar: enable-migrations
– Habilitar migrations automáticos:
internal sealed class Configuration :
DbMigrationsConfiguration<LibrosContext>
{
public Configuration()
{
AutomaticMigrationsEnabled = true;
}

32. Modelos MVC
3. Actualizar la Base de Datos:
– Ejecutar: update-database
– O Ejecutar: update-database -verbose
– Para forzar los cambios:
• update-database -verbose -force

33. Validación de Datos
• Podemos aplicar validación aplicando
atributos de validación a los parámetros del
modelo
 Required
 StringLength
 Range
 RegularExpression
 Compare

34. Vistas MVC
El controlador retorna una vista:
Puede especificar que vista retornar:
public ActionResult Crear()
{
return View();
}
return View("Contactos");
return View("~/Views/Account/Login.cshtml");

35. Vistas MVC
Pasando datos a una vista:
 ViewDataDictionary
 ViewBag
 Vistas fuertemente tipadas

36. Vistas MVC
 ViewDataDictionary
public ViewResult Mostrar(int id)
{
var item = _db.ItemsTodo.Find(id);
bool valido =
User.Identity.Name == item.Usuario;
ViewData["esDelUsuario"] = valido;
return View(item);
}

37. Vistas MVC
 ViewData Dictionary
<p>
@{
bool valido =
(bool)ViewData["esDelUsuario"];
}
@if (valido)
{
@Html.ActionLink("Editar", "Edit",
new { id = Model.Id })
}
@Html.ActionLink("Ver items", "Index")
</p>

38. Vistas MVC
 ViewBag
 Es de tipo dynamic
 En el controller
 En la vista:
ViewBag.EsDelUsuario =
User.Identity.Name == item.Usuario;
@if (ViewBag.EsDelUsuario)
{
@Html.ActionLink("Edit", "Edit",
new { id = Model.Id })
}

39. Vistas MVC
 Vistas fuertemente tipadas:
 Le pasamos los datos a la vista:
 En el controller
 En la vista:
 Definir:
 Usar:
return View(item);
@using MvcEjemplo.Models
@model ItemsTodo
<h2>@Model.Descripcion</h2>

40. Razor
 Es como un template para generar la vista
de nuestras páginas
 El código C# se evalua
 El código C# se reconoce por el simbolo @
Código de bloque:
@{
ViewBag.Title = "Error";
}

41. Razor
Bloque if:
Bloque foreach
@if (Model.InStock) {
Html.ActionLink("Comprar", "AddToCart");
}
@foreach (var item in Model)
{
<div>@item.ProductName</div>
}

42. Razor
Declaración del modelo:
Declaración de colecciones:
@model MiWebSite.Models.Producto
@model IEnumerable<MiWebSite.Models.Producto>
<h1>Catalogo de Productos</h1>
@foreach (var item in Model)
{
<div>@item.ProductName</div>
}

43. Razor
HTML Helpers:
 DisplayFor
 DisplayTextFor
 EditorFor
 CheckBoxFor
 DropDownListFor
 HiddenFor
 LabelFor
 ListBoxFor
 PasswordFor
 RadioButtonFor
 TextAreaFor
 TextBoxFor
 ValidateFor
 ValidationMessageFor

44. Razor
HTML Helpers:
@using (Html.BeginForm()) {
@Html.ValidationSummary(true, "Hay errores.")
<div> <fieldset> <legend>Informacion</legend>
<div class="editor-label">
@Html.LabelFor(m => m.UserName) </div>
<div class="editor-field">
@Html.TextBoxFor(m => m.UserName) div>
<div class="editor-label">
@Html.LabelFor(m => m.Password) </div>
<div class="editor-field">
@Html.PasswordFor(m => m.Password) </div>
<div class="editor-label">
@Html.LabelFor(m => m.ConfirmPassword) </div>
<div class="editor-field">
@Html.PasswordFor(m => m.ConfirmPassword)
@Html.ValidationMessageFor(m => m.ConfirmPassword)
</div><p><input type="submit" value="Register" />
</p> </fieldset></div>
}

45. Aplicando Action Filters
 Permiten agregar comportamientos de pre
condiciones o post condiciones a las
acciones de los controllers
Ej:
Action Filter Authorize, para controlar el
acceso a las acciones:
[Authorize]
public ActionResult About()
{

46. Aplicando Action Filters
Manejo de errores con Action Filters
1. Agregar al Web.config:
2. En Views/Shared/Error.cshtml
<system.web>
<customErrors mode="On"></customErrors>
@model System.Web.Mvc.HandleErrorInfo
@{
ViewBag.Title = "Error";
}

47. Aplicando Action Filters
Manejo de errores con Action Filters
3. En la vista podemos acceder al error a
travez del modelo
4. En App_Start/FilterConfig.cs:
public static void RegisterGlobalFilters
(GlobalFilterCollection filters)
{
filters.Add(new HandleErrorAttribute());
}
<h2>El error es:</h2>
@Model.Exception.Message