tur

a
ec

de
l

Aplicacin de tcnicas de AJAX a

ASP .NET

Eje

mp

lo

ngel Rayo

Sipnosis

tur
a

El desarrollo Web con ASP.NET supuso un gran cambio para los programadores permitindoles utilizar un gran nmero
de lenguajes de programacin para crear sus aplicaciones.
La inclusin de cdigo y controles de servidor permiti ampliar la funcionalidad de las aplicaciones sin requerir un gran
conocimiento sobre el lenguaje HTML.
Para mejorar el rendimiento de las aplicaciones ASP.NET y de otro tipo se ofrece la tecnologa AJAX, la cul hace uso de
JavaScript y XML con peticiones asncronas.

ec

Gracias a la Ajax Library, Ajax Extensions y el conjunto de controles del Ajax Control Toolkit conseguiremos crear aplicaciones con un mejor rendimiento y con menor cantidad de envos y recepciones a y desde el servidor Web.

Eje

mp

lo

de
l

ngel Rayo es formador de Alhambra-Eidos desde 2004. Ha sido el autor y coautor de varios
libros entre los que destaca el titulado "Administracin y Desarrollo con WSS 3.0 y MOSS
2007" centrado en Microsoft SharePoint as como otros relacionados con la plataforma .NET.
Adems, ha escrito artculos para dotnetmana 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.
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 certificacin uno de los dos nicos profesionales autorizados en Espaa. Dentro de la gestin de procesos posee las certificaciones en ITIL (v2 y v3),
ISO 20000 y MOF v4.0.

tur
a

Luarna
Aplicacin de tcnicas de Ajax a ASP .NET
Angel Rayo y Alhambra Eidos

ec

De esta edicin: 2009, Luarna Ediciones, S.L.

www.luarna.com

de
l

Madrid, septiembre de 2009

ISBN: 978-84-92684-50-2

Eje

mp

lo

Versin 1.0 (10-09-2009)

Cualquier forma de reproduccin, distribucin, comunicacin pblica o transformacin de esta obra solo puede ser realizada con la autorizacin de
sus titulares, salvo excepcin prevista por la ley. Dirjase a CEDRO (Centro Espaol de Derechos Reprogrficos, www.cedro.org) si necesita fotocopiar, escanear o hacer copias digitales de algn fragmento de esta obra.

tur
a
ec
de
l

APLICACIN DE TCNICAS DE AJAX A ASP .NET

Eje

mp

lo

Angel Rayo

Indice
INTRODUCCIN A ASP.NET AJAX...................................................................................................................................................... 8

tur
a

AJAX ............................................................................................................................................................................................. 9
ASP.NET AJAX ............................................................................................................................................................................. 10
Microsoft AJAX Library ............................................................................................................................................................ 12
AJAX Extensions ...................................................................................................................................................................... 12
ScriptManager........................................................................................................................................................................................ 13
UpdatePanel .......................................................................................................................................................................................... 16
Timer ..................................................................................................................................................................................................... 17
UpdateProgress...................................................................................................................................................................................... 17
ScriptManagerProxy ............................................................................................................................................................................... 17

AJAX Control Toolkit ............................................................................................................................................................... 18

AJAX Futures........................................................................................................................................................................... 18
RESUMEN ...................................................................................................................................................................................... 19

ec

JAVASCRIPT .................................................................................................................................................................................... 21
SINTAXIS ....................................................................................................................................................................................... 22
Palabras reservadas................................................................................................................................................................ 23
Variables ................................................................................................................................................................................ 23
mbito................................................................................................................................................................................................... 24

Tipos de variables ................................................................................................................................................................... 24

de
l

Tipos primitivos...................................................................................................................................................................................... 24
Conversin entre tipos de variables ........................................................................................................................................................ 26
Tipos de referencia................................................................................................................................................................................. 26

Objetos nativos....................................................................................................................................................................... 27

Date....................................................................................................................................................................................................... 27
Array...................................................................................................................................................................................................... 28
RegExp ................................................................................................................................................................................................... 28
Function................................................................................................................................................................................................. 29

Declaracin y uso de funciones ............................................................................................................................................... 29

Funciones y propiedades bsicas de JavaScript........................................................................................................................................ 29

Trabajo con objetos ................................................................................................................................................................ 31

Mtodos de un objeto ............................................................................................................................................................................ 32
Uso de los mtodos apply() y call() .......................................................................................................................................................... 32

lo

JSON....................................................................................................................................................................................... 32
CLASES ......................................................................................................................................................................................... 34
MANEJO DE EXCEPCIONES .................................................................................................................................................................. 35
DOM Y BOM ................................................................................................................................................................................... 37
DOM........................................................................................................................................................................................... 37
Elementos principales de DOM................................................................................................................................................ 38

mp

Acceso relativo a los nodos ..................................................................................................................................................................... 41

Tipos de nodos ....................................................................................................................................................................................... 45
Atributos................................................................................................................................................................................................ 45
Acceso directo a los nodos...................................................................................................................................................................... 46
Funcin getElementsByTagName() ..................................................................................................................................................... 47
Funcin getElementsByName() .......................................................................................................................................................... 48
Funcin getElementById() .................................................................................................................................................................. 48
Crear, modificar y eliminar nodos ........................................................................................................................................................... 48
Atributos HTML y propiedades CSS en DOM............................................................................................................................................ 52
Tablas HTML en DOM ............................................................................................................................................................................. 55

Eje

BOM ........................................................................................................................................................................................... 56
window .................................................................................................................................................................................. 57
Manipulacin de tamao y posicin ........................................................................................................................................ 57
document ............................................................................................................................................................................... 58
location .................................................................................................................................................................................. 59
navigator................................................................................................................................................................................ 60
screen..................................................................................................................................................................................... 61

AJAX BSICO: XMLHTTPREQUEST................................................................................................................................................... 63

XMLHTTPREQUEST ......................................................................................................................................................................... 65

MICROSOFT AJAX LIBRARY ............................................................................................................................................................. 73

COMPONENTES DE MICROSOFT AJAX LIBRARY ....................................................................................................................................... 74

tur
a

FUNCIONES GLOBALES ...................................................................................................................................................................... 75

EXTENSIONES DE LOS TIPOS BSICOS JAVASCRIPT ..................................................................................................................................... 79
Extensiones de tipo matriz ...................................................................................................................................................... 79
Extensiones de tipo booleano .................................................................................................................................................. 82
Extensiones de tipo fecha........................................................................................................................................................ 82
Extensiones de tipo error ........................................................................................................................................................ 83
Campos.................................................................................................................................................................................................. 83
Funciones............................................................................................................................................................................................... 83

Extensiones de tipo nmero .................................................................................................................................................... 84

Extensiones de tipo objeto ...................................................................................................................................................... 84
Extensiones de tipo cadena ..................................................................................................................................................... 84
SISTEMA DE TIPOS JAVASCRIPT ............................................................................................................................................................ 85
BCL DE SCRIPTING ........................................................................................................................................................................... 86
Sys.......................................................................................................................................................................................... 88

de
l

ec

Sys.Application ....................................................................................................................................................................................... 89
Sys.Browser ........................................................................................................................................................................................... 90
Sys.Component ...................................................................................................................................................................................... 91
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
Autenticacin de usuarios ................................................................................................................................................................ 102
Seguridad basada en roles (RoleService) ........................................................................................................................................... 108
Gestin de perfiles de usuarios (ProfileService)................................................................................................................................. 109
Sys.UI ................................................................................................................................................................................................... 111
Tratamiento DOM con DomElement y DomEvent ............................................................................................................................. 112
Gestin de comportamientos de cliente con la clase Behavior .......................................................................................................... 117
Creacin de controles de cliente con la clase Control ........................................................................................................................ 120
Sys.WebForms ..................................................................................................................................................................................... 123
PageRequestManager ...................................................................................................................................................................... 124

CASO PRCTICO: USO DE SERVICIOS WEB ............................................................................................................................................ 126

EXTENSIONES AJAX ...................................................................................................................................................................... 127

mp

lo

SCRIPTMANAGER .......................................................................................................................................................................... 128

PERSONALIZACIN DEL CONTROL SCRIPTMANAGER ................................................................................................................................ 132
MANEJO DE OPERACIONES ASNCRONAS Y ERRORES ................................................................................................................................ 136
MANEJO DE SCRIPTS ....................................................................................................................................................................... 138
MANEJO DE SERVICIOS .................................................................................................................................................................... 140
GLOBALIZACIN Y LOCALIZACIN ....................................................................................................................................................... 140
OTROS EVENTOS ........................................................................................................................................................................... 141
SCRIPTMANAGERPROXY ................................................................................................................................................................. 141
TIMER ........................................................................................................................................................................................ 141
UPDATEPANEL .............................................................................................................................................................................. 142
CONSTRUCCIN DE UNA INSTANCIA UPDATEPANEL ................................................................................................................................ 143
GESTIN DE TRIGGERS .................................................................................................................................................................... 145
AsyncPostBackTrigger........................................................................................................................................................... 146
PostBackTrigger ................................................................................................................................................................... 147
UPDATEPROGRESS ......................................................................................................................................................................... 148
AJAX CONTROL TOOLKIT .............................................................................................................................................................. 149

Eje

AJAX CONTROL TOOLKIT ................................................................................................................................................................ 152

ACCORDION ................................................................................................................................................................................. 153
ALWAYSVISIBLECONTROLEXTENDER ................................................................................................................................................... 154
ANIMATIONEXTENDER .................................................................................................................................................................... 154
AUTOCOMPLETEEXTENDER .............................................................................................................................................................. 155
CALENDAREXTENDER...................................................................................................................................................................... 156
CASCADINGDROPDOWN ................................................................................................................................................................. 156
COLLAPSIBLEPANELEXTENDER .......................................................................................................................................................... 157
CONFIRMBUTTONEXTENDER ............................................................................................................................................................ 157
FILTEREDTEXTBOXEXTENDER............................................................................................................................................................ 158
MODALPOPUPEXTENDER ................................................................................................................................................................ 158
RATING ....................................................................................................................................................................................... 159
CASO PRCTICO: AJAX CONTROL TOOLKIT .......................................................................................................................................... 159

RESOLUCIN CASOS PRCTICOS................................................................................................................................................... 161

Eje

mp

lo

de
l

ec

tur
a

CASO PRCTICO: USO DE SERVICIOS WEB ............................................................................................................................................ 161

CASO PRCTICO: AJAX CONTROL TOOLKIT .......................................................................................................................................... 166

tur
a
ec
de
l

Introduccin a ASP.NET AJAX

lo

Microsoft ASP.NET AJAX se trata de una nueva tecnologa que permite aadir la funcionalidad
AJAX a las aplicaciones Web. Ofrece una biblioteca de cdigo JavaScript para su ejecucin en el lado
del cliente que simplifica dicho proceso de adicin de funcionalidad AJAX

mp

Microsoft ASP.NET AJAX ofrece funcionalidad compleja como la realizacin de llamadas asncronas
utilizando el protocolo XMLHTTP. La biblioteca de clases ASP.NET AJAX se incluy en la versin
2.0 de ASP.NET como complemento y viene integrada directamente dentro de las clases disponibles
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 trmino.

Eje

AJAX o Asynchronous JavaScript And XML se trata de un trmino genrico que aglutinan un
conjunto de tecnologas y procesos que podemos utilizar para mejorar nuestras aplicaciones Web.
Como ya he comentado el conjunto de herramientas, tcnicas y tecnologas conocidas como ASP.NET
AJAX son una implementacin 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 versin 3.5 de
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 cdigo script para realizar algunas
operaciones asociadas.

tur
a

AJAX

AJAX permite el procesado de funcionalidad JavaScript y de documentos o datos XML de manera

asncrona utilizando una serie de componentes, los cuales vamos a ver a continuacin. Es importante
tener en cuenta que crear una aplicacin Web que utilice el conjunto de funcionalidades de AJAX
puede ser ms complicada de mantener y depurar que una aplicacin Web tradicional cliente-servidor,
debido a que involucra a ms componentes.
Los componentes de AJAX son los siguientes:

HTMLi

ec

Componente Descripcin

HyperText Markup Language, se trata del lenguaje estndar de creacin de aplicaciones Web. Es recomendable comenzar a utilizar la nueva versin de este estndar
XHTMLii
(HTML extensible)
ya
que ofrece mayor
versatilidad.
i http://www.w3.org/TR/REC-html40/
ii http://www.w3.org/TR/xhtml1/

Cascading Style Sheets u hojas de estilo en cascada suponen el formato estndar de

representacin de estilos para pginas HTML y XHTML. Con AJAX podemos modificar hojas de estilos directamente, en lugar de recurrir a modificar los propios elementos HTML que componen la pgina.

de
l

CSSiii

iii http://www.w3.org/Style/CSS/

DOMiv

Document Object Model se trata del modelo de representacin de datos HTML o

XHTML en un formato jerrquico pudiendo ser consultado. Con DOM podemos
modificar los elementos individuales de las pginas Web, equivalentes a las etiquetas
disponibles en HTML o XHTML
iv http://www.w3.org/DOM/

JavaScript se trata del lenguaje de creacin de cdigo que se ejecuta en el cliente,

tcnica conocida como scripting. Mediante JavaScript podemos realizar operaciones
de manipulacin de la informacin de las pginas HTML, la estructura DOM y las
hojas de estilo CSS. Con JavaScript tambin podemos crear las conocidas pginas
DHTML. Con ASP.NET AJAX tambin podremos definir cdigo script en otros
lenguajes como ECMAScriptvi o vbscript.

lo

JavaScript v

mp

v http://docs.sun.com/source/816-6408-10/contents.htm
vi http://www.ecma-international.org/publications/standards/Ecma-262.htm

XMLvii

Extensible Markup Language, se trata del lenguaje que se ha convertido en el estndar para representar informacin en un formato independiente de la plataforma donde
est dicha informacin. 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 representacin de los datos JavaScript. JavaScript utilizar el formato JSON
para seriar y deseriar objetos.

Eje

viii http://www.json.org/

XMLHTTP

XMLHTTP se trata de un protocolo de intercambio de informacin en formato XML.

Con el objeto XmlHttpRequestix podemos obtener informacin definida mediante
una estructura XML.
ix http://www.w3.org/TR/XMLHttpRequest/
Tabla 1 Componentes de AJAX

tur
a

ASP.NET AJAX

ASP.NET AJAX se trata de la implementacin de las tcnicas y estndares utilizados en AJAX para la
plataforma .NET y su integracin 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 importancia comentar, ya que el lector puede estar interesado en integrar sus aplicaciones .NET con otro tipo de
aplicaciones que hagan uso tambin de AJAX.
Algunas de las implementaciones de AJAX ms extendidas son las siguientes:

FJAX: Integracin de AJAX con Adobe Flash (http://fjax.enginpost.com/)

AjaxCFC: Integracin de AJAX con Adobe ColdFusion (http://ajaxcfc.riaforge.org/)

AjaxXSLT: Integracin 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 estndar. AJAX Toolkit Framework (ATF) ofrecido por Eclipse
para trabajar con diferentes motores. (http://www.openajax.org/index.php)

Sajax: coleccin de herramientas para AJAX (http://www.modernmethod.com/sajax/)

Xajax: biblioteca de cdigo PHP integrado con AJAX (http://xajaxproject.org/)

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/)

de
l

ec

Comencemos ahora con la introduccin a ASP.NET AJAX.

lo

Uno de los problemas que puede tener un desarrollador de aplicaciones Web con ASP.NET 2.0 o versiones anteriores y quieran utilizar la funcionalidad de AJAX es el aprendizaje del lenguaje JavaScript. Microsoft pensando en esto ha creado tres componentes principales que facilitarn el trabajo con
la funcionalidad AJAX sin tener unos conocimientos avanzados sobre el lenguaje JavaScript utilizando una sintaxis similar a la que podemos usar en nuestros desarrollos con C# en ASP.NET 2.0.

mp

Mediante ASP.NET AJAX conseguiremos crear aplicaciones ms dinmicas, con mejor capacidad de
respuesta, ms sencillas de utilizar, ms interesantes y compatible con todos y cada uno de los navegadores Web existentes, al poder definir ya sea directa o indirectamente el cdigo script que se presentar en la pgina Web.
Los componentes de ASP.NET AJAX, que ya en la versin 3.5 de ASP.NET viene incluida dentro del
paquete de instalacin, no como en la versin 2.0 que era necesario instalar este conjunto de funcionalidades como elemento aparte, son los siguientes:
Funcionalidad del lado del cliente: ofrecidas como un conjunto de ficheros JavaScript conocidos en la versin 2.0 de ASP.NET como AJAX Library que permiten crear cdigo de manera 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 versin 2.0 de ASP.NET como AJAX Extensions. Estos controles generarn al presentar la informacin en el documento HTML que se enviar a los navegadores el cdigo JavaScript necesario para trabajar con sus funcionalidades.

Eje

tur
a

Framework extensible: El conjunto de elementos incluidos en el AJAX Control Toolkit

permiten contar con un framework de objetos, clases, mtodos y eventos ampliables y personalizables por los desarrolladores.

de
l

ec

Figura 1 Componentes de cliente y servidor en ASP.NET AJAX

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 cdigo JavaScript compatible con la mayora de los navegadores Web conseguiremos que nuestros sitios Web no dependan del tipo de
navegador en el que se est mostrando la aplicacin para utilizar unos mecanismos de presentacin y uso especficos.

Mejoras de la Interfaz de Usuario: Al contar con tecnologas que permiten actualizar de manera rpida los componentes de la interfaz de usuario conseguiremos contar con aplicaciones
ms atractivas para los usuarios.

Reduccin del ancho de banda: Por el mismo motivo que los escenarios anteriores utilizar
cdigo de cliente nos permitir que se enve y reciba menor cantidad de bytes entre cliente y
servidor por lo que las aplicaciones no requerirn que el cliente cuente con un gran caudal de
ancho de banda para poder ejecutar nuestras aplicaciones.

mp

lo

Actualizacin de sitios Web: Para actualizar sitios Web desde versiones ASP.NET anteriores
a la 3.5 no es necesario aplicar un cambio drstico sino revisar los componentes que podemos
adaptar para que utilicen toda la potencia de ejecucin y depuracin de cdigo 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, tambin desde el propio cdigo de cliente.

Eje

Sitios con gestin de miembros y perfiles: Los mecanismos de membresa, perfiles de usuario, autenticacin y autorizacin disponibles ya en la versin 2.0 de ASP.NET podrn ser utilizados ahora desde el propio cdigo script de cliente.

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

tur
a

Microsoft AJAX Library

Microsoft AJAX Library consiste en una biblioteca de ficheros JavaScript vlidos para cualquier navegador. 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 programacin .NET, la funcionalidad de la Microsoft AJAX Library viene tambin expuesta mediante una estructura de espacios de
nombres y clases utilizables dentro del propio cdigo 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 ms fciles de utilizar por los programadores .NET. Los tipos de
datos que incluye, extensiones, son Array, Boolean, Error, Number, Object y String.

Sys: Raz de la Microsoft AJAX Library, incluye las clases bsicas

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

Sys.Serialization: Contiene los tipos relacionados con la seriacin de datos.

Sys.Services: Acceso de script a los servicios de autenticacin, perfiles y otros servicios de

aplicacin

Sys.UI: Interaccin con la interfaz de usuario: controles, eventos y propiedades de las pginas

Sys.WebForms: Tipos relacionados con la representacin parcial de las pginas

de
l

ec

Con Microsoft AJAX Library tendremos una estructura de gestin de las aplicaciones Web del lado
del cliente contando con mecanismos de manejo de errores, conexiones con servicios, tcnicas de
creacin de aplicaciones multi-idioma, etc.

lo

AJAX Extensions

Las extensiones AJAX para ASP.NET forman parte de ASP.NET 3.5 e incluyen un conjunto de controles de servidor que permiten aadir toda la funcionalidad AJAX a nuestras aplicaciones.

mp

En este captulo de introduccin nos centraremos en las caractersticas generales de cada extensin,
viendo en los sucesivos captulos 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:

Descripcin

ScriptManager

El componente ScriptManager deber ser incluido en todas las pginas Web

en las que queramos contar con la funcionalidad ASP.NET AJAX. Este componente 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 funcionarn.

Eje

Control

UpdatePanel

El control UpdatePanel se utiliza para definir secciones de la pgina que

soportarn actualizaciones parciales. Dentro de los controles UpdatePanel
definiremos secciones ContentTemplate donde se alojarn aquellos contro-

Descripcin

tur
a

Control

les que queremos que se presenten en las pginas Web.

El control Timer se utiliza para realizar envos de solicitudes de datos al

servidor peridicamente. Generalmente este control se utiliza dentro de la
seccin ContentTemplate de los UpdatePanel

UpdateProgress

El control UpdateProgress muestran informacin al usuario mientras se

realizan actualizaciones parciales de la pgina Web actual con el fin de evitar
que el usuario interacte con elementos que sufrirn variaciones posteriormente. El control contendr un elemento llamado ProgressTemplate donde
se establecer la informacin que se le mostrar al usuario.

ec

Timer

ScriptManagerProxy Habilita que los componentes anidados de contenido y los controles de usuario puedan agregar cdigo script y referencias de servicio a las pginas cuando ya se ha definido un control ScriptManager en el elemento principal.

de
l

Tabla 2 Controles de las extensiones AJAX

Dichos controles, los cuales veremos a continuacin con mayor detalle se encuentran disponibles en el
cuadro de herramientas de Visual Studio 2005 al haber instalado los AJAX Extensions, no siendo necesario si tenemos instalado .NET 3.5, incluido en Visual Studio 2008.

lo

Figura 2 Extensiones AJAX

mp

Los controles pertenecientes a las extensiones AJAX de ASP.NET se encuentran ubicados en el espacio de nombres System.Web.UI, complementando al resto de controles ya existentes en la versin 2.0
de ASP.NET. Veamos ahora cmo funciona y para qu sirve cada uno de estos controles.

ScriptManager

La clase ScriptManager es la responsable de administrar las bibliotecas de cdigo script y script

AJAX adems de mantener la representacin parcial de las pginas y la generacin de las clases proxy
de los servicios Web y de aplicacin incluidos en nuestra aplicacin.
Esta clase se representar en la pgina de la siguiente manera:

Eje

<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
Cdigo 1 ScriptManager en una pgina

A la hora de definir las propiedades del ScriptManager podemos optar por hacerlo en la propia vista
de cdigo HTML, mediante la vista de diseo yendo a las propiedades o bien utilizando el code-

tur
a

behind para que realice las modificaciones correspondientes y las enve al cliente cuando se provoque
el evento correspondiente.

de
l

ec

Slo puede haber un control ScriptManager por cada pgina ASPX que tengamos en nuestra aplicacin, ya que si pusisemos ms de uno nos encontraramos con el siguiente error:

Figura 3 Error de servidor al agregar dos instancias de ScriptManager

La clase ScriptManager expone un conjunto de mtodos y propiedades, los cuales vamos a ver ahora
junto con su funcionalidad y algn ejemplo de ellos.

Propiedad

lo

Comencemos con las propiedades de la clase:

Define si se utiliza la seccin customErrors del fichero

Web.config para mostrar un mensaje personalziado cuando se
produzca un error.

mp

AllowCustomErrorsRedirect

Descripcin

AsyncPostBackErrorMessage

Mensaje de error que se le muestra al cliente cuando se produce

una excepcin de servidor no controlada

AsyncPostBackSourceElementID Identificador del control que devolvi los resultados de la llamada asncrona

Eje

AsyncPostBackTimeout

Tiempo en segundos que dura una operacin de peticin de datos de manera asncrona. Si vence el tiempo y no se ha recibido
respuesta se cancela la peticin

AuthenticationService

Servicio de autenticacin disponible para utilizar en cdigo

script con el fin de autenticar a los usuarios

ClientNavigateHandler

Mtodo que controla el evento Sys.Application.navigate en el

lado del cliente

CompositeScript

Composicin de varias referencias de script en una sola para

Descripcin

tur
a

Propiedad

minimizar el nmero de peticiones al servidor

Direccin URL utilizada en el caso de que la pgina destino est

vaca

EnableHistory

Si la pgina permite la administracin de los puntos de historial

EnablePageMethods

Si se puede llamar desde script de cliente a los mtodos de pgina estticos pblicos de una pgina ASP.NET

EnablePartialRendering

Si se permite la actualizacin parcial de una pgina mediante el

uso de UpdatePanel

EnableScriptGlobalization

Se admite aplicar formato a la informacin de referencia cultural

EnableScriptLocalization

Si representa versiones localizadas de archivos de script

EnableSecureHistoryState

Si se cifra la cadena de estado del historial

IsDebuggingEnabled

Si est habilitada la depuracin en la pgina

Si la devolucin de datos actual se refiere a una actualizacin

parcial de pgina
Si se est controlando un evento Navigate

IsNavigating
LoadScriptBeforeUI

Si los scripts se cargan antes o despus de los controles UI

Controlador de la gestin de perfiles de usuario

ProfileService

Controlador de la gestin de roles de usuario

RoleService

Representacin de los scripts. Soporta cuatro posibles valores:

Auto: modo que tenga establecido la aplicacin

Inherit: modo que tenga establecido la pgina

Debug: modo de depuracin

Release: modo de liberacin final

lo

ScriptMode

Ruta al fichero que contiene el cdigo script

mp

ScriptPath

de
l

IsInAsyncPostBack

ec

EmptyPageUrl

Scripts

Conjunto de ficheros que contienen cdigo script disponibles

Services

Conjunto de referencias a servicios Web disponibles para interactuar desde cdigo script

SupportsPartialRendering

Si se permite la actualizacin parcial de la pgina

Visible

Si el control ser visible o no

Eje

Tabla 3 Propiedades de la clase ScriptManager

El control ScriptManager slo ser necesario si queremos hacer uso de la funcionalidad de AJAX
tanto para cliente como para servidor. Si lo que queremos es trabajar con cdigo script inline, sentencias JavaScript incluidas en la propia pgina, este control no ser necesario y podremos utilizar dichas
funciones script simplemente vinculando los eventos de los controles con las funciones correspondientes.

tur
a

UpdatePanel

La clase UpdatePanel se utiliza en ASP.NET AJAX para definir secciones de una pgina que se actualizarn de manera independiente a otras secciones, bien de manera manual o bien mediante el lanzamiento de algn desencadenador asociado (trigger). Esta clase permitir que las peticiones de datos
al servidor y el nmero de respuestas sea menor, pudiendo actualizar la informacin de la seccin asociada slo en el momento que sea necesario y no como hasta ahora suceda por el hecho de provocar
un evento en el control de servidor. Para poder utilizar esta clase en nuestras pginas ASPX ser imprescindible haber aadido un control ScriptManager a la pgina. La clase UpdatePanel expone los
siguientes mtodos:

Descripcin

ec

Mtodo

CreateContentTemplateContainer Crea una instancia de la clase Control que ser el contenedor

del resto de controles de la seccin definida por el UpdatePanel
Provoca la actualizacin del contenido del objeto UpdatePanel

de
l

Update

Tabla 4 Mtodos de la clase UpdatePanel

Como podemos ver, en esta clase slo existen 2 mtodos, sin contar todos los que hereda de la clase
Control.
Las propiedades expuestas por la clase UpdatePanel son:

Propiedad

Descripcin

ChildrenAsTriggers

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

UpdatePanel provocarn la actualizacin del panel.
Obtiene o establece la plantilla del objeto panel

ContentTemplateContainer

Obtiene u contenedor al que se le pueden aadir controles en tiempo

de ejecucin

IsInPartialRendering

Indica si se producir una actualizacin del panel debido a una devolucin de datos de manera asncrona

mp

lo

ContentTemplate

Establece si el panel se representar en la pgina 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 actualizacin del

panel

Eje

RenderMode

UpdateMode

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

Always: se actualiza con cualquier devolucin de datos desde

el servidor

Conditional: se actualiza el panel en las siguientes situaciones:

-

Al llamar al mtodo Update

Descripcin

tur
a

Propiedad

Cuando un control desencadenador provoca una actualizacin de datos

Si la propiedad ChildrenAsTriggers es true y un

control secundario del panel provoca una actualizacin de datos

Tabla 5 Propiedades de la clase UpdatePanel

ec

Timer

La clase Timer se encarga de realizar las devoluciones de datos al servidor de la pgina Web, ya sean
sncronas o asncronas, en un intervalo definido.
Esta clase nicamente expone un mtodo pblico propio, el mtodo OnTick que se ejecutar cada vez
que haya transcurrido el intervalo especificado en el control.

UpdateProgress

de
l

Las propiedades ofrecidas por el control son aquellas que nos permiten habilitar o deshabilitar el control, as como dos ms para establecer la visibilidad y el intervalo de actualizacin. Dichas propiedades toman el nombre de Enabled, Visible e Interval respectivamente.

La clase UpdateProgress se encarga de presentar informacin al usuario mientras se est realizando la

actualizacin de alguno de los paneles (UpdatePanel) existentes en la pgina.
Esta clase ofrece las siguientes propiedades exclusivas:

Descripcin

lo

Propiedad

AssociatedUpdatePanelID UpdatePanel para el que se muestra la informacin al usuario

Valor en milisegundos que tienen que pasar antes de mostrar la informacin al usuario

mp

DisplayAfter
DynamicLayout

Representacin dinmica de la informacin. Si el valor es true, no se

asigna espacio para representar la informacin, si es false, no se asigna

ProgressTemplate

Plantilla que define el contenido del control. Podremos definir qu controles queremos presentar al producirse una actualizacin del panel asociado.

Eje

Tabla 6 Propiedades de la clase UpdateProgress

ScriptManagerProxy

Permite que los componentes ya existentes en la pgina puedan agregar cdigo de script y referencias
de servicios (WCF o Web) a las pginas cuando ya se haya definido un control ScriptManager.

Las propiedades de la clase ScriptManagerProxy son:

Descripcin

AuthenticationService

Servicio de autenticacin disponible para utilizar en cdigo script con

el fin de autenticar a los usuarios

CompositeScript

Composicin de varias referencias de script en una sola para minimizar

el nmero de peticiones al servidor

ProfileService

Controlador de la gestin de perfiles de usuario

RoleService

Controlador de la gestin de roles de usuario

Scripts

Conjunto de ficheros que contienen cdigo script disponibles

Services

Conjunto de referencias a servicios Web disponibles para interactuar

desde cdigo script

SupportsPartialRendering

Si se permite la actualizacin parcial de la pgina

Visible

Si el control ser visible o no

de
l

ec

tur
a

Propiedad

Tabla 7 Propiedades de la clase ScriptManagerProxy

Adems de los controles comentados anteriormente, la parte de servidor de ASP.NET AJAX incluye
toda la lgica de mantenimiento de servicios de autenticacin, servicios Web y WCF, perfiles de usuario y caractersticas de localizacin de aplicaciones. Adicionalmente, con la integracin de AJAX en el
lado del servidor, podremos crear y aadir de manera dinmica secciones de cdigo script que sern
incluidas dentro del resultado HTML que recibir el cliente en su navegador.

lo

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

AJAX Control Toolkit

mp

El AJAX Control Toolkit consiste en un conjunto de ejemplos y componentes que muestran la manera
de crear controles y elementos de extensin ASP.NET AJAX. El toolkit ofrece un conjunto de controles y un SDK que podemos utilizar para disear nuestros propios controles y funcionalidades personalizados. 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:

Eje

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

AJAX Futures

AJAX Futures no existe como componente independiente, si no que se trata de las diferentes aportaciones realizadas por la comunidad de desarrolladores a la tecnologa 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 funcionamiento y el uso de una tecnologa, en este caso la tecnologa ASP.NET AJAX. El AJAX Toolkit fue el
primer conjunto de elementos publicados por la comunidad de desarrolladores y se espera que sigan

tur
a

apareciendo componentes nuevos, funcionalidades, ficheros de cdigo JavaScript que aporten mayor
versatilidad a los desarrollos.

Los nuevos desarrollos que saldrn a la luz bajo esta denominacin de AJAX Futures son ASP.NET
MVC y ASP.NET AJAX 4.0.

Resumen

Eje

mp

lo

de
l

ec

Una vez hemos entrado en contacto con lo que ofrece AJAX y su implementacin ASP.NET AJAX a
nivel general pasaremos a ver cmo podemos crear nuestras aplicaciones RIA (Rich Internet Applications) utilizando esta tecnologa as como los diferentes mecanismos de configuracin, personalizacin
y uso de los componentes para que estas aplicaciones encajen dentro de los lmites de lo aceptable,
ajustando al mximo la cantidad de informacin enviada entre cliente y servidor pero siempre sin perjudicar esto al rendimiento de la aplicacin y a la versatilidad y facilidad de uso de dicha aplicacin.