ASP.NET MVCRodolfo 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•...
ASP.NET MVC3
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 s...
ASP.NET MVC• Un framework para Web Development• Más control sobre el HTML  – Más Web-Frendly• Más testeable• No es una nue...
Arquitectura de ASP.NETASP.NET APIs de Servicios para Aplicaciones       Membership            Role Manager      Personali...
Arquitectura de ASP.NETASP.NET “Page Framework”  Master Pages         Themes/Skins     Localization        Client Scriptin...
Arquitectura de ASP.NETASP.NET MVC  Model Binders        View Engines    Ajax Support        Mobile RenderASP.NET APIs de ...
Modelo-Vista-Controlador                                                     Model                                   View ...
¿Que ofrece?• SoC (Separation of Concerns)   – TDD por default   – Mantenibilidad• Url y HTML mas limpio   – SEO y REST fr...
¿Como trabaja?                                                 Se determina la      Navego a http://.../Productos/Listar  ...
Rutaswww.sitio.com/products/report/1/06/2008
URLs amigables• Legibles   – www.sitio.com/products.aspx?module=reports&productId     =1&&month=6year=2008    – www.sitio...
Controlador – Uso Básico• Escenarios, Objetivos y Diseño   – Las URLs indican “acciones” del Controlador, no páginas   – L...
Vistas – Uso Básico• Escenarios, Objetivos y Diseño:  – Generan HTML u otro tipo de contenido.     • Helpers pre-definidos...
Ejemplo 1ASP.NET MVC
Razor17
¿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
Nuevas carácterísticas de ASP.NET 321
Global Filters• Antes• Ahora
Dynamic ViewModel• Antes• Ahora
Nuevos Action Result Types
Nuevos Action Result Types
Mas soporte para JSON
Mejoras en las validaciones
jQuery y AJAX28
jQueryPlugins     Selectors    Animations
jQuery Selectors $(“#userName”) $(“input:text”) $(“.required”) $(“#grid tr:even”)
jQuery Animations  $(…).show()       $(…).hide()$(…).slideDown()   $(…).slideUp() $(…).fadeIn()     $(…).fadeOut()
jQuery Pluginshttp://plugins.jquery.com/  •Ajax (182)                    •Integration (88)          •Tables (64)  •Animati...
Ejemplo 3jQuery, AJAX y Edicion de Entidades
Aplicaciones Web Real Time Con                 SignalR34
¡Los usuarios quieren la ultima           informacion AHORA!Twitter – live searches/updatesStock streamersAuctionsLive sco...
HTTP no esta preparado…Nunca se diseño para comunicaciones real-timeLa web es request-responseLa web es stateless        P...
Forever Frame                                HTTP/1.1 200 OK                                Content-Type: text/plain      ...
Periodic pollingPolling interval – Cada cierto tiempo el cliente pregunta si hay nuevos datos   al servidor utilizando Aja...
Long polling– El cliente pregunta pero el servidor no responde hasta que  tenga datos nuevos para enviar– El cliente pregu...
HTML5 WebsocketsExtension de HTTPProvee sockets sobre HTTPFull-duplexFunciona a travez de proxiesTodavia es un draft…No to...
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 poo...
SignalR• Creado por David Fowler y Damian Edwards  (ASP.NET team)• No es un proyecto oficial de Microsoft• Proyecto OSS ho...
¿Como lo instalo?                 *¡NuGet!
Ejemplo 4Hello SignalR
¿Que paso?• El servidor hizo broadcasting del mensaje cada  pocos segundos• El cliente recibio los mensajes• ¡El codigo pa...
Connections y Hubs
Dos modelos de conexionPersistentConnection HubsComunica 1..N clientes             Comunica 1..N clientes                 ...
Ejemplo 5Knockout.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 servi...
Clients
ClientesEn el servidorSe puede hostear en cualquier aplicacion ASP.NET(SignalR.Server)En el clienteJavaScript (SignalR.JS)...
ClientesEn el servidor“SelfHost” (https://github.com/SignalR/SignalR/tree/master/SignalR.SelfHost)Windows AzureOn the clie...
Resumen• ¡3 en uno!  – Conexiones “persistentes” entre cliente y    servidor sobre el mejor transporte  – Abtrae el modelo...
Ejemplo 7Expense Application
Contacto• Mail:  – rodolfof@lagash.com• Blogs:  – http://shockbyte.net• Twitter:  – @rodolfof
¡Gracias!
Próxima SlideShare
Cargando en…5
×

ASP.NET MVC

6.293 visualizaciones

Publicado el

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

Publicado en: Tecnología
  • Sé el primero en comentar

ASP.NET MVC

  1. 1. ASP.NET MVCRodolfo FinochiettiMVP ASP.NET/IISLagash Systems
  2. 2. 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. 3. ASP.NET MVC3
  4. 4. 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?
  5. 5. 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
  6. 6. Arquitectura de ASP.NETASP.NET APIs de Servicios para Aplicaciones Membership Role Manager Personalization Site Navigation Database Caching Health Monitoring
  7. 7. Arquitectura de ASP.NETASP.NET “Page Framework” Master Pages Themes/Skins Localization Client ScriptingASP.NET APIs de Servicios para Aplicaciones Membership Role Manager Personalization Site Navigation Database Caching Health Monitoring
  8. 8. Arquitectura de ASP.NETASP.NET MVC Model Binders View Engines Ajax Support Mobile RenderASP.NET APIs de Servicios para Aplicaciones Membership Role Manager Personalization Site Navigation Database Caching Health Monitoring
  9. 9. Modelo-Vista-Controlador Model View ControllerXerox PARC 1978http://heim.ifi.uio.no/~trygver/themes/mvc/mvc-index.html
  10. 10. ¿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
  11. 11. ¿Como trabaja? Se determina la Navego a http://.../Productos/Listar ruta Se ejecuta la Un método Listar El controller logica del del controller es Productos es controller invocado creado Se dibujan UrlsSe dibuja la vista que apuntan a pasándole la otras acciones de ViewData otros controllers
  12. 12. Rutaswww.sitio.com/products/report/1/06/2008
  13. 13. 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
  14. 14. 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); } }
  15. 15. 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 .
  16. 16. Ejemplo 1ASP.NET MVC
  17. 17. Razor17
  18. 18. ¿Un View… que?• Encargado de Renderizar vistas – HTML – Javascript• Alternativa a “<% %>”
  19. 19. Objetivos de Razor• Compacto• Sencillo• “Amigo del HTML”• ¡Ya conocemos el lenguaje!
  20. 20. Ejemplo 2 Razor
  21. 21. Nuevas carácterísticas de ASP.NET 321
  22. 22. Global Filters• Antes• Ahora
  23. 23. Dynamic ViewModel• Antes• Ahora
  24. 24. Nuevos Action Result Types
  25. 25. Nuevos Action Result Types
  26. 26. Mas soporte para JSON
  27. 27. Mejoras en las validaciones
  28. 28. jQuery y AJAX28
  29. 29. jQueryPlugins Selectors Animations
  30. 30. jQuery Selectors $(“#userName”) $(“input:text”) $(“.required”) $(“#grid tr:even”)
  31. 31. jQuery Animations $(…).show() $(…).hide()$(…).slideDown() $(…).slideUp() $(…).fadeIn() $(…).fadeOut()
  32. 32. jQuery Pluginshttp://plugins.jquery.com/ •Ajax (182) •Integration (88) •Tables (64) •Animation and Effects (253) •JavaScript (130) •User Interface (571) •Browser Tweaks (67) •jQuery Extensions (198) •Utilities (291) •Data (122) •Layout (162) •Widgets (211) •DOM (123) •Media (108) •Windows and Overlays (89) •Drag-and-Drop (30) •Menus (80) •Events (119) •Metaplugin (24) •Forms (317) •Navigation (131)
  33. 33. Ejemplo 3jQuery, AJAX y Edicion de Entidades
  34. 34. Aplicaciones Web Real Time Con SignalR34
  35. 35. ¡Los usuarios quieren la ultima informacion AHORA!Twitter – live searches/updatesStock streamersAuctionsLive scoresReal-time notificationsInteractive gamesCollaborative appsLive user analytics… 6
  36. 36. 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
  37. 37. Forever Frame HTTP/1.1 200 OK Content-Type: text/plain Transfer-Encoding: chunked <script>eval("... ")</script>0 <script>eval("... ")</script>0– 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
  38. 38. Periodic pollingPolling interval – 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 
  39. 39. 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 
  40. 40. HTML5 WebsocketsExtension de HTTPProvee sockets sobre HTTPFull-duplexFunciona a travez de proxiesTodavia es un draft…No todos los proxy servers lo soportanNo todos los webserver lo soportanNo todos los browsers lo soportan¡Son sockets!
  41. 41. En definitiva: ¡Muchas opciones!• Forever Frame• Periodic polling• Long polling• HTML5 WebSockets
  42. 42. 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
  43. 43. 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
  44. 44. ¿Como lo instalo? *¡NuGet!
  45. 45. Ejemplo 4Hello SignalR
  46. 46. ¿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)
  47. 47. Connections y Hubs
  48. 48. Dos modelos de conexionPersistentConnection HubsComunica 1..N clientes Comunica 1..N clientes Abstraccion sobreEs un IHttpHandler PersistentConnectionRequiere que se defina una ruta Las rutas se mapean automaticamente (/signalr/hubs)Limitado a enviar mensajes Se pueden enviar mensajes y llamar aEl usuario define el “protocolo” metodos SignalR define el protocolo
  49. 49. Ejemplo 5Knockout.js & SignalR
  50. 50. Ejemplo 6 Hubs
  51. 51. 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
  52. 52. Clients
  53. 53. ClientesEn el servidorSe puede hostear en cualquier aplicacion ASP.NET(SignalR.Server)En el clienteJavaScript (SignalR.JS)Pero hay mas…
  54. 54. ClientesEn el servidor“SelfHost” (https://github.com/SignalR/SignalR/tree/master/SignalR.SelfHost)Windows AzureOn the client sideJavaScript (SignalR.JS)Cualquier aplicacion .NET (SignalR.Client)Cualquier dispositivo WP7 (SignalR.Client.WP7)iOSAndroid
  55. 55. 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
  56. 56. Ejemplo 7Expense Application
  57. 57. Contacto• Mail: – rodolfof@lagash.com• Blogs: – http://shockbyte.net• Twitter: – @rodolfof
  58. 58. ¡Gracias!

×