ASP.NET MVC

6,159 views

Published on

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

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
6,159
On SlideShare
0
From Embeds
0
Number of Embeds
2,342
Actions
Shares
0
Downloads
167
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • ViewEngine:- Componente de ASP.NET que se encarga de renderizar vistasActualmente, la gran mayoría de la gente utiliza el motor clasico de ASP.NET con “<% %>”Esta es una alternativa a ese motor
  • Objetivo principal de Razor: ahorrar teclas. Que sea mas fácil y rápido armar sitios con ASP.NET MVCPara eso es:CompactoSencilloPoco intrusivo, “amigo del HTML”No hay que aprender un lenguaje nuevo! Se programa con C# o VB.NET
  • How do youimplement these today?
  • DEMO: Fiddler con hootsuit.com
  • DEMO: Fiddler con facebook.com
  • That’s a lot of options, a lot of things to account for and a lot of different programming models. Are you going to do this?Are you still writing separate getDocumentById and AttachEvent methods to work with the DOM? What about jQuery?
  • Open the previously created sampleInstall-Package jQuery.UI.Combined Add a class: [HubName("worker")] public class WorkerHub : Hub { public void startProcessing(Event e) { Caller.notify("We've started processing " + e.EventName); Clients.setProgress(10); for (int i = 0; i <= 100; i++) { SignalR.Hubs.Hub.GetClients<WorkerHub>().setProgress(i); Thread.Sleep(100); } } }Add some HTML:<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head> <title></title> <link rel="stylesheet" href="Content/themes/base/jquery.ui.all.css" /> <script src="Scripts/jquery-1.6.4.min.js" type="text/javascript"></script> <script src="Scripts/jquery-ui-1.8.16.min.js" type="text/javascript"></script> <script src="Scripts/jquery.signalR.js" type="text/javascript"></script> <script src="signalr/hubs" type="text/javascript"></script> <script type="text/javascript"> $(function () { var workerHub = $.connection.worker; $('#progressbar').progressbar({ value: 0 }); $('#startWorkTrigger').bind('click', function () { workerHub.startProcessing({ eventName: 'UAN12' }) .fail(function (e) { alert("An error occured: " + e); }); }); workerHub.notify = function (message) { $('#notifications').html(message); }; workerHub.setProgress = function (progress) { $('#progressbar').progressbar({ value: progress }); }; $.connection.hub.start(); }); </script></head><body> <div id="progressbar" style="width: 200px;"></div> <div id="notifications" style="width: 200px;"></div> <button id="startWorkTrigger">Start work</button></body></html>
  • 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!

    ×