General overview of ASP.NET Ajax and how to use its basic features in .NET Websites.

1. Desarrollando una Mejor
Experiencia de Usuario con
ASP.NET Ajax
Julio Casal
Software Developer
John Galt Solutions
julio_casal@hotmail.com
http://msguayaquil.com/blogs/jcasal

2. Agenda
Vista rápida de ASP.NET Ajax
Areas a mostrar:
Enriquecimiento de páginas ASP.NET con
Ajax
Usando servicios Web desde JavaScript
Creación de controles que soporten Ajax y
scripts
Objetivo:
Demonstrar la amplitud, simplicidad y
extensibilidad de ASP.NET Ajax

3. Ajax-ificando un Sitio
Mejorar las características del sitio/aplicación
Rendimiento: menores
actualizaciones, requests/responses
Percepción del Usuario-final: interacciones fluídas; no
hay cortes bruscos
Usabilidad: notificaciones visuales
Mejorar la apariencia visual: animaciones
Proveer funcionalidad adicional: auto-
actualizaciones, trabajo en background, etc.
Por qué Ajax-ificar?
No solo porque es la moda!
Experiencias diferenciadas son clave para el nuevo
éxito con clientes y alcanzar expectativas crecientes

4. Qué es ASP.NET Ajax?
Un framework de punto-a-punto para construir experiencias y
aplicaciones Web interactivas y enriquecidas
Extensiones de ASP.NET 2.0 Ajax
Controles de servidor que habilitan AJAX en cualquier aplicación
ASP.NET
Librería de Microsoft Ajax
Framework de scripts de cliente que trabaja en varios navegadores y
servidores de back-end
ASP.NET Ajax Control Toolkit
Conjunto de controles enriquecido y funcionalidad de scripts en el cliente
Modelo de desarrollo comunitario
Objetivos Principales
Simple, pero Poderoso
Feeling de tipo .NET con el framework de scripts
Reduce la necesidad de que cada desarrollador tenga que usar scripting
en escenarios clave

5. Diagrama de la Arquitectura
HTML markup, “Atlas”
CSS, and Service Web Services
ASP.NET Pages
Proxies (ASMX or WCF)
Script
Librería Microsoft Ajax
Extensiones ASP.NET 2.0 Ajax
Controls, Components App Services
Ajax-Enabled Bridge
Component Model and Server Controls
Web Services
UI Framework Bridge
Base Class Library
ASP.NET 2.0
Script Core Page
Application
Framework,
Browser Compatibility Services
Server Controls
Framework de Framework de
Cliente Servidor

6. “ASP.NET Ajax”
Lista de Tareas

7. Controles de Servidor “Atlas”
Reduciendo viajes de ida y vuelta
control <Asp:UpdatePanel>
Defina fácilmente regiones “actualizables”
de una página
Los viajes de ida y vuelta al servidor se
vuelven asíncronos
“Atlas” maneja toda la infraestructura
<atlas:UpdatePanel id=“u1” runat=“server”>
<ContentTemplate>
<!– Este contenido puede ser actualizado
dinámicamente! ->
<asp:GridView>
...
</asp:GridView>
<ContentTemplate>
</atlas:UpdatePanel>

8. Qué Escenarios Cubre ASP.NET Ajax?
Enriquecer aplicaciones ASP.NET
No se require scripting
Habilitar actualizaciones con menos postbacks y renderizado
parcializado de porciones de páginas
Controles habilitados con Ajax o extensores para escenarios más
allá de las actualizaciones de páginas
Uso de servicios Web desde script cliente
Algo de scripting
Abstracción basada en métodos sobre XMLHttp para servicios
.asmx/.svc
Soporte para servicios JSON, RESTful
Construcción de Componentes Ajax reutilizables
Requiere scripting para el modelo “page por ver”
El framework de scripts provee un modelo más robusto y
productivo de desarrollo
Soporte para extensibilidad tanto en el servidor como en el
cliente

9. ASP.NET Ajax en Acción:
Photo SlideShow Ajaxificado

10. Esquema de la Demo
ScriptManager HistoryControl
UP1
OverlayExtender
UP3
FormView
Forma para Comentarios
FormView
Foto + Título UP4 DataList
UpdateProgress Lista de Comentarios
FadeHighlight
CrossFadeExtende
UP2 DataList: PhotoList r
ThumbnailExtender EXIF
Métodos Web via XMLHttp Servic
e

11. Recapitulación de la Demo
Ciertas porciones de la página se actualizan vía
UpdatePanel
El comportamiento básico del UpdatePanel es
extendido con patrones Ajax usando controles
Extender
Progress, Notificaciones Visuales (efectos fade)
Otros patrones Ajax implementados
Despliegue de información (overlay + thumbnails)
Pedir datos adicionales de un servicio Web
Información EXIF
Script empaquetado en clases del lado cliente y
funcionalidad expuesta vía controles de servidor

12. Notas de la Demo
Renderizado Parcial vs. Servicios Web
Dos modelos para actualizar la UI incrementalmente
Renderizado Parcial – cuando necesita mantener el
estado de la página, controles, etc, en lógica de servidor
Pros: Simple de incorporar, use propiedades de los
controles, estado de la página
Cons: Full-postback, un request a la vez
Servicios Web – cuando su lógica del lado del servidor
no mantiene estado
Pros: Liviano, mútiples requests en paralelo
Cons: Se necesita escribir un poco de script cliente para extraer
datos de la UI y empaquetarlos como parámetros para llamar al
servicio web
Ambos son herramientas últiles
ASP.NET Ajax provee ambos modelos
UpdatePanel
Modelo de programación .asmx/.svc; proxies de script cliente
proveen un mayor nivel de abstracción en requests
XMLHttpRequest

13. Squeet.com

14. Squeet.com
“Atlas” les ha brindado una rica
experiencia de usuario a los
usuarios de Squeet…No puedes
pedir una API más poderosa y fácil
de usar.
--Hamid Shojaee, Presidente, Axosoft, LLC

15. www.TitleZ.com

16. www.TitleZ.com
“Considerando lo demorado
que es implementar AJAX
tradicional, „Atlas‟ casi
parece magia!”
Arthur Wait, Dev Manager, TitleZ

17. www.PageFlakes.com

18. Vendedores de Componentes
http://blogs.msdn.com/brada/archive/2006/05/06/AtlasControlVendors.aspx

19. “Atlas”
Control ToolKit

20. En Resumen…
ASP.NET Ajax es simple pero poderoso
Habilita el “Ajax-ificar” las aplicaciones ASP.NET
con facilidad
Permite incorporar varios patrones Ajax
Plataforma extensible para escenarios más
avanzados
Framework de punto a punto
Soporta y aprovecha el modelo .NET

21. Recursos Adicionales
El sitio de ASP.NET Ajax
http://ajax.asp.net
Descargas, control
toolkit, foros, videos, docs, información en
general
Web Development Helper
http://projects.nikhilk.net
Blogs
http://www.nikhilk.net
http://weblogs.asp.net/scottgu
http://weblogs.asp.net/bleroy

22. El Futuro de ASP.NET Ajax
Estarán disponibles nuevos Community Tech
Preview (CTP)
Licencia Go Live con soporte de la comunidad
Fin de Año: ASP.NET Ajax 1.0 Liberado
Soporte completo
Incorporará el feedback obtenido de los builds CTP
Corre sobre ASP.NET 2.0
Incluido en el release “Orcas” del .NET
framework
Se seguirá el modelo CTP para incorporar
funcionalidad adicional sobre 1.0

23. Gracias!

24. © 2006 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S.
and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because
Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any
information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS
PRESENTATION.