ASP.NET MVC

58
ASP.NET MVC Rodolfo Finochietti MVP ASP.NET/IIS Lagash Systems

description

Introducción a ASP.NET y otras tecnologías asociadas.

Transcript of ASP.NET MVC

Page 1: ASP.NET MVC

ASP.NET MVC

Rodolfo FinochiettiMVP ASP.NET/IISLagash Systems

Page 2: ASP.NET MVC

Agenda

• ASP.NET MVC– Introducción– Modelos– Vistas– Razor

• Nuevas características de ASP.NET MVC 3• AJAX y jQuery• Aplicaciones Real Time con SignalR

Page 3: ASP.NET MVC

3

ASP.NET MVC

Page 4: ASP.NET MVC

Por que ASP.NET MVC

• ¿Por qué Microsoft lanza ASP.NET MVC?• ¿Web Form y el modelo de programación por

eventos no era la solución al desarrollo Web?• ¿Necesito aprender otro View Engine?• ¿Por qué necesitamos mas herramientas de

desarrollo Web?

Page 5: ASP.NET MVC

ASP.NET MVC

• Un framework para Web Development• Más control sobre el HTML– Más Web-Frendly

• Más testeable• No es una nueva versión de ASP.NET Web

Forms• Esta construido sobre en ASP.NET

Page 6: ASP.NET MVC

ASP.NET APIs de Servicios para Aplicaciones

MembershipMembership Role ManagerRole Manager PersonalizationPersonalization

Site NavigationSite Navigation Database Caching

Database Caching

Health Monitoring

Health Monitoring

Arquitectura de ASP.NET

Page 7: ASP.NET MVC

ASP.NET APIs de Servicios para Aplicaciones

MembershipMembership Role ManagerRole Manager PersonalizationPersonalization

Site NavigationSite Navigation Database Caching

Database Caching

Health Monitoring

Health Monitoring

ASP.NET “Page Framework”

Arquitectura de ASP.NET

Master Pages

Master Pages

Themes/Skins

Themes/Skins

Client Scripting

Client Scripting

LocalizationLocalization

Page 8: ASP.NET MVC

ASP.NET APIs de Servicios para Aplicaciones

MembershipMembership Role ManagerRole Manager PersonalizationPersonalization

Site NavigationSite Navigation Database Caching

Database Caching

Health Monitoring

Health Monitoring

ASP.NET MVC

Arquitectura de ASP.NET

Model Binders

Model Binders

View Engines

View Engines

Mobile Render

Mobile Render

Ajax SupportAjax Support

Page 9: ASP.NET MVC

Modelo-Vista-Controlador

Model

ControllerView

Xerox PARC 1978http://heim.ifi.uio.no/~trygver/themes/mvc/mvc-index.html

Page 10: ASP.NET MVC

¿Que ofrece?• SoC (Separation of Concerns)– TDD por default–Mantenibilidad

• Url y HTML mas limpio– SEO y REST friendly• /Usuarios/Buscar/Rodolfo

– CSS Friendly• <html> <div> <label> <span>

• Modelo de programación mas performante–No hay ViewState–No hay modelo de eventos

Page 11: ASP.NET MVC

¿Como trabaja?

Navego a http://.../Productos/Listar Se determina la ruta

El controller Productos es

creado

Un método Listar del controller es

invocado

Se ejecuta la logica del controller

Se dibuja la vista pasándole la

ViewData

Se dibujan Urls que apuntan a

otras acciones de otros controllers

Page 12: ASP.NET MVC

Rutas

www.sitio.com/products/report/1/06/2008

Page 13: ASP.NET MVC

URLs amigables

• Legibles– www.sitio.com/products.aspx?

module=reports&productId=1&&month=6year=2008 – www.sitio.com/products/report/1/6/2008

• Predecibles– http://es.wikipedia.org/wiki/Lagash

Page 14: ASP.NET MVC

Controlador – Uso Básico

• Escenarios, Objetivos y Diseño– Las URLs indican “acciones” del Controlador, no páginas – Las acciones deben declarase en el Controlador.– El controlador ejecuta lógica y elige la vista.

public ActionResult ShowPost(int id) { Post p = PostRepository.GetPostById(id); if (p != null) { View(p); } else { View("nosuchpost", id); }}

Page 15: ASP.NET MVC

Vistas – Uso Básico

• Escenarios, Objetivos y Diseño:– Generan HTML u otro tipo de contenido.

• Helpers pre-definidos.

– Pueden ser .ASPX, .ASCX, .MASTER, etc.– Pueden reemplazarse con otras tecnologías:

• Template engines (NVelocity, Spark, …).• Formatos de salida (images, RSS, JSON, …).• Pueden definirse vistas Mock para testing.

– El controlador ofrece datos a la Vista• Datos Loosely typed o Strongly Typed .

Page 16: ASP.NET MVC

Ejemplo 1

ASP.NET MVC

Page 17: ASP.NET MVC

17

Razor

Page 18: ASP.NET MVC

¿Un View… que?

• Encargado de Renderizar vistas– HTML– Javascript

• Alternativa a “<% %>”

Page 19: ASP.NET MVC

Objetivos de Razor

• Compacto• Sencillo• “Amigo del HTML”• ¡Ya conocemos el lenguaje!

Page 20: ASP.NET MVC

Ejemplo 2

Razor

Page 21: ASP.NET MVC

21

Nuevas carácterísticas de ASP.NET 3

Page 22: ASP.NET MVC

Global Filters

• Antes

• Ahora

Page 23: ASP.NET MVC

Dynamic ViewModel

• Antes

• Ahora

Page 24: ASP.NET MVC

Nuevos Action Result Types

Page 25: ASP.NET MVC

Nuevos Action Result Types

Page 26: ASP.NET MVC

Mas soporte para JSON

Page 27: ASP.NET MVC

Mejoras en las validaciones

Page 28: ASP.NET MVC

28

jQuery y AJAX

Page 29: ASP.NET MVC

jQuery

Selectors

Animations

Plugins

Page 30: ASP.NET MVC

jQuery Selectors

$(“#userNam

e”)

$(“input:text”

)

$(“.required”)

$(“#grid tr:even”)

Page 31: ASP.NET MVC

jQuery Animations

$(…).show() $(…).hide()

$(…).slideDown() $(…).slideUp()

$(…).fadeIn() $(…).fadeOut()

Page 32: ASP.NET MVC

jQuery Pluginshttp://plugins.jquery.com/

•Ajax (182)

•Animation and Effects (253)

•Browser Tweaks (67)

•Data (122)

•DOM (123)

•Drag-and-Drop (30)

•Events (119)

•Forms (317)

•Integration (88)

•JavaScript (130)

•jQuery Extensions (198)

•Layout (162)

•Media (108)

•Menus (80)

•Metaplugin (24)

•Navigation (131)

•Tables (64)

•User Interface (571)

•Utilities (291)

•Widgets (211)

•Windows and Overlays (89)

Page 33: ASP.NET MVC

Ejemplo 3

jQuery, AJAX y Edicion de Entidades

Page 34: ASP.NET MVC

34

Aplicaciones Web Real Time Con SignalR

Page 35: ASP.NET MVC

¡Los usuarios quieren la ultima informacion AHORA!

Twitter – live searches/updates Stock streamersAuctionsLive scoresReal-time notificationsInteractive gamesCollaborative appsLive user analytics…

6

Page 36: ASP.NET MVC

HTTP no esta preparado…Nunca se diseño para comunicaciones real-timeLa web es request-responseLa web es stateless

Para solucionar esto se invento HTML5 WebSockets

Page 37: ASP.NET MVC

HTTP/1.1 200 OKContent-Type: text/plainTransfer-Encoding: chunked

Forever Frame

– El server le dice al cliente que el response es chuncked– El cliente mantiene la coneccion abierta hasta que el servidor

la cierra– El servidor envia los datos al cliente seguido de un \0– Este proceso consume threads del servidor

Client

<script>eval("... ")</script>\0<script>eval("... ")</script>\0

Server

Page 38: ASP.NET MVC

Periodic polling

– Cada cierto tiempo el cliente pregunta si hay nuevos datos al servidor utilizando Ajax

– El tiempo de latencia minimo esta determiando por el “polling interval”

– Desperdicia ancho de banda y latencia

Polling intervalClient

Server

Page 39: ASP.NET MVC

Long polling

– El cliente pregunta pero el servidor no responde hasta que tenga datos nuevos para enviar

– El cliente pregunta de nuevo cuando los datos son recibidos o despues de que hay una time out en al coneccion

– Consume threads y conexiones del servidor

Client

Server

Page 40: ASP.NET MVC

HTML5 WebsocketsExtension de HTTP

Provee sockets sobre HTTP

Full-duplex

Funciona a travez de proxies

Todavia es un draft…

No todos los proxy servers lo soportan

No todos los webserver lo soportan

No todos los browsers lo soportan

¡Son sockets!

Page 41: ASP.NET MVC

En definitiva:¡Muchas opciones!

• Forever Frame• Periodic polling• Long polling• HTML5 WebSockets

Page 42: ASP.NET MVC

SignalR

¡3 en uno!• Conexiones “persistentes” entre cliente y

servidor sobre el mejor transporte• Abstrae el modelo de poolling subyasente• Provee un solo modelo de programacion

Page 43: ASP.NET MVC

SignalR• Creado por David Fowler y Damian Edwards

(ASP.NET team)

• No es un proyecto oficial de Microsoft• Proyecto OSS hosteado en Github, licencia MIT

– http://github.com/signalr/signalr

• Instalacion muy simple• Utiliza: C#, .NET 4+ y jQuery

Page 44: ASP.NET MVC

¿Como lo instalo?

¡NuGet!

*

Page 45: ASP.NET MVC

Ejemplo 4

Hello SignalR

Page 46: ASP.NET MVC

¿Que paso?• El servidor hizo broadcasting del mensaje cada

pocos segundos• El cliente recibio los mensajes• ¡El codigo para todo esto es facil!• No hay polling (por lo menos no en el codigo)

Page 47: ASP.NET MVC

Connections y Hubs

Page 48: ASP.NET MVC

Dos modelos de conexionPersistentConnectionComunica 1..N clientesEs un IHttpHandlerRequiere que se defina una rutaLimitado a enviar mensajesEl usuario define el “protocolo”

HubsComunica 1..N clientesAbstraccion sobre PersistentConnectionLas rutas se mapean automaticamente (/signalr/hubs)Se pueden enviar mensajes y llamar a metodosSignalR define el protocolo

Page 49: ASP.NET MVC

Ejemplo 5

Knockout.js & SignalR

Page 50: ASP.NET MVC

Ejemplo 6

Hubs

Page 51: ASP.NET MVC

Hubs• Los metodos de un Hub se pueden llamar

desde el cliente• Los metodos de un cliente se pueden llamar

desde el servidor– Se pueden llamar cliente individuales– Se pueden llamar todos clientes– Se pueden llamar grupos de clientes

Page 52: ASP.NET MVC

Clients

Page 53: ASP.NET MVC

Clientes

En el servidorSe puede hostear en cualquier aplicacion ASP.NET (SignalR.Server)

En el clienteJavaScript (SignalR.JS)

Pero hay mas…

Page 54: ASP.NET MVC

Clientes

En el servidor“SelfHost” (https://github.com/SignalR/SignalR/tree/master/SignalR.SelfHost)Windows Azure

On the client sideJavaScript (SignalR.JS)Cualquier aplicacion .NET (SignalR.Client)Cualquier dispositivo WP7 (SignalR.Client.WP7)iOSAndroid

Page 55: ASP.NET MVC

Resumen

• ¡3 en uno!– Conexiones “persistentes” entre cliente y servidor

sobre el mejor transporte– Abtrae el modelo de poolling subyasente– Provee un solo modelo de programacion

• Connections & Hubs• Conect varios clientes

Page 56: ASP.NET MVC

Ejemplo 7

Expense Application

Page 57: ASP.NET MVC

Contacto

• Mail:– [email protected]

• Blogs:– http://shockbyte.net

• Twitter:– @rodolfof

Page 58: ASP.NET MVC

¡Gracias!