Download - Taller MVC2
![Page 1: Taller MVC2](https://reader033.vdocuments.net/reader033/viewer/2022052600/5572020b4979599169a2db1b/html5/thumbnails/1.jpg)
Taller de ASP .NET MVC2
Oscar Gensollen ArroyoMCT, MCPD, MCTS, MCSD,
![Page 2: Taller MVC2](https://reader033.vdocuments.net/reader033/viewer/2022052600/5572020b4979599169a2db1b/html5/thumbnails/2.jpg)
Agenda del Taller− ¿Qué hizo ASP .NET por nosotros?− El modelo Web Forms− ¿ Qué es ASP .NET MVC?− Componentes de MVC− Diferencias entre Web Forms y MVC− Cuando escoger cada uno
![Page 3: Taller MVC2](https://reader033.vdocuments.net/reader033/viewer/2022052600/5572020b4979599169a2db1b/html5/thumbnails/3.jpg)
“No es perfecto, pero esta bien hecho y es, de lejos, superior a
Web Forms, técnica y arquitecturalmente.
En mi opinión, realmente representará la manera de hacer
las cosas por parte de los desarrolladores en el mediano
plazo»Dino Esposito
![Page 4: Taller MVC2](https://reader033.vdocuments.net/reader033/viewer/2022052600/5572020b4979599169a2db1b/html5/thumbnails/4.jpg)
¿ Qué hizo ASP .NET por nosotros?− Tomó las mejores prácticas de ASP− Hizo fácil el desarrollo
− Siguió la senda de Visual Basic− Manejado por eventos
− Expandió el entorno RAD a la Web− Orientado hacia la productividad
− No exigió demasiados requerimientos de los desarrolladores− No era necesario saber HTML, ni
JavaScript
![Page 5: Taller MVC2](https://reader033.vdocuments.net/reader033/viewer/2022052600/5572020b4979599169a2db1b/html5/thumbnails/5.jpg)
El modelo Web Forms (1)
− Creación de páginas rápidamente− Basado en una clase Page− Con controles configurables y
programables que generan HTML− Con tres pilares:
− Postbacks− ViewState− Server controls
![Page 6: Taller MVC2](https://reader033.vdocuments.net/reader033/viewer/2022052600/5572020b4979599169a2db1b/html5/thumbnails/6.jpg)
El modelo Web Forms (2)
− Abstrae el HTTP− Basado en el patrón Page Controller− El procesamiento del Request se hace a
través de una «Page»− Se sigue un ciclo de vida: Init, Load,
Postback, PreRender, Unload− La lógica del programador es ubicada en
clases «code-behind»− Se pueden crear clases intermedias
![Page 7: Taller MVC2](https://reader033.vdocuments.net/reader033/viewer/2022052600/5572020b4979599169a2db1b/html5/thumbnails/7.jpg)
El modelo Web Forms (3)
− ASP .NET ya esta estable, maduro y permite una alta productividad
− Se ha visto refinado y extendido− AJAX− Controles adaptados CSS-XHTML
− Llegó en un momento apropiado− Excedió las expectativas en varios
aspectos− Pero ahora los requerimientos podrían ser
otros…
![Page 8: Taller MVC2](https://reader033.vdocuments.net/reader033/viewer/2022052600/5572020b4979599169a2db1b/html5/thumbnails/8.jpg)
¿ La productividad es todo?
− Es una gran cosa PERO− También hay que considerar
− Mantenibilidad− Diseño− Facilidad para pruebas− Control del HTML− Aplicación del principio SoC
![Page 9: Taller MVC2](https://reader033.vdocuments.net/reader033/viewer/2022052600/5572020b4979599169a2db1b/html5/thumbnails/9.jpg)
¿ Qué es SoC?
− Separation of Concerns (Separación de intereses)
− Cada característica del sistema es un «concern»
− Casa aspecto del sistema es mapeado a un módulo de software
− La idea es que estos aspectos no se superpongan
![Page 10: Taller MVC2](https://reader033.vdocuments.net/reader033/viewer/2022052600/5572020b4979599169a2db1b/html5/thumbnails/10.jpg)
¿ Qué es ASP.NET MVC?− Es la implementación de la arquitectura
MVC para ASP .NET− Alternativa a Web Forms− Brinda mayor control sobre el HTML− Facilita las pruebas− Esta construido sobre ASP .NET− Maneja el patrón «Front Controller»− Expone la web tal como es
![Page 11: Taller MVC2](https://reader033.vdocuments.net/reader033/viewer/2022052600/5572020b4979599169a2db1b/html5/thumbnails/11.jpg)
Comparación de patrones (1)
![Page 12: Taller MVC2](https://reader033.vdocuments.net/reader033/viewer/2022052600/5572020b4979599169a2db1b/html5/thumbnails/12.jpg)
Comparación de patrones (2)
![Page 13: Taller MVC2](https://reader033.vdocuments.net/reader033/viewer/2022052600/5572020b4979599169a2db1b/html5/thumbnails/13.jpg)
Metas de ASP .NET MVC− Permitir una clara separación de
responsabilidades− Principio SRP− Altamente mantenible
− Testeable por defecto− Permitir un control completo sobre el HTML− Habilitar URLs claras
− Amigable con REST− Optimizado para buscadores (SEO)
![Page 14: Taller MVC2](https://reader033.vdocuments.net/reader033/viewer/2022052600/5572020b4979599169a2db1b/html5/thumbnails/14.jpg)
El patrón MVC
Request Controlador
Modelo
Petició
n
Vista
Response
Resp
uesta
![Page 15: Taller MVC2](https://reader033.vdocuments.net/reader033/viewer/2022052600/5572020b4979599169a2db1b/html5/thumbnails/15.jpg)
El patrón MVC (otra vista)
Microsoft Confidential
![Page 16: Taller MVC2](https://reader033.vdocuments.net/reader033/viewer/2022052600/5572020b4979599169a2db1b/html5/thumbnails/16.jpg)
Overview de MVCASP.NET MVC es un framework liviano, altamente testeable que esta integrado con las
características existentes de ASP .NET
Modelos
Son parte de la aplicación que implementa la lógica para los datos del dominio
Modelos
Son parte de la aplicación que implementa la lógica para los datos del dominio
Vistas
Son los componentes que muestran la interface de usuario de la aplicación
Vistas
Son los componentes que muestran la interface de usuario de la aplicación
Controladoras
Son los componentes que manejan la interacción con el usuario, trabajan con el modelo y seleccionan una vista para renderizar la UI
Controladoras
Son los componentes que manejan la interacción con el usuario, trabajan con el modelo y seleccionan una vista para renderizar la UI
El framework MVC incluye los siguientes componentes:
![Page 17: Taller MVC2](https://reader033.vdocuments.net/reader033/viewer/2022052600/5572020b4979599169a2db1b/html5/thumbnails/17.jpg)
Tabla de rutas
− http://host:port/Products/View/100
![Page 18: Taller MVC2](https://reader033.vdocuments.net/reader033/viewer/2022052600/5572020b4979599169a2db1b/html5/thumbnails/18.jpg)
Tabla de rutas
− Decide que controlador responde a cada petición− Basándose en la URL− Mapea una petición a una acción (método
de un controlador)− Permite la creación de URLs personalizadas
con mucha facilidad
![Page 19: Taller MVC2](https://reader033.vdocuments.net/reader033/viewer/2022052600/5572020b4979599169a2db1b/html5/thumbnails/19.jpg)
Desarrollando modelos MVC
![Page 20: Taller MVC2](https://reader033.vdocuments.net/reader033/viewer/2022052600/5572020b4979599169a2db1b/html5/thumbnails/20.jpg)
Overview
− Explorando formas de crear modelos MVC− Trabajando con datos en modelos MVC− Creando un repositorio de datos
![Page 21: Taller MVC2](https://reader033.vdocuments.net/reader033/viewer/2022052600/5572020b4979599169a2db1b/html5/thumbnails/21.jpg)
¿ Qué es un modelo MVC?
− Representa el dominio de la aplicación− El propósito del modelo es agregar
significado a los datos planos− También agrega reglas a la aplicacio´n para
orquestar cómo la aplicación debería tabajar
− No es responsable del acceso al mecanismo de almacenamiento persistente
![Page 22: Taller MVC2](https://reader033.vdocuments.net/reader033/viewer/2022052600/5572020b4979599169a2db1b/html5/thumbnails/22.jpg)
Creando un modelo MVC− Puede ser creado manualmente o por
medio de una herramienta de mapeo de objetos relacionales
− LINQ to SQL puede ser usado para generar un modelo creando automáticamente las clases del modelo a partir del esquema de la DB
− Entity Framework permite al desarrollador generar clases de modelo basadas en el esquema de la BD usando un diseñador visual
− EF también permite generar el esquema de BD basado en las clases del modelo
![Page 23: Taller MVC2](https://reader033.vdocuments.net/reader033/viewer/2022052600/5572020b4979599169a2db1b/html5/thumbnails/23.jpg)
Creando un modelo usando clasespublic class Blog{ public string Title { get; set; } public string Description { get; set; } }
public class Blog{ public string Title { get; set; } public string Description { get; set; } }
![Page 24: Taller MVC2](https://reader033.vdocuments.net/reader033/viewer/2022052600/5572020b4979599169a2db1b/html5/thumbnails/24.jpg)
¿ Qué es LINQ to SQL?
− LINQ to SQL es una herramienta de mapeo relacional de Microsoft
− Genera clases del modelo basándose en el esquema de la BD
− El objeto DataContext en LINQ to SQL es usado para hacer seguimiento al estado del objeto
![Page 25: Taller MVC2](https://reader033.vdocuments.net/reader033/viewer/2022052600/5572020b4979599169a2db1b/html5/thumbnails/25.jpg)
Patrón Active Record
− Es un patrón que mapea el nombre de la tabla de BD a las clases y las columnas de la tabla a los campos de la clase
− L2S usa este patrón para realizar el mapeo entre las clases del modelo y el esquema de BD
− EF también usa este patrón para realizar el mapeo
![Page 26: Taller MVC2](https://reader033.vdocuments.net/reader033/viewer/2022052600/5572020b4979599169a2db1b/html5/thumbnails/26.jpg)
¿ Qué es Entity Framework?
− La última herramienta de mapeo relacional de objetos de Microsoft
− Tiene la habilidad de crear modelos usando un diseñador visual
− Tiene la habilidad de crear modelos manualmente
− Expone las relaciones de llave foránea usando clases del modelo
![Page 27: Taller MVC2](https://reader033.vdocuments.net/reader033/viewer/2022052600/5572020b4979599169a2db1b/html5/thumbnails/27.jpg)
LINQ to SQL vs. Entity Framework
LINQ to SQL Entity Framework
LINQ to SQL aboga por la idea de aplicaciones donde lo primero son los datos
Entity Framework puede ser usado para crear aplicaciones donde lo primero es el modelo
LINQ to SQL mantiene el estado del objeto con el uso de DataContext
Entity Framework usa el ObjectDataContext para mantener el estado del objeto
LINQ to SQL no soporta relaciones muchos a muchos
Entity Framework soporta relaciones de muchos a muchos
LINQ to SQL esta descontinuado para Microsoft
Entity Framework es el mapeador relacional de objetos preferido por Microsoft
![Page 28: Taller MVC2](https://reader033.vdocuments.net/reader033/viewer/2022052600/5572020b4979599169a2db1b/html5/thumbnails/28.jpg)
¿ Qué es el patrón Repository?
− Accede al almacen permanente para realizar operaciones CRUD sobre las clases del modelo
− Es también responsable de acceder al objeto en memoria, por lo tanto ahorrando un viaje a la BD
− Puede tener múltiples sobrecargas para entregar elementos usando diferentes parámetros
clientclient
aCriteriaaCriteria
The repository
The repository
In memory strategy
In memory strategy aPersonaPerson
X
new
Equal(this.BENEFACTOR)
Matching(aCriteria) Matching(aCriteria) *satisifes(aCriteria)
People who satisfied the criteria
![Page 29: Taller MVC2](https://reader033.vdocuments.net/reader033/viewer/2022052600/5572020b4979599169a2db1b/html5/thumbnails/29.jpg)
Extendiendo la clase de Modelo para agregar reglas de negocios− Una clase parcial representando la clase del
modelo puede ser usada para extender el comportamiento de ésta
[Visual C#]public partial class Blog{ }
[Visual C#]public partial class Blog{ }
![Page 30: Taller MVC2](https://reader033.vdocuments.net/reader033/viewer/2022052600/5572020b4979599169a2db1b/html5/thumbnails/30.jpg)
Desarrollando controladoras MVC
![Page 31: Taller MVC2](https://reader033.vdocuments.net/reader033/viewer/2022052600/5572020b4979599169a2db1b/html5/thumbnails/31.jpg)
Overview
− Implementando controladoras MVC− Creando métodos Action
![Page 32: Taller MVC2](https://reader033.vdocuments.net/reader033/viewer/2022052600/5572020b4979599169a2db1b/html5/thumbnails/32.jpg)
¿ Qué son los métodos Action ?
Es un método público de una controladora que puede tener cualquier número de parámetros y tipicamente devuelve un objeto de tipo ActionResult. Normalmente, éste llama a la vista y pasa datos a la vista vía el objeto ViewData
Deben ser públicosü ü
No pueden ser estáticosü ü
No pueden tener parámetros de tipo genérico no enlazadosü ü
No pueden ser sobrecargados basados en parámetros a menos que se empleen atributos tales como NonActionAttribute o AcceptVerbsAttribute.
ü ü
![Page 33: Taller MVC2](https://reader033.vdocuments.net/reader033/viewer/2022052600/5572020b4979599169a2db1b/html5/thumbnails/33.jpg)
Llamando a una vista MVC
La clase ActionResult encapsula el resultado de un método action
• ContentResult — Devuelve un tipo de contenido definido por el usuario
• EmptyResult — Devuelve un resultado nulo• FileResult — Devuelve un archivo binario• JavaScriptResult — Devuelve JavaScript.• JsonResult — Devuelve un objeto serializado en Json• PartialViewResult — Renderiza una vista parcial• RedirectResult — Redirecciona a otro método action usando su
URL• RedirectToRouteResult — Redirecciona a otro método action• ViewResult — Renderiza una vista. Esta clase contiene
propiedades que identifican la vista a renderizar, el nombre de la vista, el nombre de la vista maestra, datos temporales, y una colección de motores de vistas para la aplicación
![Page 34: Taller MVC2](https://reader033.vdocuments.net/reader033/viewer/2022052600/5572020b4979599169a2db1b/html5/thumbnails/34.jpg)
Recuperando datos desde el Request
[HttpPost]public ActionResult Create(Blog blog){ if (ModelState.IsValid) { // TODO: Add insert logic here }; return RedirectToAction("Index");}
[HttpPost]public ActionResult Create(Blog blog){ if (ModelState.IsValid) { // TODO: Add insert logic here }; return RedirectToAction("Index");}
Usando el objeto Requestü ü
Usando la FormCollectionü ü
Usando Model Bindersü ü
![Page 35: Taller MVC2](https://reader033.vdocuments.net/reader033/viewer/2022052600/5572020b4979599169a2db1b/html5/thumbnails/35.jpg)
Desarrollando vistas MVC
![Page 36: Taller MVC2](https://reader033.vdocuments.net/reader033/viewer/2022052600/5572020b4979599169a2db1b/html5/thumbnails/36.jpg)
Overview
− Implementando vistas MVC− Implementando vistas Strongly-Typed MVC− Implementando vistas parciales MVC
![Page 37: Taller MVC2](https://reader033.vdocuments.net/reader033/viewer/2022052600/5572020b4979599169a2db1b/html5/thumbnails/37.jpg)
¿ Qué son los HTML Helpers?
Clases de métodos HtmlHelper:• MvcForm Extensions — Renderizan formularios HTML• Input Extensions — Renderizan elementos input de HTML• Label Extensions — Renderizan elementos etiqueta de HTML• Link Extensions — Renderizan enlaces HTML• Select Extensions — Renderizan listas desplegables y simples• TextArea Extensions — Renderizan un TextArea HTML• Validation Extensions — Renderizan controles de validación
Son usados para renderizar marcas de HTML programáticamente en una vista. Ellos devuelven una cadena de tipo MvcHtmlHelper
<%: Html.TextBox("Text1") %><%: Html.TextBox("Text1") %>
![Page 38: Taller MVC2](https://reader033.vdocuments.net/reader033/viewer/2022052600/5572020b4979599169a2db1b/html5/thumbnails/38.jpg)
¿ Qué es una vista Strongly-typed ?
Contiene datos que estan basados sobre un modelo
<%@ Page Inherits="System.Web.Mvc.ViewPage <AdventureWorks.Models.Person>" %>… <% using (Html.BeginForm()) {%> <div class="editor-label"> <%: Html.LabelFor(model => model.FirstName) %> </div> <div class="editor-field"> <%: Html.TextBoxFor(model => model.FirstName) %> <%: Html.ValidationMessageFor(model => model.FirstName) %> </div> <% } %>
<%@ Page Inherits="System.Web.Mvc.ViewPage <AdventureWorks.Models.Person>" %>… <% using (Html.BeginForm()) {%> <div class="editor-label"> <%: Html.LabelFor(model => model.FirstName) %> </div> <div class="editor-field"> <%: Html.TextBoxFor(model => model.FirstName) %> <%: Html.ValidationMessageFor(model => model.FirstName) %> </div> <% } %>
![Page 39: Taller MVC2](https://reader033.vdocuments.net/reader033/viewer/2022052600/5572020b4979599169a2db1b/html5/thumbnails/39.jpg)
Vistas CRUD
Usando el cuadro de diálogo Add View, es fácil crear vistas strongly-typed para crear, leer, actualizar y eliminar registros
Hay tipos de vistas que el cuadro de diálogo Add View puede crear:
• List• Details• Create• Update• Delete• Empty
![Page 40: Taller MVC2](https://reader033.vdocuments.net/reader033/viewer/2022052600/5572020b4979599169a2db1b/html5/thumbnails/40.jpg)
¿ Qué es un vista parcial MVC ?
<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage <SampleMVC.Models.Person>" %> <html xmlns="http://www.w3.org/1999/xhtml" ><head runat="server"> <title>Create</title></head><body> <% Html.RenderPartial("Person"); %></body></html>
<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage <SampleMVC.Models.Person>" %> <html xmlns="http://www.w3.org/1999/xhtml" ><head runat="server"> <title>Create</title></head><body> <% Html.RenderPartial("Person"); %></body></html>
<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl <SampleMVC.Models.Person>" %>…
<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl <SampleMVC.Models.Person>" %>…
Vista parcial
Página que renderiza una vista parcial
![Page 41: Taller MVC2](https://reader033.vdocuments.net/reader033/viewer/2022052600/5572020b4979599169a2db1b/html5/thumbnails/41.jpg)
Conclusiones
![Page 42: Taller MVC2](https://reader033.vdocuments.net/reader033/viewer/2022052600/5572020b4979599169a2db1b/html5/thumbnails/42.jpg)
Web Forms
Ventajas−Productividad−RAD−Programación con estado−Controles enriquecidos−Plataforma estable y
madura
Desventajas− No tiene SoC de manera
natural− Probar páginas es dificil− Hay que lidiar con el
ViewState− Procesamiento y
renderización mezclados− Abstrae el JS y HTML
(complica las cosas con AJAX)
![Page 43: Taller MVC2](https://reader033.vdocuments.net/reader033/viewer/2022052600/5572020b4979599169a2db1b/html5/thumbnails/43.jpg)
ASP .NET MVC
Ventajas−Diseño claro, con una
ordenada separación de intereses
−Una delgada pila de ejecución
−Control total sobre el HTML− Inclusive independencia de
él−Total extensibilidad en
todas sus partes−Permite el desarrollo
orientado a pruebas (TDD)
Desventajas− Carece de un
«component model» para hacer más fácil el diseño
− Exige de mayores «skills» al desarrollador− Mejor comprensión de
cómo funciona la web
![Page 44: Taller MVC2](https://reader033.vdocuments.net/reader033/viewer/2022052600/5572020b4979599169a2db1b/html5/thumbnails/44.jpg)
![Page 45: Taller MVC2](https://reader033.vdocuments.net/reader033/viewer/2022052600/5572020b4979599169a2db1b/html5/thumbnails/45.jpg)
¿ Por qué escoger MVC ?− Por una o varias de las siguientes
razones1. Para estudiarlo2. Para escribir código «testeable»3. Para escribir código bien diseñado (capas
desacopladas)4. Para entregar valor a tus clientes5. Porque es el futuro y estará bien
posicionado6. Porque es muy flexible y puede manejar
cambios7. Porque te vuelve un mejor desarrollador8. Porque permite control total sobre el HTML
− Estilos, Accesibilidad, Compatibilidad entre navegadores, cumplimiento con estándares
![Page 46: Taller MVC2](https://reader033.vdocuments.net/reader033/viewer/2022052600/5572020b4979599169a2db1b/html5/thumbnails/46.jpg)
Escenarios que pueden presentarse¿ En cual de ellos estas tú ?− 1: Te gusta Web Forms y estas feliz
con ello− 2: Mayormente te gusta Web Forms
pero no estas del todo contento− 3: Eres nuevo en ASP .NET− 4: Estas liderando un equipo de
desarrollo
![Page 47: Taller MVC2](https://reader033.vdocuments.net/reader033/viewer/2022052600/5572020b4979599169a2db1b/html5/thumbnails/47.jpg)
1: Te gusta Web Forms y estas feliz con ello − Te sientes en control en ese modelo− No te preocupa demasiado el tema del
viewstate− No te preocupa mucho el tema de
AJAX y jQuery− Puedes aprovechar al máximo la
familia de componentes visuales disponible
…Quédate con Web Forms
![Page 48: Taller MVC2](https://reader033.vdocuments.net/reader033/viewer/2022052600/5572020b4979599169a2db1b/html5/thumbnails/48.jpg)
2: Mayormente te gusta Web Forms pero no estas del todo contento− Te esfuerzas en mantener bajo control
el Viewstate− Quieres introducir mas JavaScript en
las páginas− Te sientes restringido por las
abstracciones que el modelo impone
…Considera usar ASP .NET MVC
![Page 49: Taller MVC2](https://reader033.vdocuments.net/reader033/viewer/2022052600/5572020b4979599169a2db1b/html5/thumbnails/49.jpg)
3: Eres nuevo en ASP .NET
− Y tienes experiencia suficiente en otros frameworks
− Deseas un buen nivel de aprendizaje (MVC no tiene secretos)
…ASP .NET MVC es para ti
![Page 50: Taller MVC2](https://reader033.vdocuments.net/reader033/viewer/2022052600/5572020b4979599169a2db1b/html5/thumbnails/50.jpg)
4: Estas liderando un equipo de desarrollo− ASP .NET MVC «crea» las condiciones
para producir software de alta calidad, más rápido
− Puede tener o tener beneficio tangible para el cliente
− Tiene un inmediato ROI (Retorno de inversión) para ti y tu compañía
…migra tu equipo a ASP .NET MVC
![Page 51: Taller MVC2](https://reader033.vdocuments.net/reader033/viewer/2022052600/5572020b4979599169a2db1b/html5/thumbnails/51.jpg)
Momento de tomar una decisión− Si el requerimiento es «tomar control
sobre el HTML», ASP .NET MVC es la respuesta− Se gasta tiempo arreglando cosas con
Web Forms− Ese tiempo se puede invertir en aprender
un enfoque arquitecturalmente superior− ASP .NET MVC no es perfecto, pero es
superior de lejos− Aprende a tu ritmo, pero empieza!