taller mvc2

Taller de ASP .NET MVC2

Oscar Gensollen ArroyoMCT, MCPD, MCTS, MCSD,

MCADoscar.gensollen@formativa.com.pe

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

“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

¿ 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

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

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

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…

¿ 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

¿ 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

¿ 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

Comparación de patrones (1)

Comparación de patrones (2)

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)

El patrón MVC

Request Controlador

Modelo

Petició

n

Vista

Response

Resp

uesta

El patrón MVC (otra vista)

Microsoft Confidential

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:

Tabla de rutas

− http://host:port/Products/View/100

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

Desarrollando modelos MVC

Overview

− Explorando formas de crear modelos MVC− Trabajando con datos en modelos MVC− Creando un repositorio de datos

¿ 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

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

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; } }

¿ 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

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

¿ 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

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

¿ 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

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{ }

Desarrollando controladoras MVC

Overview

− Implementando controladoras MVC− Creando métodos Action

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

ü ü

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

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

Desarrollando vistas MVC

Overview

− Implementando vistas MVC− Implementando vistas Strongly-Typed MVC− Implementando vistas parciales MVC

¿ 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") %>

¿ 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> <% } %>

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

¿ 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

Conclusiones

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)

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

¿ 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

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

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

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

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

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

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!

Oscar Gensollen ArroyoMCT, MCPD, MCTS, MCSD, MCADoscar.gensollen@formativa.com.pe

¡ Gracias !

Taller de ASP .NET MVC2