aplicación de técnicas de ajax a asp .net (ejemplo)
TRANSCRIPT
Aplicación de técnicas de AJAX aASP .NET
Ángel Rayo
Ejem
plo d
e lec
tura
Sipnosis
El desarrollo Web con ASP.NET supuso un gran cambio para los programadores permitiéndoles utilizar un gran númerode lenguajes de programación para crear sus aplicaciones.
La inclusión de código y controles de servidor permitió ampliar la funcionalidad de las aplicaciones sin requerir un granconocimiento sobre el lenguaje HTML.
Para mejorar el rendimiento de las aplicaciones ASP.NET y de otro tipo se ofrece la tecnología AJAX, la cuál hace uso deJavaScript 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.
Ángel Rayo es formador de Alhambra-Eidos desde 2004. Ha sido el autor y coautor de varioslibros entre los que destaca el titulado "Administración y Desarrollo con WSS 3.0 y MOSS2007" 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 softwarecon 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 MCTSen SharePoint 2007 principalmente. Está certificado como formador oficial de Microsoft, EXINy 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.
Ejem
plo d
e lec
tura
LuarnaAplicación de técnicas de Ajax a ASP .NET
© Angel Rayo y Alhambra Eidos
© De esta edición: 2009, Luarna Ediciones, S.L.
www.luarna.com
Madrid, septiembre de 2009
ISBN: 978-84-92684-50-2
Versión 1.0 (10-09-2009)
«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 desus 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».Ej
emplo
de
lectu
ra
APLICACIÓN DE TÉCNICAS DE AJAX A ASP .NET
Angel Rayo
Ejem
plo d
e lec
tura
Indice
INTRODUCCIÓN A ASP.NET AJAX ...................................................................................................................................................... 8
AJAX ............................................................................................................................................................................................. 9ASP.NET AJAX ............................................................................................................................................................................. 10
Microsoft AJAX Library ............................................................................................................................................................ 12AJAX Extensions ...................................................................................................................................................................... 12
ScriptManager........................................................................................................................................................................................ 13UpdatePanel .......................................................................................................................................................................................... 16Timer ..................................................................................................................................................................................................... 17UpdateProgress...................................................................................................................................................................................... 17ScriptManagerProxy ............................................................................................................................................................................... 17
AJAX Control Toolkit ............................................................................................................................................................... 18AJAX Futures........................................................................................................................................................................... 18
RESUMEN ...................................................................................................................................................................................... 19
JAVASCRIPT .................................................................................................................................................................................... 21
SINTAXIS ....................................................................................................................................................................................... 22Palabras reservadas................................................................................................................................................................ 23Variables ................................................................................................................................................................................ 23
Ámbito ................................................................................................................................................................................................... 24Tipos de variables ................................................................................................................................................................... 24
Tipos primitivos ...................................................................................................................................................................................... 24Conversión entre tipos de variables ........................................................................................................................................................ 26Tipos de referencia ................................................................................................................................................................................. 26
Objetos nativos ....................................................................................................................................................................... 27Date ....................................................................................................................................................................................................... 27Array ...................................................................................................................................................................................................... 28RegExp ................................................................................................................................................................................................... 28Function ................................................................................................................................................................................................. 29
Declaración y uso de funciones ............................................................................................................................................... 29Funciones y propiedades básicas de JavaScript ........................................................................................................................................ 29
Trabajo con objetos ................................................................................................................................................................ 31Métodos de un objeto ............................................................................................................................................................................ 32Uso de los métodos apply() y call() .......................................................................................................................................................... 32
JSON ....................................................................................................................................................................................... 32CLASES ......................................................................................................................................................................................... 34MANEJO DE EXCEPCIONES .................................................................................................................................................................. 35
DOM Y BOM ................................................................................................................................................................................... 37
DOM........................................................................................................................................................................................... 37Elementos principales de DOM................................................................................................................................................ 38
Acceso relativo a los nodos ..................................................................................................................................................................... 41Tipos de nodos ....................................................................................................................................................................................... 45Atributos ................................................................................................................................................................................................ 45Acceso directo a los nodos ...................................................................................................................................................................... 46
Función getElementsByTagName() ..................................................................................................................................................... 47Función getElementsByName() .......................................................................................................................................................... 48Función getElementById() .................................................................................................................................................................. 48
Crear, modificar y eliminar nodos ........................................................................................................................................................... 48Atributos HTML y propiedades CSS en DOM ............................................................................................................................................ 52Tablas HTML en DOM ............................................................................................................................................................................. 55
BOM ........................................................................................................................................................................................... 56window .................................................................................................................................................................................. 57Manipulación de tamaño y posición ........................................................................................................................................ 57document ............................................................................................................................................................................... 58location .................................................................................................................................................................................. 59navigator ................................................................................................................................................................................ 60screen..................................................................................................................................................................................... 61
AJAX BÁSICO: XMLHTTPREQUEST ................................................................................................................................................... 63
XMLHTTPREQUEST ......................................................................................................................................................................... 65
MICROSOFT AJAX LIBRARY ............................................................................................................................................................. 73
COMPONENTES DE MICROSOFT AJAX LIBRARY ....................................................................................................................................... 74
Ejem
plo d
e lec
tura
FUNCIONES GLOBALES ...................................................................................................................................................................... 75EXTENSIONES DE LOS TIPOS BÁSICOS JAVASCRIPT ..................................................................................................................................... 79
Extensiones de tipo matriz ...................................................................................................................................................... 79Extensiones de tipo booleano .................................................................................................................................................. 82Extensiones de tipo fecha ........................................................................................................................................................ 82Extensiones de tipo error ........................................................................................................................................................ 83
Campos .................................................................................................................................................................................................. 83Funciones............................................................................................................................................................................................... 83
Extensiones de tipo número .................................................................................................................................................... 84Extensiones de tipo objeto ...................................................................................................................................................... 84Extensiones de tipo cadena ..................................................................................................................................................... 84
SISTEMA DE TIPOS JAVASCRIPT ............................................................................................................................................................ 85BCL DE SCRIPTING ........................................................................................................................................................................... 86
Sys.......................................................................................................................................................................................... 88Sys.Application ....................................................................................................................................................................................... 89Sys.Browser ........................................................................................................................................................................................... 90Sys.Component ...................................................................................................................................................................................... 91Sys.Debug .............................................................................................................................................................................................. 92Sys.Net................................................................................................................................................................................................... 94Sys.Serialization (System.Web.Script.Serialization en Code-Behind) ....................................................................................................... 101
JavaScriptSerializer .......................................................................................................................................................................... 101Sys.Services (System.Web.Script.Services en Code-Behind) ................................................................................................................... 102
Autenticación de usuarios ................................................................................................................................................................ 102Seguridad basada en roles (RoleService) ........................................................................................................................................... 108Gestión de perfiles de usuarios (ProfileService)................................................................................................................................. 109
Sys.UI ................................................................................................................................................................................................... 111Tratamiento DOM con DomElement y DomEvent ............................................................................................................................. 112Gestión de comportamientos de cliente con la clase Behavior .......................................................................................................... 117Creación de controles de cliente con la clase Control ........................................................................................................................ 120
Sys.WebForms ..................................................................................................................................................................................... 123PageRequestManager ...................................................................................................................................................................... 124
CASO PRÁCTICO: USO DE SERVICIOS WEB ............................................................................................................................................ 126
EXTENSIONES AJAX ...................................................................................................................................................................... 127
SCRIPTMANAGER .......................................................................................................................................................................... 128PERSONALIZACIÓN DEL CONTROL SCRIPTMANAGER ................................................................................................................................ 132MANEJO DE OPERACIONES ASÍNCRONAS Y ERRORES ................................................................................................................................ 136MANEJO DE SCRIPTS ....................................................................................................................................................................... 138MANEJO DE SERVICIOS .................................................................................................................................................................... 140GLOBALIZACIÓN Y LOCALIZACIÓN ....................................................................................................................................................... 140OTROS EVENTOS ........................................................................................................................................................................... 141SCRIPTMANAGERPROXY ................................................................................................................................................................. 141TIMER ........................................................................................................................................................................................ 141UPDATEPANEL .............................................................................................................................................................................. 142CONSTRUCCIÓN DE UNA INSTANCIA UPDATEPANEL ................................................................................................................................ 143GESTIÓN DE TRIGGERS .................................................................................................................................................................... 145
AsyncPostBackTrigger ........................................................................................................................................................... 146PostBackTrigger ................................................................................................................................................................... 147
UPDATEPROGRESS ......................................................................................................................................................................... 148
AJAX CONTROL TOOLKIT .............................................................................................................................................................. 149
AJAX CONTROL TOOLKIT ................................................................................................................................................................ 152ACCORDION ................................................................................................................................................................................. 153ALWAYSVISIBLECONTROLEXTENDER ................................................................................................................................................... 154ANIMATIONEXTENDER .................................................................................................................................................................... 154AUTOCOMPLETEEXTENDER .............................................................................................................................................................. 155CALENDAREXTENDER...................................................................................................................................................................... 156CASCADINGDROPDOWN ................................................................................................................................................................. 156COLLAPSIBLEPANELEXTENDER .......................................................................................................................................................... 157CONFIRMBUTTONEXTENDER ............................................................................................................................................................ 157FILTEREDTEXTBOXEXTENDER............................................................................................................................................................ 158MODALPOPUPEXTENDER ................................................................................................................................................................ 158RATING ....................................................................................................................................................................................... 159CASO PRÁCTICO: AJAX CONTROL TOOLKIT .......................................................................................................................................... 159
RESOLUCIÓN CASOS PRÁCTICOS................................................................................................................................................... 161
Ejem
plo d
e lec
tura
CASO PRÁCTICO: USO DE SERVICIOS WEB ............................................................................................................................................ 161CASO PRÁCTICO: AJAX CONTROL TOOLKIT .......................................................................................................................................... 166
Ejem
plo d
e lec
tura
Introducción a ASP.NET AJAX
Microsoft ASP.NET AJAX se trata de una nueva tecnología que permite añadir la funcionalidadAJAX a las aplicaciones Web. Ofrece una biblioteca de código JavaScript para su ejecución en el ladodel 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íncronasutilizando el protocolo XMLHTTP. La biblioteca de clases ASP.NET AJAX se incluyó en la versión2.0 de ASP.NET como complemento y viene integrada directamente dentro de las clases disponiblesen ASP.NET 3.5.
Para poder trabajar con ASP.NET 3.5 utilizando la funcionalidad comentada AJAX, será necesarioconocer exactamente qué significa este término.
AJAX o Asynchronous JavaScript And XML se trata de un término genérico que aglutinan unconjunto 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.NETAJAX son una implementación de AJAX que puede ser utilizada por los desarrolladores que hayantrabajado previamente con ASP.NET 2.0 o bien que deseen comenzar a trabajar con la versión 3.5 deASP.NET.
ASP.NET AJAX incluye junto con las bibliotecas de clases de cliente, controles de servidor mejoradosque los desarrolladores pueden utilizar y en los cuales se incluye código script para realizar algunasoperaciones asociadas.Ej
emplo
de
lectu
ra
AJAXAJAX permite el procesado de funcionalidad JavaScript y de documentos o datos XML de maneraasíncrona utilizando una serie de componentes, los cuales vamos a ver a continuación. Es importantetener en cuenta que crear una aplicación Web que utilice el conjunto de funcionalidades de AJAXpuede 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
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ándarXHTMLii (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 derepresentación de estilos para páginas HTML y XHTML. Con AJAX podemos modi-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/
DOMiv Document Object Model se trata del modelo de representación de datos HTML oXHTML en un formato jerárquico pudiendo ser consultado. Con DOM podemosmodificar los elementos individuales de las páginas Web, equivalentes a las etiquetasdisponibles en HTML o XHTMLiv http://www.w3.org/DOM/
JavaScriptv 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 operacionesde manipulación de la información de las páginas HTML, la estructura DOM y lashojas de estilo CSS. Con JavaScript también podemos crear las conocidas páginasDHTML. Con ASP.NET AJAX también podremos definir código script en otroslenguajes como ECMAScriptvi o vbscript.v http://docs.sun.com/source/816-6408-10/contents.htmvi http://www.ecma-international.org/publications/standards/Ecma-262.htm
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 dondeestá dicha información. AJAX utiliza el formato XML para empaquetar los datos enel cliente.vii http://www.w3.org/XML/
JSONviii JavaScript Object Notation se trata de un formato de intercambio de datos muy útilpara la representación de los datos JavaScript. JavaScript utilizará el formato JSONpara seriar y deseriar objetos.viii http://www.json.org/
XMLHTTP XMLHTTP se trata de un protocolo de intercambio de información en formato XML.Con el objeto XmlHttpRequestix podemos obtener información definida medianteuna estructura XML.ix http://www.w3.org/TR/XMLHttpRequest/
Tabla 1 – Componentes de AJAXEjem
plo d
e lec
tura
ASP.NET AJAXASP.NET AJAX se trata de la implementación de las técnicas y estándares utilizados en AJAX para laplataforma .NET y su integración con ASP.NET para el desarrollo Web. En este libro trabajaremoscon la funcionalidad ASP.NET AJAX pero existen otras implementaciones AJAX que es de importan-cia comentar, ya que el lector puede estar interesado en integrar sus aplicaciones .NET con otro tipo deaplicaciones 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/)
· 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 persiguencrear un framework AJAX estándar. AJAX Toolkit Framework (ATF) ofrecido por Eclipsepara trabajar con diferentes motores. (http://www.openajax.org/index.php)
· Sajax: colección de herramientas para AJAX (http://www.modernmethod.com/sajax/)
· Xajax: biblioteca de código 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/)
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-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 conla 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 derespuesta, 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 delpaquete 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-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 estructuraorientada 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.Ejem
plo d
e lec
tura
· Framework extensible: El conjunto de elementos incluidos en el AJAX Control Toolkitpermiten contar con un framework de objetos, clases, métodos y eventos ampliables y perso-nalizables por los desarrolladores.
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 lasaplicaciones 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 denavegador 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-nera rápida los componentes de la interfaz de usuario conseguiremos contar con aplicacionesmás atractivas para los usuarios.
· Reducción del ancho de banda: Por el mismo motivo que los escenarios anteriores utilizarcódigo de cliente nos permitirá que se envíe y reciba menor cantidad de bytes entre cliente yservidor por lo que las aplicaciones no requerirán que el cliente cuente con un gran caudal deancho de banda para poder ejecutar nuestras aplicaciones.
· Actualización de sitios Web: Para actualizar sitios Web desde versiones ASP.NET anterioresa la 3.5 no es necesario aplicar un cambio drástico sino revisar los componentes que podemosadaptar 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, yaincluidos en el propio motor de ASP.NET 3.5 conseguiremos conectar nuestras aplicacionescon fuentes externas, también desde el propio código de cliente.
· 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.Ejem
plo d
e lec
tura
Microsoft AJAX Library
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 AJAXvienen de desarrollos creados utilizando alguno de los lenguajes de programación .NET, la funcionali-dad de la Microsoft AJAX Library viene también expuesta mediante una estructura de espacios denombres 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 dedatos que incluye, extensiones, son Array, Boolean, Error, Number, Object y String.
· 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 clienteASP.NET AJAX y los servicios Web en el lado del servidor.
· Sys.Serialization: Contiene los tipos relacionados con la seriación de datos.
· Sys.Services: Acceso de script a los servicios de autenticación, perfiles y otros servicios deaplicación
· 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 ladodel cliente contando con mecanismos de manejo de errores, conexiones con servicios, técnicas decreación de aplicaciones multi-idioma, etc.
AJAX Extensions
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,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, sonlos siguientes:
Control Descripción
ScriptManager El componente ScriptManager deberá ser incluido en todas las páginas Weben las que queramos contar con la funcionalidad ASP.NET AJAX. Este com-ponente se encarga de exponer los ficheros JavaScript de la biblioteca AJAXal cliente. Sin este componente, los ficheros de script que hagan uso de labiblioteca AJAX no funcionarán.
UpdatePanel El control UpdatePanel se utiliza para definir secciones de la página quesoportarán actualizaciones parciales. Dentro de los controles UpdatePaneldefiniremos secciones ContentTemplate donde se alojarán aquellos contro-Ej
emplo
de
lectu
ra
Control Descripción
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 alservidor periódicamente. Generalmente este control se utiliza dentro de lasección ContentTemplate de los UpdatePanel
UpdateProgress El control UpdateProgress muestran información al usuario mientras serealizan actualizaciones parciales de la página Web actual con el fin de evitarque el usuario interactúe con elementos que sufrirán variaciones posterior-mente. El control contendrá un elemento llamado ProgressTemplate dondese establecerá la información que se le mostrará al usuario.
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
Dichos controles, los cuales veremos a continuación con mayor detalle se encuentran disponibles en elcuadro 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.
Figura 2 – Extensiones AJAX
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.0de ASP.NET. Veamos ahora cómo funciona y para qué sirve cada uno de estos controles.
ScriptManager
La clase ScriptManager es la responsable de administrar las bibliotecas de código script y scriptAJAX además de mantener la representación parcial de las páginas y la generación de las clases proxyde 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> <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 vistade código HTML, mediante la vista de diseño yendo a las propiedades o bien utilizando el code-Ej
emplo
de
lectu
ra
behind para que realice las modificaciones correspondientes y las envíe al cliente cuando se provoqueel 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:
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 ahorajunto con su funcionalidad y algún ejemplo de ellos.
Comencemos con las propiedades de la clase:
Propiedad Descripción
AllowCustomErrorsRedirect Define si se utiliza la sección customErrors del ficheroWeb.config para mostrar un mensaje personalziado cuando seproduzca un error.
AsyncPostBackErrorMessage Mensaje de error que se le muestra al cliente cuando se produceuna 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 recibidorespuesta se cancela la petición
AuthenticationService Servicio de autenticación disponible para utilizar en códigoscript con el fin de autenticar a los usuarios
ClientNavigateHandler Método que controla el evento Sys.Application.navigate en ellado del cliente
CompositeScript Composición de varias referencias de script en una sola paraEjem
plo d
e lec
tura
Propiedad Descripciónminimizar el número de peticiones al servidor
EmptyPageUrl Dirección URL utilizada en el caso de que la página destino esté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 eluso de UpdatePanel
EnableScriptGlobalization Se admite aplicar formato a la información 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 depuración en la página
IsInAsyncPostBack Si la devolución de datos actual se refiere a una actualizaciónparcial de página
IsNavigating Si se está controlando un evento Navigate
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· Debug: modo de depuración· Release: modo de liberación final
ScriptPath Ruta al fichero que contiene el código script
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
El control ScriptManager sólo será necesario si queremos hacer uso de la funcionalidad de AJAXtanto 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 dichasfunciones script simplemente vinculando los eventos de los controles con las funciones correspondien-tes. Ej
emplo
de
lectu
ra
UpdatePanel
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 datosal 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 provocarun 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 lossiguientes métodos:
Método Descripción
CreateContentTemplateContainer Crea una instancia de la clase Control que será el contenedordel resto de controles de la sección definida por el UpdatePa-nel
Update Provoca la actualización del contenido del objeto UpdatePanel
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 claseControl.
Las propiedades expuestas por la clase UpdatePanel son:
Propiedad Descripción
ChildrenAsTriggers Indica si las devoluciones de datos de los controles incluidos en elUpdatePanel provocarán la actualización del panel.
ContentTemplate Obtiene o establece la plantilla del objeto panel
ContentTemplateContainer Obtiene u contenedor al que se le pueden añadir controles en tiempode ejecución
IsInPartialRendering Indica si se producirá una actualización del panel debido a una devo-lución de datos de manera asíncrona
RenderMode Establece si el panel se representará en la página HTML resultantecomo 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 delpanel
UpdateMode Modo en el que se actualiza el panel. Los valores posibles son:
· Always: se actualiza con cualquier devolución de datos desdeel servidor
· Conditional: se actualiza el panel en las siguientes situacio-nes:
- Al llamar al método UpdateEjem
plo d
e lec
tura
Propiedad Descripción
- Cuando un control desencadenador provoca una ac-tualización de datos
- Si la propiedad ChildrenAsTriggers es true y uncontrol secundario del panel provoca una actualiza-ción de datos
Tabla 5 – Propiedades de la clase UpdatePanel
Timer
La clase Timer se encarga de realizar las devoluciones de datos al servidor de la página Web, ya seansí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 vezque haya transcurrido el intervalo especificado en el control.
Las propiedades ofrecidas por el control son aquellas que nos permiten habilitar o deshabilitar el con-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.
UpdateProgress
La clase UpdateProgress se encarga de presentar información al usuario mientras se está realizando laactualización de alguno de los paneles (UpdatePanel) existentes en la página.
Esta clase ofrece las siguientes propiedades exclusivas:
Propiedad Descripción
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
DynamicLayout Representación dinámica de la información. Si el valor es true, no seasigna 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
ScriptManagerProxy
Permite que los componentes ya existentes en la página puedan agregar código de script y referenciasde servicios (WCF o Web) a las páginas cuando ya se haya definido un control ScriptManager.
Las propiedades de la clase ScriptManagerProxy son:Ejem
plo d
e lec
tura
Propiedad Descripción
AuthenticationService Servicio de autenticación disponible para utilizar en código script conel fin de autenticar a los usuarios
CompositeScript Composición de varias referencias de script en una sola para minimizarel 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
Services Conjunto de referencias a servicios Web disponibles para interactuardesde código script
SupportsPartialRendering Si se permite la actualización parcial de la página
Visible Si el control será visible o no
Tabla 7 – Propiedades de la clase ScriptManagerProxy
Además de los controles comentados anteriormente, la parte de servidor de ASP.NET AJAX incluyetoda 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 ellado del servidor, podremos crear y añadir de manera dinámica secciones de código script que seránincluidas dentro del resultado HTML que recibirá el cliente en su navegador.
Adicionalmente a los componentes de cliente y servidor se incluyen dos elementos adicionales queutilizan toda la potencia de ambos componentes facilitando la creación de nuevo contenido y controlesa los desarrolladores. Estos componentes se conocen como AJAX Control Toolkit y AJAX Com-munity-supported Futures Releases.
AJAX Control Toolkit
El AJAX Control Toolkit consiste en un conjunto de ejemplos y componentes que muestran la manerade crear controles y elementos de extensión ASP.NET AJAX. El toolkit ofrece un conjunto de contro-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 comunidadAJAX.
El AJAX Control Toolkit se puede descargar de la siguiente URL:
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 aporta-ciones realizadas por la comunidad de desarrolladores a la tecnología ASP.NET AJAX. Microsoft hacambiado su manera de pensar a la hora de crear desarrollos y se ha dado cuenta de que es importanteque 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 elprimer conjunto de elementos publicados por la comunidad de desarrolladores y se espera que siganEj
emplo
de
lectu
ra
apareciendo componentes nuevos, funcionalidades, ficheros de código JavaScript que aporten mayorversatilidad a los desarrollos.
Los nuevos desarrollos que saldrán a la luz bajo esta denominación de AJAX Futures son ASP.NETMVC y ASP.NET AJAX 4.0.
ResumenUna vez hemos entrado en contacto con lo que ofrece AJAX y su implementación ASP.NET AJAX anivel 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óny uso de los componentes para que estas aplicaciones encajen dentro de los límites de lo aceptable,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.
Ejem
plo d
e lec
tura