a

tur
ec
Aplicación de técnicas de AJAX a
ASP .NET
l
de
Ángel Rayo
lo
mp
Eje
Sipnosis

El desarrollo Web con ASP.NET supuso un gran cambio para los programadores permitiéndoles utilizar un gran número
de lenguajes de programación para crear sus aplicaciones.

a
La inclusión de código y controles de servidor permitió ampliar la funcionalidad de las aplicaciones sin requerir un gran
conocimiento sobre el lenguaje HTML.

tur
Para mejorar el rendimiento de las aplicaciones ASP.NET y de otro tipo se ofrece la tecnología AJAX, la cuál hace uso de
JavaScript y XML con peticiones asíncronas.

Gracias a la Ajax Library, Ajax Extensions y el conjunto de controles del Ajax Control Toolkit conseguiremos crear apli-
caciones con un mejor rendimiento y con menor cantidad de envíos y recepciones a y desde el servidor Web.

ec
Ángel Rayo es formador de Alhambra-Eidos desde 2004. Ha sido el autor y coautor de varios
libros entre los que destaca el titulado "Administración y Desarrollo con WSS 3.0 y MOSS

l
2007" centrado en Microsoft SharePoint así como otros relacionados con la plataforma .NET.
Además, ha escrito artículos para dotnetmanía sobre el ciclo de vida de desarrollo de software
con Visual Studio Team System, MSF y CMMI.
Ha participado en ponencias sobre SharePoint 2007, Visual Studio Team System y Symbian.
de
Posee las certificaciones MCPD Enterprise en .NET 3.5, MCITP en SQL Server 2008 y MCTS
en SharePoint 2007 principalmente. Está certificado como formador oficial de Microsoft, EXIN
y Nokia+Symbian, siendo en esta última certificación uno de los dos únicos profesionales auto-
rizados en España. Dentro de la gestión de procesos posee las certificaciones en ITIL (v2 y v3),
ISO 20000 y MOF v4.0.
lo
mp
Eje
 a
tur
Luarna
Aplicación de técnicas de Ajax a ASP .NET

© Angel Rayo y Alhambra Eidos

© De esta edición: 2009, Luarna Ediciones, S.L.

ec
www.luarna.com

Madrid, septiembre de 2009

l
de
ISBN: 978-84-92684-50-2

Versión 1.0 (10-09-2009)

lo
mp
Eje

«Cualquier forma de reproducción, distribución, comunicación pública o transformación de esta obra solo puede ser realizada con la autorización de
sus titulares, salvo excepción prevista por la ley. Diríjase a CEDRO (Centro Español de Derechos Reprográficos, www.cedro.org) si necesita fotoco-
piar, escanear o hacer copias digitales de algún fragmento de esta obra».
 a
tur
l ec
APLICACIÓN DE TÉCNICAS DE AJAX A ASP .NET
de
Angel Rayo
lo
mp
Eje
Indice
INTRODUCCIÓN A ASP.NET AJAX...................................................................................................................................................... 8
AJAX ............................................................................................................................................................................................. 9

a
ASP.NET AJAX ............................................................................................................................................................................. 10
Microsoft AJAX Library ............................................................................................................................................................ 12
AJAX Extensions ...................................................................................................................................................................... 12
ScriptManager........................................................................................................................................................................................ 13

tur
UpdatePanel .......................................................................................................................................................................................... 16
Timer ..................................................................................................................................................................................................... 17
UpdateProgress...................................................................................................................................................................................... 17
ScriptManagerProxy ............................................................................................................................................................................... 17
AJAX Control Toolkit ............................................................................................................................................................... 18
AJAX Futures........................................................................................................................................................................... 18
RESUMEN ...................................................................................................................................................................................... 19
JAVASCRIPT .................................................................................................................................................................................... 21

ec
SINTAXIS ....................................................................................................................................................................................... 22
Palabras reservadas................................................................................................................................................................ 23
Variables ................................................................................................................................................................................ 23
Ámbito................................................................................................................................................................................................... 24
Tipos de variables ................................................................................................................................................................... 24
Tipos primitivos...................................................................................................................................................................................... 24
Conversión entre tipos de variables ........................................................................................................................................................ 26

l
Tipos de referencia................................................................................................................................................................................. 26
Objetos nativos....................................................................................................................................................................... 27
Date....................................................................................................................................................................................................... 27
Array...................................................................................................................................................................................................... 28
de
RegExp ................................................................................................................................................................................................... 28
Function................................................................................................................................................................................................. 29
Declaración y uso de funciones ............................................................................................................................................... 29
Funciones y propiedades básicas de JavaScript........................................................................................................................................ 29
Trabajo con objetos ................................................................................................................................................................ 31
Métodos de un objeto ............................................................................................................................................................................ 32
Uso de los métodos apply() y call() .......................................................................................................................................................... 32
JSON....................................................................................................................................................................................... 32
CLASES ......................................................................................................................................................................................... 34
MANEJO DE EXCEPCIONES .................................................................................................................................................................. 35
lo

DOM Y BOM ................................................................................................................................................................................... 37

DOM........................................................................................................................................................................................... 37
Elementos principales de DOM................................................................................................................................................ 38
Acceso relativo a los nodos ..................................................................................................................................................................... 41
Tipos de nodos ....................................................................................................................................................................................... 45
mp

Atributos................................................................................................................................................................................................ 45
Acceso directo a los nodos...................................................................................................................................................................... 46
Función getElementsByTagName() ..................................................................................................................................................... 47
Función getElementsByName() .......................................................................................................................................................... 48
Función getElementById() .................................................................................................................................................................. 48
Crear, modificar y eliminar nodos ........................................................................................................................................................... 48
Atributos HTML y propiedades CSS en DOM............................................................................................................................................ 52
Tablas HTML en DOM ............................................................................................................................................................................. 55
BOM ........................................................................................................................................................................................... 56
window .................................................................................................................................................................................. 57
Eje

Manipulación de tamaño y posición ........................................................................................................................................ 57

document ............................................................................................................................................................................... 58
location .................................................................................................................................................................................. 59
navigator................................................................................................................................................................................ 60
screen..................................................................................................................................................................................... 61
AJAX BÁSICO: XMLHTTPREQUEST................................................................................................................................................... 63
XMLHTTPREQUEST ......................................................................................................................................................................... 65
MICROSOFT AJAX LIBRARY ............................................................................................................................................................. 73
COMPONENTES DE MICROSOFT AJAX LIBRARY ....................................................................................................................................... 74
 FUNCIONES GLOBALES ...................................................................................................................................................................... 75
EXTENSIONES DE LOS TIPOS BÁSICOS JAVASCRIPT ..................................................................................................................................... 79
Extensiones de tipo matriz ...................................................................................................................................................... 79
Extensiones de tipo booleano .................................................................................................................................................. 82
Extensiones de tipo fecha........................................................................................................................................................ 82

a
Extensiones de tipo error ........................................................................................................................................................ 83
Campos.................................................................................................................................................................................................. 83
Funciones............................................................................................................................................................................................... 83
Extensiones de tipo número .................................................................................................................................................... 84

tur
Extensiones de tipo objeto ...................................................................................................................................................... 84
Extensiones de tipo cadena ..................................................................................................................................................... 84
SISTEMA DE TIPOS JAVASCRIPT ............................................................................................................................................................ 85
BCL DE SCRIPTING ........................................................................................................................................................................... 86
Sys.......................................................................................................................................................................................... 88
Sys.Application ....................................................................................................................................................................................... 89
Sys.Browser ........................................................................................................................................................................................... 90
Sys.Component ...................................................................................................................................................................................... 91

ec
Sys.Debug .............................................................................................................................................................................................. 92
Sys.Net................................................................................................................................................................................................... 94
Sys.Serialization (System.Web.Script.Serialization en Code-Behind) ....................................................................................................... 101
JavaScriptSerializer .......................................................................................................................................................................... 101
Sys.Services (System.Web.Script.Services en Code-Behind) ................................................................................................................... 102
Autenticación de usuarios ................................................................................................................................................................ 102
Seguridad basada en roles (RoleService) ........................................................................................................................................... 108
Gestión de perfiles de usuarios (ProfileService)................................................................................................................................. 109
Sys.UI ................................................................................................................................................................................................... 111

l
Tratamiento DOM con DomElement y DomEvent ............................................................................................................................. 112
Gestión de comportamientos de cliente con la clase Behavior .......................................................................................................... 117
Creación de controles de cliente con la clase Control ........................................................................................................................ 120
de
Sys.WebForms ..................................................................................................................................................................................... 123
PageRequestManager ...................................................................................................................................................................... 124
CASO PRÁCTICO: USO DE SERVICIOS WEB ............................................................................................................................................ 126
EXTENSIONES AJAX ...................................................................................................................................................................... 127
SCRIPTMANAGER .......................................................................................................................................................................... 128
PERSONALIZACIÓN DEL CONTROL SCRIPTMANAGER ................................................................................................................................ 132
MANEJO DE OPERACIONES ASÍNCRONAS Y ERRORES ................................................................................................................................ 136
MANEJO DE SCRIPTS ....................................................................................................................................................................... 138
MANEJO DE SERVICIOS .................................................................................................................................................................... 140
lo

GLOBALIZACIÓN Y LOCALIZACIÓN ....................................................................................................................................................... 140

OTROS EVENTOS ........................................................................................................................................................................... 141
SCRIPTMANAGERPROXY ................................................................................................................................................................. 141
TIMER ........................................................................................................................................................................................ 141
UPDATEPANEL .............................................................................................................................................................................. 142
CONSTRUCCIÓN DE UNA INSTANCIA UPDATEPANEL ................................................................................................................................ 143
mp

GESTIÓN DE TRIGGERS .................................................................................................................................................................... 145

AsyncPostBackTrigger........................................................................................................................................................... 146
PostBackTrigger ................................................................................................................................................................... 147
UPDATEPROGRESS ......................................................................................................................................................................... 148
AJAX CONTROL TOOLKIT .............................................................................................................................................................. 149
AJAX CONTROL TOOLKIT ................................................................................................................................................................ 152
ACCORDION ................................................................................................................................................................................. 153
ALWAYSVISIBLECONTROLEXTENDER ................................................................................................................................................... 154
ANIMATIONEXTENDER .................................................................................................................................................................... 154
Eje

AUTOCOMPLETEEXTENDER .............................................................................................................................................................. 155

CALENDAREXTENDER...................................................................................................................................................................... 156
CASCADINGDROPDOWN ................................................................................................................................................................. 156
COLLAPSIBLEPANELEXTENDER .......................................................................................................................................................... 157
CONFIRMBUTTONEXTENDER ............................................................................................................................................................ 157
FILTEREDTEXTBOXEXTENDER............................................................................................................................................................ 158
MODALPOPUPEXTENDER ................................................................................................................................................................ 158
RATING ....................................................................................................................................................................................... 159
CASO PRÁCTICO: AJAX CONTROL TOOLKIT .......................................................................................................................................... 159
RESOLUCIÓN CASOS PRÁCTICOS................................................................................................................................................... 161
CASO PRÁCTICO: USO DE SERVICIOS WEB ............................................................................................................................................ 161
CASO PRÁCTICO: AJAX CONTROL TOOLKIT .......................................................................................................................................... 166

a
tur
l ec
de
lo
mp
Eje
 a
tur
l ec
de
Introducción a ASP.NET AJAX

Microsoft ASP.NET AJAX se trata de una nueva tecnología que permite añadir la funcionalidad
AJAX a las aplicaciones Web. Ofrece una biblioteca de código JavaScript para su ejecución en el lado
lo

del cliente que simplifica dicho proceso de adición de funcionalidad AJAX

Microsoft ASP.NET AJAX ofrece funcionalidad compleja como la realización de llamadas asíncronas
utilizando el protocolo XMLHTTP. La biblioteca de clases ASP.NET AJAX se incluyó en la versión
2.0 de ASP.NET como complemento y viene integrada directamente dentro de las clases disponibles
mp

en ASP.NET 3.5.

Para poder trabajar con ASP.NET 3.5 utilizando la funcionalidad comentada AJAX, será necesario
conocer exactamente qué significa este término.

AJAX o Asynchronous JavaScript And XML se trata de un término genérico que aglutinan un
conjunto de tecnologías y procesos que podemos utilizar para mejorar nuestras aplicaciones Web.
Como ya he comentado el conjunto de herramientas, técnicas y tecnologías conocidas como ASP.NET
AJAX son una implementación de AJAX que puede ser utilizada por los desarrolladores que hayan
trabajado previamente con ASP.NET 2.0 o bien que deseen comenzar a trabajar con la versión 3.5 de
Eje

ASP.NET.

ASP.NET AJAX incluye junto con las bibliotecas de clases de cliente, controles de servidor mejorados
que los desarrolladores pueden utilizar y en los cuales se incluye código script para realizar algunas
operaciones asociadas.
 AJAX

a
AJAX permite el procesado de funcionalidad JavaScript y de documentos o datos XML de manera
asíncrona utilizando una serie de componentes, los cuales vamos a ver a continuación. Es importante
tener en cuenta que crear una aplicación Web que utilice el conjunto de funcionalidades de AJAX

tur
puede ser más complicada de mantener y depurar que una aplicación Web tradicional cliente-servidor,
debido a que involucra a más componentes.

Los componentes de AJAX son los siguientes:

Componente Descripción

ec
HTMLi HyperText Markup Language, se trata del lenguaje estándar de creación de aplica-
ciones Web. Es recomendable comenzar a utilizar la nueva versión de este estándar
XHTMLii (HTML extensible) ya que ofrece mayor versatilidad.
i http://www.w3.org/TR/REC-html40/
ii http://www.w3.org/TR/xhtml1/

CSSiii Cascading Style Sheets u hojas de estilo en cascada suponen el formato estándar de
representación de estilos para páginas HTML y XHTML. Con AJAX podemos modi-

l
ficar hojas de estilos directamente, en lugar de recurrir a modificar los propios ele-
mentos HTML que componen la página.
iii http://www.w3.org/Style/CSS/
de
DOMiv Document Object Model se trata del modelo de representación de datos HTML o
XHTML en un formato jerárquico pudiendo ser consultado. Con DOM podemos
modificar los elementos individuales de las páginas Web, equivalentes a las etiquetas
disponibles en HTML o XHTML
iv http://www.w3.org/DOM/

JavaScript v JavaScript se trata del lenguaje de creación de código que se ejecuta en el cliente,
técnica conocida como scripting. Mediante JavaScript podemos realizar operaciones
de manipulación de la información de las páginas HTML, la estructura DOM y las
lo

hojas de estilo CSS. Con JavaScript también podemos crear las conocidas páginas
DHTML. Con ASP.NET AJAX también podremos definir código script en otros
lenguajes como ECMAScriptvi o vbscript.
v http://docs.sun.com/source/816-6408-10/contents.htm
vi http://www.ecma-international.org/publications/standards/Ecma-262.htm
mp

XMLvii Extensible Markup Language, se trata del lenguaje que se ha convertido en el están-
dar para representar información en un formato independiente de la plataforma donde
está dicha información. AJAX utiliza el formato XML para empaquetar los datos en
el cliente.
vii http://www.w3.org/XML/

JSONviii JavaScript Object Notation se trata de un formato de intercambio de datos muy útil
para la representación de los datos JavaScript. JavaScript utilizará el formato JSON
para seriar y deseriar objetos.
viii http://www.json.org/
Eje

XMLHTTP XMLHTTP se trata de un protocolo de intercambio de información en formato XML.

Con el objeto XmlHttpRequestix podemos obtener información definida mediante
una estructura XML.
ix http://www.w3.org/TR/XMLHttpRequest/

Tabla 1 – Componentes de AJAX

 ASP.NET AJAX

a
ASP.NET AJAX se trata de la implementación de las técnicas y estándares utilizados en AJAX para la
plataforma .NET y su integración con ASP.NET para el desarrollo Web. En este libro trabajaremos
con la funcionalidad ASP.NET AJAX pero existen otras implementaciones AJAX que es de importan-

tur
cia comentar, ya que el lector puede estar interesado en integrar sus aplicaciones .NET con otro tipo de
aplicaciones que hagan uso también de AJAX.

Algunas de las implementaciones de AJAX más extendidas son las siguientes:

· FJAX: Integración de AJAX con Adobe® Flash (http://fjax.enginpost.com/)

· AjaxCFC: Integración de AJAX con Adobe® ColdFusion (http://ajaxcfc.riaforge.org/)

ec
· AjaxXSLT: Integración de AJAX con XSLT (http://code.google.com/p/ajaxslt/)

· OpenAjax: Este proyecto está siendo llevado a cabo por una serie de empresas que persiguen
crear un framework AJAX estándar. AJAX Toolkit Framework (ATF) ofrecido por Eclipse
para trabajar con diferentes motores. (http://www.openajax.org/index.php)

· Sajax: colección de herramientas para AJAX (http://www.modernmethod.com/sajax/)

l
Xajax: biblioteca de código PHP integrado con AJAX (http://xajaxproject.org/)
de
· AjaxCore: Proyecto AJAX para PHP (http://www.ajaxcore.org/)

· DojoToolkit: Toolkit para desarrollo de aplicaciones con funcionalidad AJAX

(http://dojotoolkit.org/)

· ASP.NET AJAX: AJAX para ASP.NET. (http://www.asp.net/ajax/)

Comencemos ahora con la introducción a ASP.NET AJAX.

Uno de los problemas que puede tener un desarrollador de aplicaciones Web con ASP.NET 2.0 o ver-
lo

siones anteriores y quieran utilizar la funcionalidad de AJAX es el aprendizaje del lenguaje JavaS-
cript. Microsoft pensando en esto ha creado tres componentes principales que facilitarán el trabajo con
la funcionalidad AJAX sin tener unos conocimientos avanzados sobre el lenguaje JavaScript utilizan-
do una sintaxis similar a la que podemos usar en nuestros desarrollos con C# en ASP.NET 2.0.

Mediante ASP.NET AJAX conseguiremos crear aplicaciones más dinámicas, con mejor capacidad de
mp

respuesta, más sencillas de utilizar, más interesantes y compatible con todos y cada uno de los navega-
dores Web existentes, al poder definir ya sea directa o indirectamente el código script que se presen-
tará en la página Web.

Los componentes de ASP.NET AJAX, que ya en la versión 3.5 de ASP.NET viene incluida dentro del
paquete de instalación, no como en la versión 2.0 que era necesario instalar este conjunto de funciona-
lidades como elemento aparte, son los siguientes:

· Funcionalidad del lado del cliente: ofrecidas como un conjunto de ficheros JavaScript cono-
Eje

cidos en la versión 2.0 de ASP.NET como AJAX Library que permiten crear código de ma-
nera similar a como lo podemos hacer en C# utilizando mediante JavaScript una estructura
orientada a objetos.

· Funcionalidad del lado del servidor: conjunto de controles de servidor, conocidos en la ver-
sión 2.0 de ASP.NET como AJAX Extensions. Estos controles generarán al presentar la in-
formación en el documento HTML que se enviará a los navegadores el código JavaScript ne-
cesario para trabajar con sus funcionalidades.
 · Framework extensible: El conjunto de elementos incluidos en el AJAX Control Toolkit

a
permiten contar con un framework de objetos, clases, métodos y eventos ampliables y perso-
nalizables por los desarrolladores.

tur
l ec
Figura 1 – Componentes de cliente y servidor en ASP.NET AJAX
de
ASP.NET AJAX ofrece la funcionalidad necesaria para utilizar en los siguientes escenarios:

· Usabilidad: Los componentes de cliente y de servidor permiten mejorar la usabilidad de las

aplicaciones Web con ASP.NET AJAX. Al incluir código JavaScript compatible con la ma-
yoría de los navegadores Web conseguiremos que nuestros sitios Web no dependan del tipo de
navegador en el que se esté mostrando la aplicación para utilizar unos mecanismos de presen-
tación y uso específicos.

· Mejoras de la Interfaz de Usuario: Al contar con tecnologías que permiten actualizar de ma-
lo

nera rápida los componentes de la interfaz de usuario conseguiremos contar con aplicaciones
más atractivas para los usuarios.

· Reducción del ancho de banda: Por el mismo motivo que los escenarios anteriores utilizar
código de cliente nos permitirá que se envíe y reciba menor cantidad de bytes entre cliente y
mp

servidor por lo que las aplicaciones no requerirán que el cliente cuente con un gran caudal de
ancho de banda para poder ejecutar nuestras aplicaciones.

· Actualización de sitios Web: Para actualizar sitios Web desde versiones ASP.NET anteriores
a la 3.5 no es necesario aplicar un cambio drástico sino revisar los componentes que podemos
adaptar para que utilicen toda la potencia de ejecución y depuración de código de cliente.

· Sitios conectados con datos externos: Combinando AJAX Library y AJAX Extensions, ya
incluidos en el propio motor de ASP.NET 3.5 conseguiremos conectar nuestras aplicaciones
con fuentes externas, también desde el propio código de cliente.
Eje

· Sitios con gestión de miembros y perfiles: Los mecanismos de membresía, perfiles de usua-
rio, autenticación y autorización disponibles ya en la versión 2.0 de ASP.NET podrán ser uti-
lizados ahora desde el propio código script de cliente.

Veamos para profundizar en ASP.NET AJAX cada uno de los componentes con su funcionalidad.
 Microsoft AJAX Library

a
Microsoft AJAX Library consiste en una biblioteca de ficheros JavaScript válidos para cualquier na-
vegador. Debido a que partimos de que los desarrolladores Web que vayan a utilizar ASP.NET AJAX
vienen de desarrollos creados utilizando alguno de los lenguajes de programación .NET, la funcionali-

tur
dad de la Microsoft AJAX Library viene también expuesta mediante una estructura de espacios de
nombres y clases utilizables dentro del propio código script.

Los espacios de nombres de la Microsoft AJAX Library son los siguientes:

· Global: Miembros y tipos de datos que extienden los objetos base ECMAScript (JavaScript)
proporcionando miembros más fáciles de utilizar por los programadores .NET. Los tipos de
datos que incluye, extensiones, son Array, Boolean, Error, Number, Object y String.

ec
· Sys: Raíz de la Microsoft AJAX Library, incluye las clases básicas

· Sys.Net: Contiene los tipos relacionados con la comunicación entre aplicaciones cliente
ASP.NET AJAX y los servicios Web en el lado del servidor.

· Sys.Serialization: Contiene los tipos relacionados con la seriación de datos.

·
l
Sys.Services: Acceso de script a los servicios de autenticación, perfiles y otros servicios de
aplicación
de
Sys.UI: Interacción con la interfaz de usuario: controles, eventos y propiedades de las páginas

· Sys.WebForms: Tipos relacionados con la representación parcial de las páginas

Con Microsoft AJAX Library tendremos una estructura de gestión de las aplicaciones Web del lado
del cliente contando con mecanismos de manejo de errores, conexiones con servicios, técnicas de
creación de aplicaciones multi-idioma, etc.

AJAX Extensions
lo

Las extensiones AJAX para ASP.NET forman parte de ASP.NET 3.5 e incluyen un conjunto de con-
troles de servidor que permiten añadir toda la funcionalidad AJAX a nuestras aplicaciones.

En este capítulo de introducción nos centraremos en las características generales de cada extensión,
mp

viendo en los sucesivos capítulos ejemplos de su uso y recomendaciones.

Los controles de servidor incluidos en las extensiones AJAX, en nuestro caso en ASP.NET 3.5, son
los siguientes:

Control Descripción

ScriptManager El componente ScriptManager deberá ser incluido en todas las páginas Web
en las que queramos contar con la funcionalidad ASP.NET AJAX. Este com-
Eje

ponente se encarga de exponer los ficheros JavaScript de la biblioteca AJAX

al cliente. Sin este componente, los ficheros de script que hagan uso de la
biblioteca AJAX no funcionarán.

UpdatePanel El control UpdatePanel se utiliza para definir secciones de la página que

soportarán actualizaciones parciales. Dentro de los controles UpdatePanel
definiremos secciones ContentTemplate donde se alojarán aquellos contro-
 Control Descripción

a
les que queremos que se presenten en las páginas Web.

Timer El control Timer se utiliza para realizar envíos de solicitudes de datos al

tur
servidor periódicamente. Generalmente este control se utiliza dentro de la
sección ContentTemplate de los UpdatePanel

UpdateProgress El control UpdateProgress muestran información al usuario mientras se

realizan actualizaciones parciales de la página Web actual con el fin de evitar
que el usuario interactúe con elementos que sufrirán variaciones posterior-
mente. El control contendrá un elemento llamado ProgressTemplate donde
se establecerá la información que se le mostrará al usuario.

ec
ScriptManagerProxy Habilita que los componentes anidados de contenido y los controles de usua-
rio puedan agregar código script y referencias de servicio a las páginas cuan-
do ya se ha definido un control ScriptManager en el elemento principal.

Tabla 2 – Controles de las extensiones AJAX

l
Dichos controles, los cuales veremos a continuación con mayor detalle se encuentran disponibles en el
cuadro de herramientas de Visual Studio 2005 al haber instalado los AJAX Extensions, no siendo ne-
cesario si tenemos instalado .NET 3.5, incluido en Visual Studio 2008.
de
Figura 2 – Extensiones AJAX
lo

Los controles pertenecientes a las extensiones AJAX de ASP.NET se encuentran ubicados en el espa-
cio de nombres System.Web.UI, complementando al resto de controles ya existentes en la versión 2.0
de ASP.NET. Veamos ahora cómo funciona y para qué sirve cada uno de estos controles.
mp

ScriptManager

La clase ScriptManager es la responsable de administrar las bibliotecas de código script y script

AJAX además de mantener la representación parcial de las páginas y la generación de las clases proxy
de los servicios Web y de aplicación incluidos en nuestra aplicación.

Esta clase se representará en la página de la siguiente manera:

<body>
Eje

<form id="form1" runat="server">

<div>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
Código 1 – ScriptManager en una página

A la hora de definir las propiedades del ScriptManager podemos optar por hacerlo en la propia vista
de código HTML, mediante la vista de diseño yendo a las propiedades o bien utilizando el code-
 behind para que realice las modificaciones correspondientes y las envíe al cliente cuando se provoque

a
el evento correspondiente.

Sólo puede haber un control ScriptManager por cada página ASPX que tengamos en nuestra aplica-
ción, ya que si pusiésemos más de uno nos encontraríamos con el siguiente error:

tur
l ec
de
Figura 3 – Error de servidor al agregar dos instancias de ScriptManager

La clase ScriptManager expone un conjunto de métodos y propiedades, los cuales vamos a ver ahora
junto con su funcionalidad y algún ejemplo de ellos.

Comencemos con las propiedades de la clase:

lo

Propiedad Descripción
AllowCustomErrorsRedirect Define si se utiliza la sección customErrors del fichero
Web.config para mostrar un mensaje personalziado cuando se
mp

produzca un error.
AsyncPostBackErrorMessage Mensaje de error que se le muestra al cliente cuando se produce
una excepción de servidor no controlada
AsyncPostBackSourceElementID Identificador del control que devolvió los resultados de la llama-
da asíncrona
AsyncPostBackTimeout Tiempo en segundos que dura una operación de petición de da-
tos de manera asíncrona. Si vence el tiempo y no se ha recibido
respuesta se cancela la petición
Eje

AuthenticationService Servicio de autenticación disponible para utilizar en código

script con el fin de autenticar a los usuarios
ClientNavigateHandler Método que controla el evento Sys.Application.navigate en el
lado del cliente
CompositeScript Composición de varias referencias de script en una sola para
 Propiedad Descripción

a
minimizar el número de peticiones al servidor
EmptyPageUrl Dirección URL utilizada en el caso de que la página destino esté

tur
vacía
EnableHistory Si la página permite la administración de los puntos de historial
EnablePageMethods Si se puede llamar desde script de cliente a los métodos de pági-
na estáticos públicos de una página ASP.NET
EnablePartialRendering Si se permite la actualización parcial de una página mediante el
uso de UpdatePanel

EnableScriptGlobalization
EnableScriptLocalization
EnableSecureHistoryState
IsDebuggingEnabled
IsInAsyncPostBack
ec
Se admite aplicar formato a la información de referencia cultural
Si representa versiones localizadas de archivos de script
Si se cifra la cadena de estado del historial
Si está habilitada la depuración en la página

IsNavigating
l Si la devolución de datos actual se refiere a una actualización
parcial de página
Si se está controlando un evento Navigate
de
LoadScriptBeforeUI Si los scripts se cargan antes o después de los controles UI
ProfileService Controlador de la gestión de perfiles de usuario
RoleService Controlador de la gestión de roles de usuario
ScriptMode Representación de los scripts. Soporta cuatro posibles valores:
· Auto: modo que tenga establecido la aplicación
· Inherit: modo que tenga establecido la página
lo

· Debug: modo de depuración

· Release: modo de liberación final
ScriptPath Ruta al fichero que contiene el código script
mp

Scripts Conjunto de ficheros que contienen código script disponibles

Services Conjunto de referencias a servicios Web disponibles para inter-
actuar desde código script
SupportsPartialRendering Si se permite la actualización parcial de la página
Visible Si el control será visible o no
Tabla 3 – Propiedades de la clase ScriptManager
Eje

El control ScriptManager sólo será necesario si queremos hacer uso de la funcionalidad de AJAX
tanto para cliente como para servidor. Si lo que queremos es trabajar con código script inline, senten-
cias JavaScript incluidas en la propia página, este control no será necesario y podremos utilizar dichas
funciones script simplemente vinculando los eventos de los controles con las funciones correspondien-
tes.
 UpdatePanel

a
La clase UpdatePanel se utiliza en ASP.NET AJAX para definir secciones de una página que se ac-
tualizarán de manera independiente a otras secciones, bien de manera manual o bien mediante el lan-
zamiento de algún desencadenador asociado (trigger). Esta clase permitirá que las peticiones de datos

tur
al servidor y el número de respuestas sea menor, pudiendo actualizar la información de la sección aso-
ciada sólo en el momento que sea necesario y no como hasta ahora sucedía por el hecho de provocar
un evento en el control de servidor. Para poder utilizar esta clase en nuestras páginas ASPX será im-
prescindible haber añadido un control ScriptManager a la página. La clase UpdatePanel expone los
siguientes métodos:

Método Descripción

ec
CreateContentTemplateContainer Crea una instancia de la clase Control que será el contenedor
del resto de controles de la sección definida por el UpdatePa-
nel

Update Provoca la actualización del contenido del objeto UpdatePanel

l
Tabla 4 – Métodos de la clase UpdatePanel

Como podemos ver, en esta clase sólo existen 2 métodos, sin contar todos los que hereda de la clase
Control.
de
Las propiedades expuestas por la clase UpdatePanel son:

Propiedad Descripción

ChildrenAsTriggers Indica si las devoluciones de datos de los controles incluidos en el

UpdatePanel provocarán la actualización del panel.

ContentTemplate Obtiene o establece la plantilla del objeto panel

lo

ContentTemplateContainer Obtiene u contenedor al que se le pueden añadir controles en tiempo

de ejecución

IsInPartialRendering Indica si se producirá una actualización del panel debido a una devo-
lución de datos de manera asíncrona
mp

RenderMode Establece si el panel se representará en la página HTML resultante

como un elemento <div> o como un elemento <span>.

RequiresUpdate Indica si se va a actualizar el panel

Triggers Devuelve los desencadenadores que provocan la actualización del

panel
Eje

UpdateMode Modo en el que se actualiza el panel. Los valores posibles son:

· Always: se actualiza con cualquier devolución de datos desde
el servidor
· Conditional: se actualiza el panel en las siguientes situacio-
nes:
- Al llamar al método Update
 Propiedad Descripción

a
- Cuando un control desencadenador provoca una ac-
tualización de datos

tur
- Si la propiedad ChildrenAsTriggers es true y un
control secundario del panel provoca una actualiza-
ción de datos

Tabla 5 – Propiedades de la clase UpdatePanel

Timer

ec
La clase Timer se encarga de realizar las devoluciones de datos al servidor de la página Web, ya sean
síncronas o asíncronas, en un intervalo definido.

Esta clase únicamente expone un método público propio, el método OnTick que se ejecutará cada vez
que haya transcurrido el intervalo especificado en el control.

Las propiedades ofrecidas por el control son aquellas que nos permiten habilitar o deshabilitar el con-

l
trol, así como dos más para establecer la visibilidad y el intervalo de actualización. Dichas propieda-
des toman el nombre de Enabled, Visible e Interval respectivamente.
de
UpdateProgress

La clase UpdateProgress se encarga de presentar información al usuario mientras se está realizando la

actualización de alguno de los paneles (UpdatePanel) existentes en la página.

Esta clase ofrece las siguientes propiedades exclusivas:

Propiedad Descripción
lo

AssociatedUpdatePanelID UpdatePanel para el que se muestra la información al usuario

DisplayAfter Valor en milisegundos que tienen que pasar antes de mostrar la infor-
mación al usuario
mp

DynamicLayout Representación dinámica de la información. Si el valor es true, no se

asigna espacio para representar la información, si es false, no se asigna

ProgressTemplate Plantilla que define el contenido del control. Podremos definir qué con-
troles queremos presentar al producirse una actualización del panel aso-
ciado.

Tabla 6 – Propiedades de la clase UpdateProgress

Eje

ScriptManagerProxy

Permite que los componentes ya existentes en la página puedan agregar código de script y referencias
de servicios (WCF o Web) a las páginas cuando ya se haya definido un control ScriptManager.

Las propiedades de la clase ScriptManagerProxy son:

 Propiedad Descripción

a
AuthenticationService Servicio de autenticación disponible para utilizar en código script con
el fin de autenticar a los usuarios

tur
CompositeScript Composición de varias referencias de script en una sola para minimizar
el número de peticiones al servidor

ProfileService Controlador de la gestión de perfiles de usuario

RoleService Controlador de la gestión de roles de usuario

Scripts Conjunto de ficheros que contienen código script disponibles

ec
Services Conjunto de referencias a servicios Web disponibles para interactuar
desde código script

SupportsPartialRendering Si se permite la actualización parcial de la página

Visible Si el control será visible o no

l
Tabla 7 – Propiedades de la clase ScriptManagerProxy

Además de los controles comentados anteriormente, la parte de servidor de ASP.NET AJAX incluye
de
toda la lógica de mantenimiento de servicios de autenticación, servicios Web y WCF, perfiles de usua-
rio y características de localización de aplicaciones. Adicionalmente, con la integración de AJAX en el
lado del servidor, podremos crear y añadir de manera dinámica secciones de código script que serán
incluidas dentro del resultado HTML que recibirá el cliente en su navegador.

Adicionalmente a los componentes de cliente y servidor se incluyen dos elementos adicionales que
utilizan toda la potencia de ambos componentes facilitando la creación de nuevo contenido y controles
a los desarrolladores. Estos componentes se conocen como AJAX Control Toolkit y AJAX Com-
munity-supported Futures Releases.
lo

AJAX Control Toolkit

El AJAX Control Toolkit consiste en un conjunto de ejemplos y componentes que muestran la manera
de crear controles y elementos de extensión ASP.NET AJAX. El toolkit ofrece un conjunto de contro-
mp

les y un SDK que podemos utilizar para diseñar nuestros propios controles y funcionalidades persona-
lizados. Este componente forma parte de los elementos conocidos como soportados por la comunidad
AJAX.

El AJAX Control Toolkit se puede descargar de la siguiente URL:

http://www.codeplex.com/Wiki/View.aspx?ProjectName=AjaxControlToolkit
Eje

AJAX Futures
AJAX Futures no existe como componente independiente, si no que se trata de las diferentes aporta-
ciones realizadas por la comunidad de desarrolladores a la tecnología ASP.NET AJAX. Microsoft ha
cambiado su manera de pensar a la hora de crear desarrollos y se ha dado cuenta de que es importante
que desarrolladores independientes o empresas puedan aportar sus trabajos para mejorar el funciona-
miento y el uso de una tecnología, en este caso la tecnología ASP.NET AJAX. El AJAX Toolkit fue el
primer conjunto de elementos publicados por la comunidad de desarrolladores y se espera que sigan
 apareciendo componentes nuevos, funcionalidades, ficheros de código JavaScript que aporten mayor

a
versatilidad a los desarrollos.

Los nuevos desarrollos que saldrán a la luz bajo esta denominación de AJAX Futures son ASP.NET
MVC y ASP.NET AJAX 4.0.

tur
Resumen
Una vez hemos entrado en contacto con lo que ofrece AJAX y su implementación ASP.NET AJAX a
nivel general pasaremos a ver cómo podemos crear nuestras aplicaciones RIA (Rich Internet Applica-
tions) utilizando esta tecnología así como los diferentes mecanismos de configuración, personalización
y uso de los componentes para que estas aplicaciones encajen dentro de los límites de lo aceptable,

ec
ajustando al máximo la cantidad de información enviada entre cliente y servidor pero siempre sin per-
judicar esto al rendimiento de la aplicación y a la versatilidad y facilidad de uso de dicha aplicación.

l
de
lo
mp
Eje