Tecnologías ASP.NET 4.0 (saltando desde la versión 2.0)

Tecnologías ASP.NET 4.0 (saltando desde la versión 2.0) José Manuel Alarcón Aguín

Tecnologías ASP.NET 4.0 (saltando desde la versión 2.0) No está permitida la reproducción total o parcial de este libro, ni su tratamiento informático,

ni la transmisión de ninguna forma o por cualquier medio, ya sea electrónico, mecánico, por fotocopia, por registro u otros métodos, sin el permiso previo y por escrito de los titulares del Copyright. Diríjase a CEDRO (Centro Español de Derechos Reprográficos, www.cedro.org) si necesita fotocopiar o escanear algún fragmento de esta obra.

Derechos reservados © 2009, respecto a la primera edición en español, por

Krasis Consulting, S. L. www.krasis.com

ISBN: 978-84-936696-1-4 Depósito Legal: VG 961-2009 Impreso en España-Printed in Spain

Agradecimientos La tarea de escribir un libro nunca es fácil, ni para el autor ni para quienes conviven o trabajan con él. Por eso, entre otras razones, un libro nunca es exclusivamente obra del que lo escribe. Así, debo agradecer como siempre a mi familia el que hayan aguantado mis contestaciones secas al teléfono cuando interrumpían la escritura. Eso y que no me haya pasado a verlos en unas cuantas semanas, claro. En Krasis, si ya suele ser difícil hablar conmigo, mientras estaba con el libro ha sido poco menos que imposible. Por ello vaya mi agradecimiento también por su paciencia a Héctor, María, Pablo, Verónica, Fran, Yazmín, Dani y Eduardo. A Pablo Iglesias hay que agradecerle especialmente su trabajo con las cubiertas del libro. ¡Preciosas! El bueno de Octavio Hernández, un sabio de la computación y autor también de Krasis Press, revisó parte del material del libro desde la soleada California. Gracias maestro. La gente de Microsoft Ibérica, y en especial en este caso Beatriz y David, que siempre se acuerdan de mi cuando hay algo de ASP.NET de por medio :-) Finalmente, como siempre, a la principal sufridora de mis delirios frikis, Eva. Te ρ = 1 - sin(θ)

vii

Contenido CONTENIDO..........................................................................................................................ix Presentación......................................................................................................................xiii 1. ASP.NET y sus versiones..................................................................................1 1.- La historia de ASP.NET hasta su versión 2.0........................................................1 2.- La versión 3.0 de .NET.................................................................................................3 3.- La versión 3.5 de la plataforma..................................................................................4 4.- Un Service Pack que es mucho más que un parche...........................................5 5.- .NET 4.0 y Visual Studio 2010....................................................................................6 6.- De qué trata este libro (y qué deja fuera).............................................................7 7.- En resumen........................................................................................................................8 2. FUNDAMENTOS DE AJAX......................................................................................9 1.- Interfaces de usuario avanzadas................................................................................10 2.- Un poco de teoría: el objeto XMLHttpRequest.................................................11 3.- Basta de teoría: vamos a la práctica.......................................................................13 4.- Problemas típicos de Ajax y sus soluciones.........................................................16 4.1.- Llamadas fuera de dominio..............................................................................16 4.2.- Gestión de errores y llamadas que no vuelven........................................17 4.3.- Envío de datos al servidor...............................................................................18 4.4.- Contenidos no actualizados debido a cachés........................................... 20 5.- Devolución de información: JSON...........................................................................21 6.- En resumen..................................................................................................................... 23 3. ASP.NET AJAX EN EL SERVIDOR.................................................................... 25 1.- Un primer ejemplo: mejora de una aplicación básica con AJAX.................. 26 2.- Postbacks parciales y repintados parciales de página....................................... 30 3.- El control ScriptManager............................................................................................31 4.- El control UpdatePanel............................................................................................... 32 5.- Modos de actualización parcial................................................................................ 33 6.- Disparadores.................................................................................................................. 34 7.- Indicación de progreso de las llamadas asíncronas............................................ 37 8.- Refrescos parciales periódicos................................................................................. 40 9.- Unicidad del ScriptManager....................................................................................... 42 10.- El control ScriptManagerProxy.............................................................................. 43 11.- Gestión de errores AJAX........................................................................................ 43 12.- Incompatibilidades de AJAX................................................................................... 48 13.- AJAX Control Toolkit.............................................................................................. 50 4. ASP.NET AJAX EN EL NAVEGADOR............................................................ 59 1.- Retrollamadas de red a métodos estáticos.......................................................... 60 ix

x  Tecnologías ASP.NET 4.0 (saltando desde la versión 2.0)

2.-

3.4.5.6.-

1.1.- Análisis de tráfico con un UpdatePanel.......................................................61 1.2.- Ejemplo optimizado con retrollamadas de red a métodos estáticos................................................................................................................ 63 Llamadas a servicios Web..........................................................................................67 2.1.- Definición de un servicio Web ASMX para ser llamado desde JavaScript.............................................................................................................. 68 2.2- Creación de la página cliente para llamar al servicio..............................71 Servicios de aplicación: Membership y Roles desde el navegador................ 75 Referencias a scripts en páginas y controles........................................................81 Optimización de uso de bibliotecas en ASP.NET 4.0....................................... 84 5.1.- Combinación de scripts.................................................................................... 87 En resumen..................................................................................................................... 88

5. ENLAZADO A DATOS EN EL NAVEGADOR........................................... 89 1.- Concepto de plantillas de lado cliente...................................................................91 2.- Las bases para trabajar............................................................................................... 93 3.- Definición de la plantilla de productos................................................................. 94 4.- La clase DataView........................................................................................................ 95 5.- Pseudo-columnas y atributos especiales............................................................... 98 6.- Atributos sys condicionales..................................................................................... 100 7.- Atributos code para renderizado condicional.................................................... 101 8.- Enlazado de datos en tiempo real........................................................................ 103 9.- Vistas maestro-detalle: preparar el maestro..................................................... 105 10.- Vistas maestrro-detalle: preparar los detalles................................................ 106 11.- Devolver los datos modificados al servidor: contextos de datos............. 108 12.- La definición del método de guardado de cambios.......................................110 13.- Historia del navegador.............................................................................................112 14.- En resumen..................................................................................................................115 6. ASP.NET DYNAMIC DATA: INTERFACES DE DATOS A LA VELOCIDAD DE LA LUZ.......................................................................................117 1.- ¿Qué es Dynamic Data?............................................................................................118 2.- Nuestro primer proyecto con Dynamic Data...................................................119 3.- Definir el modelo de datos......................................................................................121 4.- Añadiendo el modelo a Dynamic Data............................................................... 122 5.- Plantillas de interfaz de usuario............................................................................. 124 5.1.- Diseccionando una plantilla........................................................................... 125 6.- Plantillas para entidades........................................................................................... 129 7.- Plantillas para campos............................................................................................... 129 8.- Las rutas de las páginas dinámicas....................................................................... 132 8.1.- Parámetros individuales en las rutas.......................................................... 135 9.- Ampliando los metadatos del modelo................................................................. 136 9.1.- Mejorando la validación de campos............................................................ 138 9.2.- Validaciones personalizadas........................................................................... 140 10.- Plantillas de campos propias..................................................................................141 11.- Dynamic Data en páginas propias....................................................................... 143 12.- En resumen................................................................................................................ 146

Contenido  xi

7. FILTRADO DE DATOS AUTOMÁTICO CON QUERYEXTENDER................................................................................................... 147 1.- El control QueryExtender....................................................................................... 147 2.- Tipos de filtros............................................................................................................ 148 3.- Creación de la página base para ejemplo........................................................... 149 4.- Primer filtro: búsqueda por nombre.................................................................... 152 5.- Filtrado por rangos de valores.............................................................................. 154 6.- Filtrado por valores de propiedades.................................................................... 154 7.- Parámetros de filtrado.............................................................................................. 155 8.- En resumen................................................................................................................... 157 ÍNDICE ANALÍTICO...................................................................................159

Presentación En los últimos años la World Wide Web ha evolucionado mucho. Existe un verdadero abismo tecnológico y conceptual entre aquellas primeras páginas estáticas —con cuatro etiquetas para dar formato y unos pocos enlaces— y las actuales aplicaciones Web 2.0 como Google Docs, Facebook o Live Maps. Hay tanta diferencia entre ellas como entre los carruajes tirados por caballos y un Fórmula 1. El mundo de mediados de los 90 tampoco era el mismo y, desde los 70 millones de internautas estimados entonces a los casi 1.600 millones de 2009 (InternetWorldStats.com), la cosa ha cambiado mucho. Las diferencias estriban no sólo en lo que salta a la vista, sino también en lo que no se ve. Las expectativas de los usuarios no son los mismas, los lenguajes de programación tampoco. Antes era suficiente con mostrar texto plano y unos gráficos, hoy es preciso habilitar una interactividad total entre los elementos de la pantalla y el usuario. Cuando todos accedíamos a la WWW usando módems de 28.8 Kbps era aceptable esperar más de un minuto para recibir el contenido estático de una página. Y dábamos gracias a los dioses por ello ;-) Hoy en día no sólo debe haber una respuesta inmediata, sino que lo normal es que ni siquiera se evidencie en modo alguno que ha habido un viaje al servidor. Las fronteras entre las aplicaciones de escritorio y las aplicaciones Web son cada vez más difusas. ¡Bienvenidos al mundo de AJAX y las RIA (Rich Internet Applications)! ASP.NET es sin duda (y no es una opinión, sino un hecho) la plataforma de creación de aplicaciones Web más productiva que existe. La base fundamental sobre la que se sustenta esta tecnología y las diferentes características que ofrece, hacen posible esta visión moderna, interactiva y escalable de la Red. Este libro trata precisamente de esas tecnologías especializadas que marcan la diferencia entre una aplicación Web corriente y otra de la era Web 2.0 y más allá. ASP.NET 4.0 y Visual Studio 2010 nos traen las últimas mejoras de esta plataforma de desarrollo.

¿A quién va dirigido este libro? Por lo que acabo de comentar el lector ya se dará cuenta de una cuestión importante: este libro no es para principiantes. El contenido va dirigido a programadores de ASP.NET 2.0 que quieren dominar las principales tecnologías que aporta la última edición, ASP.NET 4.0. Se da por hecho que el lector tiene unos conocimientos, cuando menos fundamentales, de esta plataforma. Ahora bien, no se da por sentado nada en cuanto a las técnicas que se explican en el interior, de las que se parte de cero para facilitar el aprendizaje.

xiii

xiv  Tecnologías ASP.NET 4.0 (saltando desde la versión 2.0)

Es especialmente interesante que el lector conozca un poco el leguaje JavaScript y una pizca de HTML, pues la tecnología AJAX se sustenta sobre ellos y vendrá bien para comprender el código de ejemplo.

¿Qué temas se tratan en el libro? Una gran parte del contenido se dedica a AJAX y todas las técnicas que hacen que funcione. Pero no te confundas, este no es el típico libro de AJAX que has visto por ahí. Va mucho más allá del uso del UpdatePanel que todo el mundo conoce, para adentrarse en la optimización para conseguir aplicaciones escalables. Un primer capítulo se dedica a enseñar los fundamentos de AJAX sin el apoyo de bibliotecas especializadas. Para que nos entendamos mejor: AJAX “a pelo”. Esto te ayudará a comprender bien su funcionamiento primordial y podrás responder mejor ante problemas que surjan más adelante en aplicaciones reales apoyadas en código de otros. ASP.NET AJAX es la biblioteca de Microsoft para crear páginas AJAX. El segundo capítulo presenta esta tecnología para sacarle partido sin tener que salirse de las técnicas habituales de todo programador .NET. Aprenderás a utilizar bien sus controles de servidor, que ofrecen una grandísima productividad con un rápido aprendizaje. Te proporcionará grandes ventajas y la usarás mucho, pero no está exenta de problemas. Todo programador preocupado por el rendimiento y la escalabilidad de sus aplicaciones debe ir más allá y no quedarse en este punto. Por eso, el tercer capítulo se centra en las capacidades del lado de cliente de ASP.NET AJAX. Se presenta la tendencia actual de las aplicaciones Web a trasladar cada vez más procesamiento al navegador, intercambiado datos directamente con el servidor. Aprenderemos lo necesario para poner en práctica esta visión, exponiendo y recibiendo datos a través de servicios que se consumen desde el navegador con JavaScript y el apoyo de ASP.NET AJAX. En la cuarta parte del libro llevaremos el concepto de AJAX “puro” al extremo gracias a las nuevas funcionalidades de plantillas para el lado cliente que nos ofrece ASP.NET 4.0. Esta nueva tecnología abre las puertas a un desarrollo Web super-eficiente que traslada toda la generación de la interfaz de usuario al navegador, dejando el servidor como un intermediario para mover datos. El quinto capítulo se centra en la nueva tecnología de generación de interfaces de gestión de datos: Dynamic Data. Gracias a ella podemos conseguir en minutos completas interfaces de administración de bases de datos para crear los típicos “Mantenimientos”. Pero como veremos, la tecnología va mucho más allá, proporcionándonos total flexibilidad para hacer lo que queramos en la gestión de datos sin apenas escribir código. Tendrás a tu alcance un nuevo nivel en la escala de la de productividad. La última parte del libro se centra en explicar un conjunto de controles Web destinados a crear interfaces para filtrado de datos. Se trata de los QueryExtender

Presentación  xv

y las clases relacionadas con éstos. Con ellos, nuevos en ASP.NET 4.0, es muy sencillo conseguir avanzados sistemas de filtrado de información sin tener que escribir código. Combinándolos con los controles enlazados a datos podemos crear complejas páginas con listados de información en minutos.

Las herramientas que necesitas para trabajar Hace poco, después de una charla que impartí, tuve la oportunidad de hablar un buen rato con un par de emprendedores del mundo TIC que se me acercaron. Tras un tiempo de experiencia laboral por cuenta ajena decidieron volar solos, y un par de meses antes habían constituido una empresa para desarrollar aplicaciones Web. Me dijeron que se habían decidido a trabajar con PHP en lugar de con ASP.NET por que “en PHP es todo gratis y para programar con ASP.NET necesitamos pagar licencias a Microsoft.”. ¡Qué confundidos estaban! Y no sólo en esta afirmación, sino con otros muchos mitos y leyendas equivocados que existen sobre ASP.NET y sobre lo que algún día tengo que escribir largo y tendido. Menos mal que dieron conmigo para sacarlos de su error ;-) Para desarrollar con ASP.NET, tanto aplicaciones comerciales como para cualquier otro uso, no es necesario pagar ni un solo euro a Microsoft. Visual Studio dispone de unas ediciones especiales llamadas Visual Studio Express Edition que son gratuitas y de libre descarga. Apenas tienen limitaciones para desarrollar y en concreto la versión especial para desarrollo Web, Visual Web Developer Express, tiene toda la funcionalidad disponible en esta versión gratuita. Para la parte de desarrollo de bases de datos Microsoft ofrece también una versión Express de su gestor: SQL Server Express. Sus limitaciones son que sólo le está permitido ocupar 1 GB de RAM para caché de datos, utilizar un único procesador de la máquina (con los núcleos que tenga éste, da igual) y el tamaño máximo de las bases de datos que puede manejar la licencia es de 4 GB. Son unas limitaciones bastante amplias y es difícil llegar a superarlas en aplicaciones comunes en la PYME. Ofrece herramientas adicionales de administración y de reporting entre otras, y es perfecta para cualquier aplicación de gestión o para Internet. Y por supuesto sigue siendo gratis aunque nuestras aplicaciones sean comerciales. Las últimas versiones de Visual Web Developer Express y de SQL Server Express se pueden descargar libremente desde http://www.microsoft.com/express/. Te las recomiendo para practicar las explicaciones del libro. Si quieres funcionalidades de trabajo en equipo, desarrollar para Office o para móviles o poder depurar aplicaciones en remoto, puedes actualizarte a las ediciones comerciales de Visual Studio. Toda la información aquí: http://www.microsoft.com/ visualstudio/. Para aplicaciones empresariales de gran tamaño están disponibles las otras ediciones comerciales de SQL Server. Consulta sus características en http://www. microsoft.com/sqlserver/.

xvi  Tecnologías ASP.NET 4.0 (saltando desde la versión 2.0)

El código fuente de ejemplo Todos los ejemplos y demos desarrollados en el libro se pueden descargar desde la web de la editorial. Visita www.krasispress.com y busca el libro en el catálogo, bien navegando por las categorías o con la caja de búsqueda. En la ficha del libro existe un enlace para descargar los ejemplos de código. Descárgate el archivo en formato ZIP y descomprímelo en cualquier carpeta de tu ordenador. Para abrir los ejemplos desde Visual Studio lo mejor es usar la opción Archivo·Abrir·Sitio Web y elegir la carpeta del ejemplo en el que tengas interés. Por el nombre se deduce fácilmente a qué parte del libro corresponden. Para los ejemplos que usan datos he empleado la archiconocida base de datos Northwind. La puedes descargar en diversos formatos desde el sitio de descargas de Microsoft. Vete a http://download.microsoft.com y una vez allí introduce la palabra “Northwind” en el cuadro de búsqueda:

Figura 1.- Descarga de la base de datos Northwind

Se trata de una base de datos muy antigua, por eso pone que es una descarga para SQL Server 2000, pero no te preocupes pues te funcionará bien con cualquier versión moderna del gestor de datos. La he usado porque es la más popular entre los programadores de .NET, y hay una alta probabilidad de que la conozcas ya. Existe una versión nueva de esta base de datos, creada por la comunidad, que puedes descargar desde http://www.codeplex.com/NorthwindCommunity/. Es un proyecto reciente que trata de actualizar un poco el ejemplo original, pero no te aseguro que los cambios que hayan hecho vayan a funcionar con los ejemplos del libro, así que lo dejo a tu criterio, pero puedes probar.

Presentación  xvii

Contacto con el autor y la editorial Puedes encontrarme y contactar conmigo a través de mi blog sobre desarrollo Web en www.jasoft.org. Ahí publico constantemente todo tipo de consejos, noticias y vídeos sobre el desarrollo para Internet con ASP.NET. Te recomiendo que lo visites. Me encanta recibir comentarios y críticas constructivas, pero no me gustan los que sólo se acuerdan de mi cuando necesitan algo “¿capisce?” ;-) La web de la editorial es www.krasispress.com. Desde allí puedes ponerte en contacto con el equipo editorial cuando quieras. Dentro de Krasis existe el proyecto campusMVP (www.campusmvp.com) del que probablemente hayas oído hablar. Se trata de formación on-line con cursos creados y tutelados por conocidos MVP de Microsoft, para que tú y tu equipo os forméis a vuestro ritmo y desde cualquier lugar preguntándole a los que más saben. En campusMVP tenemos un boletín mensual de noticias, trucos y “frikadas” varias que tiene varios miles de suscriptores encantados de recibirlo. Te recomiendo que te suscribas. También hemos puesto en marcha una página en Facebook (http://go.krasis.com/Facebook) con actualizaciones frecuentes sobre el mundo Microsoft y sus tecnologías, enlaces a artículos interesantes, noticias, vídeos prácticos, ofertas exclusivas para “fans”, etc... Si estás en esta red social no olvides hacerte fan de la página.

¡Comencemos! Gracias por tu interés en este libro. Espero que el esfuerzo de escribirlo haya valido la pena y que tras haberlo leído estés en condiciones de crear aplicaciones Web de alta calidad, escalables y sacando todo el partido a las últimas tecnologías Microsoft.

capítulo

1

ASP.NET y sus versiones

¿Por qué comenzar un libro que no está dirigido a principiantes con una cuestión, en apariencia, tan insignificante como ésta?... Pues porque no es un asunto trivial en absoluto. Como veremos, en ASP.NET los saltos en la numeración de las versiones no se corresponden en realidad con los cambios cuantitativos que cabría esperar de éstos, lo que causa gran confusión entre los programadores. Dada la cantidad de características existentes en esta potente plataforma de desarrollo Web, es muy importante saber qué hay disponible en cada versión, e incluso en cada actualización dentro de una versión. Por ello vamos a hacer una composición de lugar antes de ponernos a trabajar.

1.- La historia de ASP.NET hasta su versión 2.0 La primera versión de ASP.NET, la 1.0, apareció en el mercado en enero de 2002, junto con la edición inicial de Visual Studio para la plataforma .NET. Antes de este lanzamiento oficial, hubo diversas Betas en las que aún la tecnología llevaba el nombre de ASP+. Éstas estuvieron disponibles para experimentar desde mediados de 2000, por lo que en realidad la plataforma tiene mucho más recorrido del que se desprende de las fechas oficiales. La idea era sustituir al ASP 3.0 clásico -por eso le dejaron un nombre parecido, aunque no tengan nada que ver- y ofrecer un entorno de desarrollo para el servidor con grandes ventajas sobre lo existente en el mercado. Un punto importante era tratar de ofrecer los mismos paradigmas de desarrollo que las tradicionales aplicaciones de escritorio, pero aplicados a la Web. Esto implicaba sobre todo orientación a eventos y a objetos, uso de lenguajes compilados, independencia automática del navegador y productividad, mucha productividad. Con ASP.NET se empezaron a desdibujar los límites entre cliente y servidor en el desarrollo Web.

1

2  Tecnologías ASP.NET 4.0 (saltando desde la versión 2.0)

Nota: Obviamente sin olvidarnos del inexcusable hecho de que hay una red de comunicaciones de por medio, con lo que ello implica en cuanto a transferencia de datos y velocidad, lo cual sigue siendo muy importante, claro.

El nuevo paradigma de desarrollo traído por los WebForms y la técnica de Postback, realmente innovador y tan característico de ASP.NET, hizo que desarrollar un formulario Web no fuese demasiado diferente de hacerlo para una aplicación de escritorio. Todas las características de productividad de esta primera versión convirtieron rápidamente a ASP.NET en una plataforma muy popular, pues permitía a los desarrolladores conseguir resultados impresionantes con muy poco tiempo y esfuerzo. En abril de 2002, poco después de un año, Microsoft actualizó mínimamente la plataforma sacando ASP.NET 1.1 y Visual Studio .NET 2003. En esta ocasión se incorporaron los controles móviles para el desarrollo Web orientado a PDA y teléfonos móviles, así como la validación automática de los elementos de la interfaz de usuario. Una actualización menor. El verdadero punto de inflexión en lo que se refiere al ámbito de desarrollo Web llegó en noviembre de 2005 (febrero de 2006 en España). En esta fecha se lanza ASP.NET 2.0 junto con Visual Studio 2005. Este sí que constituyó un cambio revolucionario dentro de ASP.NET; uno que influiría definitivamente en todas las versiones posteriores. Con todo el feedback recibido por Microsoft durante los cinco años previos, el equipo de desarrollo le dio un vuelco completo a la plataforma. Se introdujeron tantos cambios y características que se necesita un libro entero1 para explicarlas. Las más relevantes son las siguientes:

1

•

Nuevo modelo de compilación y separación de código e interfaz, que es un cambio de los propios fundamentos de trabajo de la plataforma.

•

Precompilación y despliegue de sitios Web para obtener un máximo rendimiento desde el primer momento. Soporte de sistemas de 64 bits.

•

El modelo de proveedores, con sus implicaciones en cuanto a extensibilidad de la plataforma.

•

Acceso a datos, incluso en varias capas SOA, sin necesidad de escribir código, gracias a un modelo declarativo.

•

Controles enlazados a datos de gran potencia, como las nuevas y mejoradas rejillas GridView, y controles de visualización y edición integrada como FormView o DetailsView.

El autor de este libro ha escrito también otra obra dedicada a explicar con detalle todas las tecnologías de ASP.NET 2.0, y que se puede adquirir en www.krasispress.com.

ASP.NET y sus versiones  3

•

Independencia de la interfaz de las páginas de su maquetado (Master Pages) y de su aspecto (Temas y Skins), fomentando la separación más absoluta entre interfaz y funcionalidad.

•

Interfaces de usuario para control de la seguridad mediante controles de arrastrar y soltar. Puedes construir toda la seguridad de tu aplicación sin escribir código alguno.

•

Creación de portales personalizables mediante WebParts.

•

Infraestructura de instrumentalización y monitorización de aplicaciones.

•

Nuevas técnicas de localización y globalización de aplicaciones.

•

Páginas asíncronas para sitios altamente escalables.

•

Controles de navegación.

•

Servicios de personalización de preferencias de usuario.

Este salto a la madurez de la plataforma abrió un nuevo mundo de posibilidades de desarrollo con alta productividad para sistemas Web empresariales, pero hizo que todos los programadores de la versión anterior tuvieran que actualizar sus conocimientos. La cuestión más importante, llegados a este punto, es señalar que el núcleo de ASP.NET es exactamente este mismo, el 2.0, en el resto de versiones que han salido desde entonces. Esto tiene una transcendencia fundamental, porque podemos afirmar que si conoces bien ASP.NET 2.0 conoces todo lo necesario para sacarle partido a las siguientes versiones, porque en esencia son la misma, como enseguida veremos. Sin embargo, si provienes de la versión 1.x tendrás que aprenderlo todo casi desde cero.

2.- La versión 3.0 de .NET La versión 3.0 de la plataforma .NET se presentó en sociedad en noviembre de 2006, justo un año después de la anterior. En realidad, esta versión 3.0 no era otra cosa que la plataforma .NET 2.0 junto con cuatro nuevas API especializadas que estaban construidas sobre ésta: • Windows Communication Foundation (WCF): para la creación de sistemas distribuidos basados en conceptos SOA (arquitecturas orientadas a servicios). A pesar de lo que pueda parecer por el poco afortunado nombre —que confunde a algunos desarrolladores—, estos servicios no están atados en absoluto a la plataforma Windows, sino que siguen los estándares de la W3C y pueden interoperar con cualquier otro sistema operativo y lenguaje de programación. •

Windows Workflow Foundation (WF): que permite el desarrollo de sistemas adaptables basados en flujos de trabajo tanto secuenciales como de estado, persistentes en el tiempo y con otros servicios añadidos.

4  Tecnologías ASP.NET 4.0 (saltando desde la versión 2.0)

•

Windows Presentation Foundation (WPF): la nueva API para creación de interfaces de usuario vectoriales avanzadas. Va mucho más allá de los sistemas tradicionales de ventanas para ofrecer un paradigma mixto entre el escritorio y la Web. Un subconjunto de WPF, multiplataforma y específico para la Web, es lo que se conoce como Silverlight.

•

Windows CardSpace: un sistema cliente para la gestión de identidades en Internet y en la empresa. Es, con diferencia, la API de la versión 3.0 que menos adopción ha tenido.

Si bien todas estas API adicionales son muy importantes y abren muchas vías de mejora en la programación de sistemas empresariales, lo cierto es que no dejan de ser añadidos a la plataforma, que dependen de ésta, pero el núcleo sigue siendo la versión 2.0 sin cambios de ningún tipo. En lo que respecta al desarrollo Web y ASP.NET, la versión 3.0 no aporta característica nueva alguna. Obviamente, podemos sacarle partido a alguna de estas API para añadir características a nuestras aplicaciones Web (por ejemplo, un servicio Web creado con WPF o un flujo de decisión basado en WF), pero en lo que se refiere a la plataforma ASP.NET, en ese momento sigue siendo la misma que había un año atrás.

3.- La versión 3.5 de la plataforma Mientras tanto, el mundo de las aplicaciones Web empieza a ver la invasión de AJAX. Estos desarrollos, a los que dedicamos una gran parte de este libro, se basan en la interacción estrecha con el usuario desde la interfaz del navegador, aparentando en la medida de lo posible que no hay comunicación visible con el servidor. La idea es que las aplicaciones Web se parezcan más aún a las de escritorio, sin recargas de páginas y dando la sensación de que todo ocurre en el equipo del usuario. Microsoft no puede permanecer ajena a esta tendencia que ellos mismos habían creado (como se explica en el primer capítulo de AJAX), así que en enero de 2007 aparece una API de manera independiente al desarrollo de la línea principal de .NET: ASP.NET AJAX, por aquel entonces conocida con el nombre en código de “Atlas”. Esta API para crear interfaces web de alta velocidad de respuesta y sin recarga de páginas, es un éxito instantáneo y se puede instalar paralelamente a ASP.NET trabajando sobre la versión 2.0 existente y con Visual Studio 2005. Unos meses después, en noviembre de 2007, aparece Visual Studio 2008, que incluye la versión 3.5 de la plataforma .NET. Esta versión sí que contiene cambios sustanciales en los lenguajes C# y VB y en los correspondientes compiladores. La mayor parte de dichos cambios tienen que ver con añadidos para dar soporte al nuevo lenguaje integrado de consultas LINQ (Language INtegrated Queries). Es decir, el núcleo de la plataforma sigue siendo el mismo (versión 2.0), pero con modificaciones en los lenguajes y algunas API añadidas, en especial las relacionadas con LINQ.

ASP.NET y sus versiones  5

Para acabar de liar las cosas, aunque la versión de la plataforma es la 3.5, la de los lenguajes no coincide. Por ejemplo, la versión de C# aparecida entonces es la 3.0, lo que añade más confusión para los programadores. En este momento se incorpora oficialmente el soporte para AJAX a la parte de desarrollo Web, por lo que a partir de entonces podías contar con que la plataforma tendría incorporado AJAX sin necesidad de instalarlo de manera separada. Además, para dar soporte a LINQ desde aplicaciones Web se añadió una biblioteca llamada System.Web.Extensions.dll que incluía tres nuevos controles: LinqDataSource, ListView y DataPager. Por lo tanto, lo que se dio en llamar ASP.NET 3.5 era en realidad lo siguiente: ASP.NET 2.0 + ASP.NET AJAX + 3 controles De nuevo importantes mejoras globales, gracias a LINQ para el acceso a datos, pero el mismo núcleo en lo que al desarrollo Web respecta. La interfaz de trabajo de Visual Studio 2008 ofrece también algunas características nuevas de productividad para la Web, sobre todo el soporte de Intellisense y depuración para el lenguaje JavaScript.

4.- Un Service Pack que es mucho más que un parche ¿Qué tendrá de especial el mes de noviembre para Microsoft? No lo sé, pero si te has fijado, es el mes en el que desde hace muchos años salen todas las grandes versiones de sus plataformas de desarrollo :-). Así, en noviembre de 2008 (como no podía ser de otra manera) aparece el Service Pack 1 para .NET 3.5, es decir, la nueva versión de la plataforma: .NET 3.5 SP1. Tradicionalmente, los Service Pack están pensados para agrupar en una sola descarga una recopilación de ajustes, resoluciones de fallos y parches de seguridad con el objeto de facilitar su aplicación a los usuarios. En realidad no deberían incluir nuevas funcionalidades. Incluso la propia Microsoft los define de esta manera: http:// support.microsoft.com/sp. Pero lo cierto es que en diversas ocasiones el gigante de Redmond los ha utilizado para agregar grandes bloques de funcionalidad a algunos productos. Este fue el caso del SP1 para .NET 3.5. En esta actualización, Microsoft incluyó novedades en todos los ámbitos, siendo la más visible de todas ellas la aparición de Entity Framework, su nuevo ORM para acceso a datos. En el ámbito del desarrollo Web aparecieron también varias características, aunque todas se sustentaban sobre ASP.NET 2.0. Entre ellas se encontraban: •

Dynamic Data: un nuevo sistema de creación automática de interfaces de usuario Web a partir de modelos de datos.

•

Control EntityDataSource: para dar soporte a acceso a datos declarativo a través de Entity Framework.

6  Tecnologías ASP.NET 4.0 (saltando desde la versión 2.0)

•

ADO.NET Data Services: creación y exposición automática de servicios Web para acceso a datos en modo REST, fundamentalmente basándose en Entity Framework.

•

Enrutamiento: soporte para definición dinámica de rutas virtuales en el servidor y su mapeado a archivos existentes o no. Especialmente pensado para dar soporte a ASP.NET MVC, del que hablaré en breve. Muy sencillo de utilizar. Toda la información aquí: http://msdn.microsoft.com/es-es/library/ cc668201.aspx.

•

Mejoras en AJAX: en concreto, soporte para el historial del navegador, un sistema de combinación de scripts para mejorar los tiempos de descarga de estos archivos, y un control para mostrar vídeos.

No está mal para un simple parche.

5.- .NET 4.0 y Visual Studio 2010 Y por fin llegamos al final de la historia (por el momento). A finales de 2009 hacen su aparición Visual Studio 2010 y la versión 4.0 de la plataforma. En lo que se refiere a Visual Studio, los cambios son sustanciales. Para empezar, el entorno es completamente nuevo y está basado en WPF, con interesantes mejoras para la escritura de código, la depuración y las superficies de diseño. En lo que se refiere al núcleo de la plataforma y las API relacionadas, hay muchos perfeccionamientos y añadidos, si bien los más importantes, en mi opinión, tienen que ver con la introducción de soporte en la plataforma para el desarrollo paralelo. En la actualidad se han popularizado los sistemas con más de un procesador y, sobre todo, los que llevan procesadores de múltiples núcleos (conocidos como manycore), que son hoy el estándar de la industria y que se incluyen hasta en los portátiles de gama más baja. Estos sistemas abren grandes posibilidades para el desarrollo de aplicaciones más eficientes y de mayor rendimiento, sacando partido a la capacidad de ejecutar en paralelo múltiples hilos de trabajo. El desarrollo de aplicaciones con múltiples hilos, sin embargo, reviste una gran complejidad para el programador, y con frecuencia se da la paradoja de que aplicaciones con multisubproceso se ejecutan peor en sistemas manycore que en sistemas sencillos más antiguos. Gracias a las extensiones para el desarrollo paralelo incluidas en .NET 4.0, la creación de este tipo de aplicaciones asíncronas y multi-subproceso se simplifica en gran medida. El nuevo modelo permite a los desarrolladores la escritura de código paralelo que es eficiente, granular y escalable, pero sin tener que lidiar directamente con las dificultades de la creación y sincronización de hilos, y además usando un lenguaje más natural para el programador.

ASP.NET y sus versiones  7

Otra importante novedad es el soporte para lenguajes dinámicos, del estilo de Lisp, PHP, Ruby o incluso JavaScript, que ahora son mucho más fáciles de incorporar a la plataforma. En lo que respecta a la parte de desarrollo Web, la principal novedad es, sin duda, el nuevo sistema de plantillas enlazadas a datos en el navegador, parte de la nueva versión de ASP.NET AJAX. Esta característica abre la posibilidad de crear aplicaciones AJAX más “puras” con gran trasvase de funciones desde el servidor al cliente. Las plantillas de lado cliente se tratan con profundidad en esta obra. También se ha añadido un nuevo control Chart para generar gráficos, y ciertas mejoras en Dynamic Data. Estas últimas también las estudiaremos. Adicionalmente, ASP.NET 4.0 incluye una nueva tecnología de desarrollo Web llamada ASP.NET MVC, que se basa en el patrón de diseño Modelo Vista-Controlador (de ahí el nombre). Éste constituye un sistema de desarrollo Web paralelo al ASP.NET tradicional, usando otro tipo de paradigmas completamente diferentes. Esta tecnología ha surgido como un proyecto independiente y ahora se incorpora con pleno soporte a la plataforma en la versión 4.0. Hay quien la adora y le ve grandes ventajas, y hay quien opina que es un paso atrás en el modo de desarrollar aplicaciones Web. En cualquier caso, se trata de una tecnología para el desarrollo Web completamente aparte de la tradicional y que en cierta medida “va por su cuenta”. Por este motivo en este libro, centrado en el desarrollo ASP.NET tradicional, no se incluye ASP.NET MVC. Existen en .NET 4.0 otros muchos otros añadidos y mejoras de diverso calado, muchos de los cuales provienen del SP1 para .NET 3.5 y que se han incorporado ya como base a la plataforma. En http://tinyurl.com/PDC2008-NETFX4PDF hay para descarga un poster de alta resolución que permite ver todas las novedades de .NET 4.0 en cada una de sus áreas de una forma resumida y sencilla.

6.- De qué trata este libro (y qué deja fuera) Como hemos podido comprobar en esta breve historia de .NET, existe una cierta complejidad para entender sus versiones y lo que nos proporciona cada una de ellas. Lo que sí podemos afirmar es que, en lo que respecta al desarrollo Web, todas las recientes se sustentan en la funcionalidad proporcionada por la 2.0. Las versiones 3.0, 3.5, 3.5 SP1 y 4.0 incluyen añadidos y mejoras que trabajan con 2.0 por debajo y aportan funcionalidades específicas, como el trabajo asíncrono desde el cliente o la creación de interfaces automatizadas. Por ello, este libro se va a centrar en las principales tecnologías aparecidas desde la versión 2.0 de ASP.NET y hasta la versión actual, que las contiene a todas. Así, centraremos gran parte de la obra en el desarrollo de aplicaciones AJAX, empezando por los fundamentos de esta tecnología, la creación de aplicaciones AJAX basadas en el servidor (que es la más común pero la menos óptima) y por fin, el cambio de filosofía que supone transferir gran parte de la lógica desde el servidor al cliente, que es la parte más compleja (y también la más interesante).

8  Tecnologías ASP.NET 4.0 (saltando desde la versión 2.0)

Con ello abarcaremos todo lo que es necesario saber de ASP.NET AJAX, desde la versión descargable independientemente para .NET 2.0 hasta las novedades aparecidas con .NET 3.5 SP1 y las últimas técnicas avanzadas de ASP.NET 4.0, por lo que se tendrá una referencia muy completa. Otra tecnología que no podíamos dejar fuera es Dynamic Data. Aparecida en .NET 3.5 SP1, es casi una desconocida para la gran mayoría de los programadores Web. Esto es una verdadera lástima, pues esta tecnología ofrece grandes posibilidades y mejoras de productividad. Con ASP.NET 4.0 se han incluido algunos perfeccionamientos adicionales y se espera que empiece a utilizarse de manera generalizada. En este libro aprenderás lo necesario para sacarle todo el partido. Para terminar he incluido también un completo capítulo sobre los nuevos controles para generación de interfaces de filtrado. Existen otras pequeñas mejoras de menor calado que han aparecido con ASP.NET 4.0 para la parte de desarrollo Web. No las he incluido aquí pues son una amalgama de diferentes cosas no relacionadas y hay información exhaustiva en Internet sobre ellas. En mi blog (www.jasoft.org) podrás encontrar información sobre la mayoría en diversas entradas que he ido añadiendo y añadiré en el futuro. Hay muchas otras tecnologías que se pueden utilizar en los desarrollos para Internet con .NET, pero que no son específicas para este propósito: LINQ, Entity Framework, Windows Communication Foundation, Silverlight/WPF, Workflow Foundation... Cualquiera de ellas es lo suficientemente extensa y compleja como para merecer un libro dedicado, por lo que no tiene sentido incluirlas en esta obra. Si tienes interés en aprender estas tecnologías te recomiendo que visites www.campusmvp.com, en donde encontrarás los mejores libros y cursos del mercado sobre todas ellas.

7.- En resumen Una vez que sabemos ubicarnos entre la maraña de versiones y tecnologías para el desarrollo Web, ya estamos en condiciones de comenzar a aprender las principales características de las últimas versiones de ASP.NET. ¡Comencemos!

capítulo

2

Fundamentos de AJAX Desde sus comienzos y hasta hace relativamente poco tiempo las interfaces de usuario de las aplicaciones Web han sido más o menos siempre iguales. Las limitaciones propias del protocolo HTTP (Hyper Text Transfer Protocol) utilizado en las páginas Web han impuesto el tradicional modelo de “petición-respuesta-procesado en el navegador” (a partir de ahora PRP) y vuelta a empezar. Los pasos que sigue una aplicación Web corriente para funcionar suelen ser los siguientes: 1. El usuario solicita una página 2. El servidor devuelve el contenido HTML correspondiente a ésta, normalmente generado a partir de alguna tecnología de servidor (como ASP.NET o PHP) 3. El navegador recibe este HTML, lo procesa y visualiza el contenido resultante. 4. El usuario interactúa con el HTML, envía un formulario al servidor o pulsa un enlace, y se repite el ciclo desde el paso 1: se solicita la página, se devuelve su contenido, se procesa y se visualiza. Este proceso es el más natural para HTTP —pensado desde luego para funcionar así— pero tiene el problema de que para obtener una página prácticamente igual a la inicial pero con pequeñas modificaciones es necesario recargar la página completa. Esta situación es especialmente común desde que ASP.NET apareció en escena hace ya unos cuantos años, con su novedoso sistema de “postback”. Gracias a este concepto una aplicación Web se programa prácticamente igual que una de escritorio, respondiendo a eventos y accediendo directamente a las propiedades de los objetos. El problema del sistema es que cada uno de los postback al servidor hace que se recargue la página completa, lo cual es percibido de manera evidente por los usuarios (es decir “se nota” el refresco de la página) y crea una sensación poco amigable. Además si el retorno de la página tarda más que unos pocos milisegundos se pierde capacidad de respuesta de la página puesto que, durante el proceso de petición-respuesta-procesado, la interfaz del navegador no responde. 9

10  Tecnologías ASP.NET 4.0 (saltando desde la versión 2.0)

Si bien el concepto de “postback” es extremadamente útil, las actuales tendencias en el desarrollo Web hacen que éstas sean cada vez más parecidas a aplicaciones de escritorio. Esto implica que los molestos y a la vez inevitables viajes al servidor no deberían ser percibidos por los usuarios. La sensación para éstos debe ser la de que la aplicación está todo el tiempo en su equipo, dejando de lado al servidor, como en una aplicación de escritorio tradicional.

1.- Interfaces de usuario avanzadas Si has usado alguna vez Facebook, Hotmail, GMail o alguna aplicación web de última hornada sabes perfectamente de qué estoy hablando. Toma por ejemplo el caso de Facebook. Cuando actualizas tu estado o introduces un comentario para un amigo, por detrás se está ejecutando el proceso PRP antes descrito, sólo que tú no lo notas ya que se realiza de manera asíncrona (para no bloquear la interfaz) y actualiza únicamente un trocito de la página, que es el que se ve afectado por tu acción. Imagínate que cada vez que dices “Me gusta” en Facebook se recargara por completo la página entera. Se haría insufrible y dudo mucho que tuviera el éxito actual. Lo mismo se aplica a los clientes Web para correo electrónico como los mencionados. Ya nadie concibe pulsar sobre una de tus carpetas de correo (o tags en el caso de GMail) en el lateral, y que de repente se cargue de nuevo la página completa. La experiencia debe ser integrada, como la de cualquier aplicación de escritorio.

Figura 1.- La interfaz de Facebook usa de manera intensiva técnicas AJAX.

Desde que el HTML Dinámico (HTML + JavaScript) y las hojas de estilo CSS hicieron su aparición, cada vez más aplicaciones hacen uso de las posibilidades de modificación “al vuelo” de contenidos que estas tecnologías brindan, consiguiendo los resultados que acabo de describir. En la actualidad todos los navegadores ofrecen soporte para DHTML por lo que si quieres escribir programas complejos de lado

Fundamentos de AJAX  11

de cliente, que interactúen con los contenidos de la página, no implica como antes tener que dejar fuera a parte de tus posibles usuarios. A la combinación de HTML dinámico con tecnologías de servidor se le denomina de manera genérica AJAX. Este simpático acrónimo hasta hace poco asociado con el apasionante mundo de la limpieza y con el fútbol, viene del concepto en inglés Asynchronous JavaScript And XML. Se basa en el uso de un objeto llamado XMLHttpRequest, presente en todos los navegadores modernos, que como es de imaginar por su nombre sirve para hacer peticiones al servidor de documentos XML a través del protocolo HTTP. Utilizado este objeto se solicitan al servidor datos en formato XML que, una vez recibidos en el navegador, es posible manipular mediante código JavaScript y mostrar el resultado dentro de los elementos de la página. Esta es la idea original de esta técnica, pero como comprobaremos en breve, de este punto inicial a lo que existe actualmente las cosas han cambiado mucho. Aunque casi todo el mundo se piensa que esto de AJAX es un invento de Google y su potente cliente Web de correo electrónico GMail (primera aplicación que en verdad lo popularizó), el objeto XMLHttpRequest apareció originariamente junto a las bibliotecas XML de Microsoft (MSXML) a finales de los años noventa del siglo pasado. El concepto original de esta tecnología fue creado también por Microsoft (se llamaba Remote Scripting), el primer navegador en soportarlo fue Internet Explorer y la primera aplicación de este tipo fue Outlook Web Access (OWA), para acceder a buzones Exchange. Como veremos enseguida, aparte de que su nombre original haya perdurado por ser simpático, la realidad es que AJAX no siempre es asíncrono ni tampoco siempre usa XML. De hecho lo más habitual es que hoy en día utilice otro formato para transferir los datos: JSON, que estudiaremos luego. Lo que de verdad constituye el corazón de de esta técnica es el objeto XMLHttpRequest. En este capítulo vamos a estudiar los fundamentos de la tecnología para que no dependas de biblioteca alguna a la hora de implementar estas características, y sobre todo -seamos realistas, casi nunca usarás esto “a pelo”- para que cuando uses una de dichas bibliotecas comprendas lo que hay debajo y puedas determinar posibles problemas. Conociendo bien los conceptos subyacentes tendrás muchas más herramientas para sacarle partido a las bibliotecas construidas sobre ellos, como por ejemplo la parte cliente de ASP.NET AJAX u otras muy conocidas como jQuery, YUI, script.aculo.us, MooTools, Dojo, etc...

2.- Un poco de teoría: el objeto XMLHttpRequest Para sacar partido a AJAX, aparte de tener conocimientos de HTML y JavaScript, el primer objeto que debemos conocer a fondo es el mencionado XMLHttpRequest. Se trata de una clase disponible en todos los navegadores modernos que permite lanzar desde JavaScript peticiones de recursos GET Y POST a través de HTTP. Dicho en lenguaje simple, lo que esta clase nos permite es simular mediante código JavaScript llamadas al servidor como si éstas hubieran sido hechas por los usuarios.

12  Tecnologías ASP.NET 4.0 (saltando desde la versión 2.0)

El efecto es el mismo que si el usuario hubiese enviado un formulario o pulsado sobre un enlace, sólo que nuestro código es el que tiene el control sobre ello y lo gestiona de manera independiente al contenido actual de la página (en la jerga se suele decir que lo gestiona “por debajo”). Aunque en el caso de Internet Explorer se sigue exponiendo su funcionalidad como un objeto ActiveX en el resto de los navegadores (Firefox, Safari, Chrome, Opera...) éste forma parte ya de sus clases nativas. Los métodos y propiedades básicos de esta clase que debemos conocer son los siguientes (los corchetes indican parámetros opcionales): •

open(método, URL, [asincrono], [usuario], [clave]): sirve para abrir una conexión al servidor. No envía ni obtiene información, sólo se conecta. El primer parámetro indica de qué manera queremos enviar la petición al servidor: por GET o por POST. El segundo es la dirección Web a la que vamos a llamar. El tercer parámetro es booleano y sirve para indicar si la conexión se realizará de forma asíncrona (por defecto) o no. Los dos últimos parámetros sirven para especificar un nombre de usuario y una contraseña de acceso para recursos protegidos por autenticación básica, si bien esto es bastante absurdo pues estarán escritos en claro en el JavaScript, por lo que raramente se utilizan.

•

send(contenido): envía una petición. Si es un envío por POST se pueden incluir los datos a enviar en su único parámetro, si no se usa un nulo.

•

abort(): cancela un envío/petición abierto previamente.

•

onreadystatechange: a esta propiedad se le asigna una referencia a un método JavaScript que será llamado automáticamente cuando se descargue del todo la URL remota (cuando se llama a ésta asíncronamente).

•

readyState: informa del estado de la petición: o 0=no iniciada o 1=cargando o 2=terminada pero sin procesar o 4=completada.

•

status: código de estado HTTP resultado de la petición: por ejemplo 200 (éxito), 404 (no encontrado), etc... Se corresponden con los códigos de estado de HTTP (los puedes consultar aquí: http://www.w3.org/Protocols/HTTP/ HTRESP.html).

•

statusText: mensaje de información correspondiente al estado anterior.

•

responseXML: documento DOM que representa el XML devuelto por la petición. Sólo se utiliza si lo que esperamos obtener es un documento XML.

Fundamentos de AJAX  13

En la actualidad no se utiliza casi nunca pues el XML se ha abandonado en AJAX a favor de JSON, que luego veremos. •

responseText: el contenido puramente textual del recurso remoto. Es la que usaremos habitualmente para obtener el contenido del recurso solicitado.

Aunque dispone de algunos métodos y propiedades más, con estas tendremos suficiente para el 99% de los casos que nos vamos a encontrar.

3.- Basta de teoría: vamos a la práctica Veamos cómo se usa la clase XMLHttpRequest en la práctica con un ejemplo sencillo. Consideremos algo simple como el ejemplo de la figura:

Figura 2.- Ejemplo de lista desplegable auto-completada con AJAX

Hay una lista desplegable que contiene una serie de categorías. Al elegir una de éstas, en la lista de al lado deberán aparecer los elementos que contiene rellanándolos dinámicamente con lo que nos indique una página en el servidor, pero sin recargar la página. Este ejemplo es muy sencillo pero nos ayuda a centrarnos sólo en la parte que nos interesa, que es la de cliente y en cómo realizar las llamadas AJAX. Lo que debemos hacer para que esto funcione es responder a los eventos de cambio de selección de la primera lista y lanzar “por debajo” una petición a una página del servidor que nos devolverá los elementos de la lista secundaria. En un ejemplo real los elementos se obtendrían, en la página del servidor, seguramente desde una base de datos.

14  Tecnologías ASP.NET 4.0 (saltando desde la versión 2.0)

Lo primero que debemos hacer para lanzar una llamada al servidor desde nuestro código JavaScript es obtener una referencia a un objeto de la clase XMLHttpRequest que será el que utilizaremos. Dado que Internet Explorer es diferente a los demás navegadores en este aspecto, debemos distinguir con quién estamos trabajando para poder instanciarlo. Podemos encapsular esta funcionalidad con el código del listado 1:

Listado 1 function getHttpRequest() { var httpReq; //Si es Mozilla, Opera, etc... if (window.XMLHttpRequest) { httpReq = new XMLHttpRequest(); } else //Internet Explorer lo expone como control Active X { httpReq = new ActiveXObject(“Microsoft.XMLHTTP”); } }

Así dispondremos de una función getHttpRequest que nos devolverá una instancia del objeto XMLHttpRequest independientemente del navegador. Una vez que tenemos una referencia al objeto usaremos sus métodos y propiedades para lanzar una petición a la página de servidor que nos interese, por ejemplo así: http = getHttpRequest() http.onreadystatechange = finCarga; http.open(“GET”, “http://www.miserv.com/misdatos.aspx”, true) http.send(null);

En la segunda línea, y antes de llamar a la página del servidor, establecemos una referencia a la función que se llamará automáticamente cuando cambie el estado de la petición que vamos a lanzar. Ello no implica que ésta tenga éxito o que sea llamada sólo cuando termine, como veremos enseguida. La tercera línea abre el conducto de petición al servidor para cargar una determinada URL de modo asíncrono (true en el tercer parámetro). En este caso usará el método GET pues no enviamos datos al servidor. Por fin debemos hacer la llamada (el open de la línea anterior no la hace sólo la prepara), usando para ello el método send. Se le pasa un nulo porque no enviamos ninguna información extra (es una petición GET). El hecho de que sea una llamada asíncrona hará que se devuelva el control inmediatamente a JavaScript al pasar por esta línea, por lo que podríamos tener más código a continuación para llevar a cabo más tareas sin que se viera interrumpida la ejecución ni la interacción con el usuario. Podríamos usar llamadas síncronas ( false en el tercer parámetro) para lanzar varias

Fundamentos de AJAX  15

llamadas seguidas con la certeza de que se ejecutarán en un determinado orden. Es decir, como vemos, AJAX en realidad no siempre debe ser asíncrono. Obviaremos de momento el código de la página del servidor que podría ser cualquiera (acceder a una base de datos para obtener los elementos, leer un archivo o la memoria, etc...). Lo único verdaderamente importante es ponernos de acuerdo en cómo la página del servidor va a devolver los resultados de la petición. Podemos complicarlo todo lo que queramos usando XML o cualquier otra notación que consideremos oportuna. Más tarde retomaremos este tema. De momento para acabar con el ejemplo vamos a suponer simplemente que el servidor nos devuelve una lista, separando con comas los elementos que se desean mostrar en el control secundario. Como hemos visto se define una función llamada ‘finCarga’ que es llamada de manera automática al ir cambiando el estado de la petición. Veamos cómo es su aspecto en el listado 2:

Listado 2 function finCarga() { if (http.readyState == 4) //4: completado { if (http.status == 200) //200: OK { res = http.responseXML; Procesarespuesta(); } else //Se produjo un error { alert(“No se pudo recuperar la información: “ + http.statusText); } } }

Lo único que hacemos aquí es detectar cuándo se ha terminado la petición (readyState será igual a 4 como hemos visto antes) y que ésta haya sido una petición exitosa (el código de estado HTTP debe ser 200). Si el código HTTP es 404 (no encontrado), 500 (error en el servidor) u otro cualquiera se advierte con un mensaje al usuario. En caso positivo lo único que hacemos es anotar la respuesta del servidor en una variable global de la página (res en el ejemplo) y procesar el resultado adecuadamente. En este caso se separan los elementos con las comas y se carga la lista secundaria. Dado que es un código JavaScript trivial y no aporta nada al tema que nos ocupa no lo he incluido aquí, pero lo puedes ver en el archivo con los ejemplos del libro. Lo único que se usa normalmente al mostrar los resultados son los conocidos métodos getElementsByTagName y getElementByID de HTML dinámico y del DOM. Estudia el ejemplo incluido en el ZIP para ver exactamente como se ha hecho.

16  Tecnologías ASP.NET 4.0 (saltando desde la versión 2.0)

Este ejemplo tan sencillo constituye en realidad todo lo que es necesario saber sobre los fundamentos de funcionamiento de AJAX.

4.- Problemas típicos de AJAX y sus soluciones Ahora que ya conocemos los rudimentos de AJAX vamos a ver cuáles son los principales problemas que nos podemos encontrar al usar estas técnicas, y que en ocasiones pueden ser complicados de detectar. Probablemente, serán los mismos que nos encontraremos si utilizamos alguno de los paquetes específicos para AJAX como ASP.NET AJAX y las otras mencionadas, por lo que debemos ser conscientes de ellos. Los más importantes son los siguientes: 1. Llamadas fuera del dominio. 2. Llamadas que producen errores o que no vuelven jamás. 3. Envío de datos al servidor. 4. Contenidos no actualizados debido a cachés.

4.1.- Llamadas fuera de dominio Una vez que uno empieza a juguetear con las posibilidades de AJAX enseguida se nos ocurren ideas geniales para sacarle partido. La más obvia, claro está, es la de utilizar las técnicas para acceder desde el cliente a ciertos Servicios Web ajenos de utilidad ubicados en Internet. Así, dado que los Servicios Web están basados en XML, es muy fácil procesar lo que devuelven con las técnicas descritas para, por ejemplo, realizar búsquedas en Amazon con su API, seguir una subasta en eBay, enviar “posts” a nuestro blog, consumir fuentes RSS, etc... Todo esto es estupendo pero tiene un gravísimo problema: los navegadores, por cuestiones de seguridad, bloquean todas las peticiones realizadas mediante XmlHttpRequest a dominios que no sean el que aloja la página desde la que se está usando. En realidad se trata de una restricción bastante lógica y que aparece en otras partes del navegador, como las cookies, el acceso a variables de JavaScript entre marcos, los objetos Flash o los applets de Java. Pero esto, claro está, supone una limitación importante para ciertos tipos de aplicaciones AJAX que podríamos desarrollar, como las de los ejemplos comentados. La pregunta ahora es entonces: ¿Cómo solventamos esta situación? En Internet Explorer basta con bajar el nivel de seguridad para que ya funcione correctamente, pero no es una buena solución (no le puedes pedir esto a tus usuarios). En otros navegadores (Firefox, Opera, Chrome y Safari) no hay forma de saltarse esta restricción. Existe una salvedad en Firefox que consiste en firmar digitalmente el JavaScript que usas, pero tampoco vale de mucho pues sólo funcionaría en este navegador. La única forma de solucionarlo de manera independiente al navegador es, aunque sea de Perogrullo, hacer que no dependa de éste, es decir, llevarnos el problema al

Fundamentos de AJAX  17

servidor. Para ello lo que debemos hacer es construir un servicio proxy que esté en nuestro servidor (al que sí podremos llamar con AJAX) y que sea éste el que se encargue de realizar la llamada a otros dominios devolviendo el resultado a nuestro JavaScript (directamente o pre-procesándolo de algún modo). En .NET esto implica generalmente crear un manejador de peticiones con extensión .ashx o un servicio Web propio que se encargue de realizar por nosotros las peticiones que nos interesen. ¡Mucho ojo con esto!. Normalmente este tipo de servicios -al igual que los que se encargan de leer archivos de disco de manera genérica y otros similares- son un verdadero peligro de seguridad si no los programamos bien. Si optas por esta solución lo mejor es que tomes varias precauciones de cara a la seguridad: tener muy acotados los servicios o URLs a los que se puede llamar desde el proxy. Lo mejor es identificarlos a cada uno con un número o código decidiendo a cuál se llama (con una cláusula switch en C# o Select Case en VB.NET), nunca poniendo la URL directamente en la llamada desde JavaScript. Otra medida adicional es tratar de identificar al Script llamante de alguna manera: mediante una cabecera que te debe enviar, comprobando el dominio del “referer” y cosas similares. Está claro que un cracker experimentado se puede saltar esto pero le dará bastante trabajo y elimina de un plumazo a los aficionados que quieran hacer uso ilícito de tu servicio. Si puedes limita el número máximo de llamadas seguidas que se puede hacer desde una determinada IP o, mejor, en una determinada sesión de servidor. Toda precaución es poca.

4.2.- Gestión de errores y llamadas que no vuelven No podemos asumir que las llamadas que hagamos al servidor van a funcionar siempre. Puede haber un error en el código del servidor, es posible que haya cambiado la URL y que no aparezca la página que llamamos, o que haya errores de permisos, etc... Lo que pase en el servidor está fuera de nuestro control. Ante eso hay que estar preparado. La forma de controlar estas situaciones es, como en cualquier componente de comunicaciones por HTTP, a través del código de estado que devuelva el servidor. Todo esto ya se había apuntado antes y se había tenido en cuenta en el código del listado 2. Podríamos afinar más en el mensaje de error y devolver uno diferente según el código de estado. Hay, sin embargo, una situación menos frecuente pero más peligrosa que se puede producir: que la llamada asíncrona al servidor no vuelva o no lo haga en un tiempo razonable, es decir que se produzca lo que se denomina un timeout. ¿Qué hacemos en ese caso? No podemos contar con la notificación de final de carga puesto que, al no regresar la llamada no saltará, así que el listado 2 no nos sirve. Lo que se hace en estos casos es establecer un temporizador con el tiempo máximo que deseemos esperar, para que al cabo de ese intervalo la petición sea anulada directamente, sin esperar más que llegue la respuesta. Podemos verlo en el listado 3:

18  Tecnologías ASP.NET 4.0 (saltando desde la versión 2.0)

Listado 3 http = getHttpRequest() http.onreadystatechange = finCarga; http.open(“GET”, “http://www.miserv.com/misdatos.aspx”, true) var tmrAnular = setTimeout(“AnularPeticion()”, 20000); //20 segundos http.send(null); function AnularPeticion() { http.abort(); } function finCarga() { if (http.readyState == 4) //4: completado { clearTimeOut(tmrAnular); if (http.status == 200) //200: OK { res = http.responseXML; Procesarespuesta(); } else //Se produjo un error { alert(“No se pudo recuperar la información: “ + http. statusText);

}

}

}

Se ha modificado el código de llamada anterior para añadir la creación de un temporizador que se encarga de anular la petición al pasar un tiempo determinado (en este caso de 20 segundos pero puede ajustarse a cualquier otro valor). Nótese también como en el evento de fin de carga eliminamos el temporizador (que ya no nos hace falta) cuando la petición termina de procesarse, en caso de que regrese.

4.3.- Envío de datos al servidor Normalmente cuando pensamos en AJAX, es decir, en llamadas asíncronas a servicios, lo hacemos desde el punto de vista de obtener información: llamo a una página que me devuelve unos valores y los muestro en la interfaz de usuario. Aunque este

Fundamentos de AJAX  19

es el uso más común de AJAX lo cierto es que también es muy útil usarlo en el sentido inverso, para enviar datos al servidor. Las utilidades y necesidades que cubre son múltiples y de hecho hay muchos sistemas que le sacan partido. La forma más sencilla y directa de enviar datos simples al servidor es incluirlos en la URL a la que llamamos como parámetros GET: urldestino.aspx?Parametro1=1234&Parametro2=5 Aunque esto puede servirnos para cosas muy sencillas no es lo que necesitaremos en la mayor parte de los casos. Lo habitual es que la información haya que enviarla con el método POST. La principal diferencia entre GET y POST estriba en que el método GET hace una sola llamada al servidor, solicitando una página y enviando algunos parámetros de datos en la propia petición. POST por el contrario realiza dos conexiones al servidor. En la primera solicita una URL y en la segunda envía los datos. Por GET lo máximo que se puede enviar son 2 kB de información, mientras que por POST no existe esta limitación. Para enviar datos al servidor mediante POST nuestro código AJAX sería similar al siguiente: http = getHttpRequest() http.onreadystatechange = finCarga; http.open(“POST”, “http://www.miserv.com/misdatos.aspx”, true) http.send(‘Parametro1=1234&Parametro2=5’);

Con esto no hemos ganado demasiado. Ahora se envían los datos por POST (sólo cambia el primer parámetro de open) pero los hemos tenido que introducir en el método send en lugar de en la propia URL. Esto sólo simularía el envío de parámetros mediante POST desde un formulario HTML, aunque por otro lado en ocasiones puede ser lo que queramos. Lo habitual sin embargo es que, en lugar de enviar parámetros, queramos enviar información pura y dura del tamaño que sea preciso, que es para lo que suele usarse POST. Esto se puede conseguir modificando ligeramente el código anterior para incluir una cabecera que indique al servidor que lo que le llega son, precisamente, datos (línea 3 del siguiente fragmento): http = getHttpRequest() http.onreadystatechange = finCarga; http.setRequestHeader(‘content-type’, ‘application/x-www-formurlencoded’); http.open(“POST”, “http://www.miserv.com/misdatos.aspx”, true) http.send(‘Aquí ahora mando la información que quiera al servidor’);

Con esto nuestro problema queda resuelto.

20  Tecnologías ASP.NET 4.0 (saltando desde la versión 2.0)

4.4.- Contenidos no actualizados debido a cachés Cuando se envía una petición HTTP es posible que, si la caché del lado servidor no está correctamente configurada, el navegador realice su propia caché local. Por lo tanto la próxima vez que realicemos una llamada a la misma URL, el navegador en lugar de hacerla sacará el mismo resultado anterior de esa caché local, y por lo tanto la llamada no llega al servidor jamás. O puede que exista un proxy-caché por el medio (Teléfonica por ejemplo las ha utilizado tradicionalmente en sus servicios de acceso a Internet) que almacena peticiones anteriores y por lo tanto obtenemos únicamente una copia, sin realizar la llamada al servidor real. Eso muchas veces es lo que querremos para ahorrar procesamiento y será maravilloso, pero lo habitual es que sea una maldición ya que evitará que obtengamos datos actualizados. A la hora de enviar datos por POST no hay problema porque no actúa nunca la caché. El problema, si se da, está en las peticiones GET, por otro lado las más habituales. Si el servidor tiene bien configurada la caché (es decir, indica cuándo caducan los contenidos o marcamos en IIS que éstos caduquen inmediatamente) no deberíamos experimentar fallos, salvando lo comentado respecto a los proxy-caché de algunos proveedores. Si queremos asegurarnos de que la petición va a llegar a su destino podemos hacer fundamentalmente dos cosas: 1. Agregar una cabecera que indique que se debe obtener el contenido siempre que éste sea posterior a una fecha, por ejemplo así: http.setRequestHeader(‘If-Modified-Since’, ‘Wed, 1 Jan 1972 00:00:00 GMT’);

Indicaremos siempre una fecha anterior a la actual como la del ejemplo y así siempre se pedirá la última versión al servidor. 2. Añadir un número aleatorio (o cadena) a la URL de cada petición. En este caso suele funcionar muy bien el agregarle una marca temporal, es decir, añadir a continuación la fecha y hora actuales, de modo que cada una de las peticiones que se hagan va a ser diferente y por lo tanto los caché que existan por el medio tienen que repetir siempre la petición. Por ejemplo: http.open(“POST”, “http://www.miserv.com/misdatos.aspx?pasacache=” + new Date().getTime(), true);

Se le añade un parámetro que lleva como valor la fecha y hora en formato numérico (es decir, un número muy largo y que varía varias veces cada milisegundo), por lo que es muy difícil que se den dos peticiones idénticas incluso a través de un proxy-caché. Además ese parámetro extra de nombre inventado que nosotros le añadimos no debería afectar en absoluto a la llamada puesto que no está siendo

Fundamentos de AJAX  21

tenido en cuenta por la aplicación. Esta segunda técnica es la más fiable, aunque un poco más tediosa de implementar.

5.- Devolución de información: JSON En el ejemplo anterior hemos hecho que la página del servidor devuelva ciertos valores que en este caso tenían formato XML, pero que podrían tener perfectamente otra configuración distinta, como por ejemplo simples valores separados por comas. Si bien esto puede ser suficiente en los casos más sencillos, en otras ocasiones necesitaremos manejar estructuras de datos más complejas. Dado que HTTP es un protocolo basado en texto, el recurso al que llamemos en el servidor debe devolver siempre texto (o sea, no puede ser una imagen o un archivo binario, que para transferirse se codifican de una forma especial -Base64- para convertirlos en texto). Este texto devuelto puede tener cualquier formato: texto plano, XML, código JavaScript o incluso HTML. En este último caso podemos obtener desde el servidor un contenido HTML completo que se debe escribir en una zona de la página (por ejemplo dentro de un