Post on 12-Jun-2015
description
ASP.NET MVC
Rodolfo FinochiettiMVP ASP.NET/IISLagash Systems
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
3
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?
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
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
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
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
Modelo-Vista-Controlador
Model
ControllerView
Xerox PARC 1978http://heim.ifi.uio.no/~trygver/themes/mvc/mvc-index.html
¿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
¿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
Rutas
www.sitio.com/products/report/1/06/2008
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
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); }}
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 .
Ejemplo 1
ASP.NET MVC
17
Razor
¿Un View… que?
• Encargado de Renderizar vistas– HTML– Javascript
• Alternativa a “<% %>”
Objetivos de Razor
• Compacto• Sencillo• “Amigo del HTML”• ¡Ya conocemos el lenguaje!
Ejemplo 2
Razor
21
Nuevas carácterísticas de ASP.NET 3
Global Filters
• Antes
• Ahora
Dynamic ViewModel
• Antes
• Ahora
Nuevos Action Result Types
Nuevos Action Result Types
Mas soporte para JSON
Mejoras en las validaciones
28
jQuery y AJAX
jQuery
Selectors
Animations
Plugins
jQuery Selectors
$(“#userNam
e”)
$(“input:text”
)
$(“.required”)
$(“#grid tr:even”)
jQuery Animations
$(…).show() $(…).hide()
$(…).slideDown() $(…).slideUp()
$(…).fadeIn() $(…).fadeOut()
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)
Ejemplo 3
jQuery, AJAX y Edicion de Entidades
34
Aplicaciones Web Real Time Con SignalR
¡Los usuarios quieren la ultima informacion AHORA!
Twitter – live searches/updates Stock streamersAuctionsLive scoresReal-time notificationsInteractive gamesCollaborative appsLive user analytics…
6
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
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
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
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
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!
En definitiva:¡Muchas opciones!
• Forever Frame• Periodic polling• Long polling• HTML5 WebSockets
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
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
¿Como lo instalo?
¡NuGet!
*
Ejemplo 4
Hello SignalR
¿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)
Connections y Hubs
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
Ejemplo 5
Knockout.js & SignalR
Ejemplo 6
Hubs
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
Clients
Clientes
En el servidorSe puede hostear en cualquier aplicacion ASP.NET (SignalR.Server)
En el clienteJavaScript (SignalR.JS)
Pero hay mas…
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
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
Ejemplo 7
Expense Application
Contacto
• Mail:– rodolfof@lagash.com
• Blogs:– http://shockbyte.net
• Twitter:– @rodolfof
¡Gracias!