ASP.NET MVC
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

ASP.NET MVC

on

  • 5,615 views

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

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

Statistics

Views

Total Views
5,615
Views on SlideShare
3,377
Embed Views
2,238

Actions

Likes
0
Downloads
104
Comments
0

1 Embed 2,238

http://shockbyte.net 2238

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

CC Attribution-NonCommercial LicenseCC Attribution-NonCommercial License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • 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 ().setProgress(i); Thread.Sleep(100); } } }Add some HTML:<!DOCTYPE html> Start work

ASP.NET MVC Presentation Transcript

  • 1. ASP.NET MVCRodolfo FinochiettiMVP ASP.NET/IISLagash Systems
  • 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. ASP.NET MVC3
  • 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. 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. Arquitectura de ASP.NETASP.NET APIs de Servicios para Aplicaciones Membership Role Manager Personalization Site Navigation Database Caching Health Monitoring
  • 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. 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. Modelo-Vista-Controlador Model View ControllerXerox PARC 1978http://heim.ifi.uio.no/~trygver/themes/mvc/mvc-index.html
  • 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. ¿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. Rutaswww.sitio.com/products/report/1/06/2008
  • 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. 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. 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. Ejemplo 1ASP.NET MVC
  • 17. Razor17
  • 18. ¿Un View… que?• Encargado de Renderizar vistas – HTML – Javascript• Alternativa a “<% %>”
  • 19. Objetivos de Razor• Compacto• Sencillo• “Amigo del HTML”• ¡Ya conocemos el lenguaje!
  • 20. Ejemplo 2 Razor
  • 21. Nuevas carácterísticas de ASP.NET 321
  • 22. Global Filters• Antes• Ahora
  • 23. Dynamic ViewModel• Antes• Ahora
  • 24. Nuevos Action Result Types
  • 25. Nuevos Action Result Types
  • 26. Mas soporte para JSON
  • 27. Mejoras en las validaciones
  • 28. jQuery y AJAX28
  • 29. jQueryPlugins Selectors Animations
  • 30. jQuery Selectors $(“#userName”) $(“input:text”) $(“.required”) $(“#grid tr:even”)
  • 31. jQuery Animations $(…).show() $(…).hide()$(…).slideDown() $(…).slideUp() $(…).fadeIn() $(…).fadeOut()
  • 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. Ejemplo 3jQuery, AJAX y Edicion de Entidades
  • 34. Aplicaciones Web Real Time Con SignalR34
  • 35. ¡Los usuarios quieren la ultima informacion AHORA!Twitter – live searches/updatesStock streamersAuctionsLive scoresReal-time notificationsInteractive gamesCollaborative appsLive user analytics… 6
  • 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. 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. 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. 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. 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. En definitiva: ¡Muchas opciones!• Forever Frame• Periodic polling• Long polling• HTML5 WebSockets
  • 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. 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. ¿Como lo instalo? *¡NuGet!
  • 45. Ejemplo 4Hello SignalR
  • 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. Connections y Hubs
  • 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. Ejemplo 5Knockout.js & SignalR
  • 50. Ejemplo 6 Hubs
  • 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. Clients
  • 53. ClientesEn el servidorSe puede hostear en cualquier aplicacion ASP.NET(SignalR.Server)En el clienteJavaScript (SignalR.JS)Pero hay mas…
  • 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. 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. Ejemplo 7Expense Application
  • 57. Contacto• Mail: – rodolfof@lagash.com• Blogs: – http://shockbyte.net• Twitter: – @rodolfof
  • 58. ¡Gracias!