Programacin avanzada en .

NET con C#
Servicio de Informtica

AJAX

ndice
Familiarizarse con Ajax .................................................................................................................. 2 Introduccin .............................................................................................................................. 2 Relacin de controles de AJAX ...................................................................................................... 2 Control ScriptManager .......................................................................................................... 2 Control ScriptManagerProxy ................................................................................................. 3 Control UpdatePanel ............................................................................................................. 3 Control UpdateProgress ........................................................................................................ 6 Control Timer ........................................................................................................................ 6 Ejemplos ........................................................................................................................................ 6 Ejemplo 1 (Update sencillo) .................................................................................................. 6 Ejemplo 2 (Update con UpdateProgress y tipos de disparadores) ...................................... 7 Ejemplo 3 (disparador con FileUpload) ................................................................................. 8 Ejemplo 4 (varios updatePanel y el timer) ............................................................................ 9 Anidando UpdatePanels. ............................................................................................................. 10 Ejemplo 5............................................................................................................................. 10 Instrucciones para el control de llamadas asncronas ........................................................ 13 Ejercicio 1. ................................................................................................................................... 14 Uso de AJAX Avanzado ................................................................................................................ 16 Ejemplo 5 (actualizar un control fuera del UpdatePanel): ...................................................... 16 Ejemplo 6 (Autoarranque y barra de progreso por programacin): ....................................... 18 Cancelacin de actualizaciones de UpdatePanel .................................................................... 19 Varios UpdatePanels ............................................................................................................... 20 Ejercicio 2. ................................................................................................................................... 21 AJAX Control ToolsKit .................................................................................................................. 22 ValidatorCalloutExtender ........................................................................................................ 23 Ejemplo 7 (Callout) .................................................................................................................. 24

Programacin avanzada en .NET con C#

Servicio de Informtica

AJAX

Familiarizarse con Ajax

Introduccin
El modelo estndar de trabajo hasta ahora con ASP.NET ha sido utilizar el modelo postback conde las pginas estn perpetuamente reenvindose al servidor web y regenerndose. Esto conlleva la desventaja de que se reenvan todos los datos al servidor, adems de un incmodo parpadeo. La nueva generacin de aplicaciones web utiliza un conjunto de prcticas de diseo y tecnologas conocidas como Ajax cuya caracterstica fundamental es la capacidad para actualizar parte de la pgina, mientras que deja el resto intacto. AJAX son las siglas de Asynchronous JavaScript And XML. No es un lenguaje de programacin sino un conjunto de tecnologas (HTML-JavaScript-CSS-DHTML-PHP/ASP.NET/JSP-XML) que nos permiten hacer pginas de internet ms interactivas. La caracterstica fundamental de AJAX es permitir actualizar parte de una pgina con informacin que se encuentra en el servidor sin tener que refrescar completamente la pgina. De modo similar podemos enviar informacin al servidor. Vamos a sorprendernos al ver que ASP.Net esconde la complejidad de Ajax y permite una fcil transicin entre aplicaciones web tradicionales y el nuevo modelo.

Relacin de controles de AJAX

Control ScriptManager El control ScriptManager administra el script de cliente de las pginas web ASP.NET habilitadas para AJAX. De forma predeterminada, el control ScriptManager registra el script de Microsoft Ajax Library con la pgina. Esto permite al script de cliente usar las extensiones del sistema de tipos y admitir caractersticas como la representacin parcial de pginas y las llamadas a servicios Web. Ms adelante veremos cmo ampliar el javascript de manera que slo acte en la parte de pgina que se carga por AJAX y los posibles usos. Hay una propiedad a destacar: el tiempo que debe esperar la pgina de ASP.NET que hace la llamada antes de dar un timeScriptOut. Por defecto son 90 segundos. Si deseamos ampliar este tiempo usaremos:
2

Programacin avanzada en .NET con C#

Servicio de Informtica

AJAX
AsyncPostBackTimeOut="36000"

Donde 36000 son segundos. Ahora dejamos que el timeScriptOut lo del IIS.

Control ScriptManagerProxy El control ScriptManagerProxy permite que los componentes anidados, como pginas de contenido (content pages) y controles de usuario, agreguen a las pginas referencias a scripts y servicios cuando ya se ha definido un control ScriptManager en un elemento primario (como por ejemplo en un master page). Una pgina web slo puede contener un control ScriptManager, bien de forma directa en la propia pgina, o de forma indirecta en un componente anidado o primario. El control ScriptManagerProxy permite agregar scripts y servicios a pginas de contenido y controles de usuario donde la pgina maestra o la pgina host ya contienen un control ScriptManager. El control ScriptManagerProxy requiere configuracin especfica en un archivo web.config para funcionar correctamente. Si intenta trabajar con este control y el sitio web no contiene el archivo web.config necesario, los errores aparecen en la vista Diseo de la pgina donde podra haber aparecido el control. En la vista Diseo, si hace clic en el control que est en ese estado, Microsoft Expression Web le ofrecer la opcin de crear o actualizar el archivo web.config.

Control UpdatePanel Los UpdatePanel permiten generar aplicaciones web enriquecidas y centradas en el cliente. Estos controles permiten actualizar las partes seleccionadas de una pgina en lugar de actualizar toda la pgina con una devolucin de datos. Esto se conoce como actualizacin parcial de la pgina. Una pgina web ASP.NET que contiene un control ScriptManager (esto es obligatorio) y uno o varios controles UpdatePanel puede participar automticamente en actualizaciones parciales de la pgina, sin un script de cliente personalizado. Ver ejemplo 1.

Programacin avanzada en .NET con C#

Servicio de Informtica

AJAX
Distinguimos 2 tipos de disparadores segn desde donde acten: Disparador dentro del updatePanel. Simplemente:
protected void BotonDentro_Click(object sender, EventArgs e) { Thread.Sleep(10000); Foto.ImageUrl = "foto.jpg"; }

Disparador fuera de updatePanel.

Programacin avanzada en .NET con C#

Servicio de Informtica

AJAX
Ver ejemplo 2. Distinguimos 2 tipos de disparadores fuera de updatePanel segn cmo acten:

Los disparadores pueden ser asncronos a sncronos. Lo normal es crear disparadores asncronos (AsyncPostBackTrigger). Si creamos un disparador sncrono (PostBackTrigger) lo que conseguimos es hacer un postback normal sobre la misma pgina actuando tambin dentro del UpdatePanel. Esto es interesante con controles del tipo FileUpload, puesto que solo funcionaran si usamos el trigger PostBackTrigger. Ver ejemplo 3. Existe una propiedad importante: UpdateMode. UpdateMode puede valer1: Always: el contenido del UpdatePanel ser siempre ser renderizado cada vez que se invoque un postback, independientemente que sea el mismo UpdatePanel. Conditional: el UpdatePanel solo se renderizara cuando en los siguientes escenarios: un control hijo del UpdatePanel invoca un postback, se registra un trigger a evento de algn control que no se encuentra fuera del UpdatePanel, se llama al mtodo Update del control UpdatePanel manual mente.

Ver ejemplo 4.

http://www.frameworkla.net/?post=Modos+de+actualizaci%C3%B3n+del+UpdatePanel#/Post/Modos% 20de%20actualizaci%C3%B3n%20del%20UpdatePanel
5

Programacin avanzada en .NET con C#

Servicio de Informtica

AJAX
Control UpdateProgress Si una pgina contiene controles UpdatePanel tambin puede incluir controles UpdateProgress para mantener a los usuarios informados sobre el estado de las actualizaciones parciales de pgina. Puede usar un control UpdateProgress de dos formas diferentes: una para representar el progreso de las actualizaciones parciales de la pgina entera y otra para representar el progreso de un solo control UpdatePanel. Ms adelante veremos con inyectar javascript en estos controles. Ver ejemplo 2.

Control Timer El control Timer de Microsoft Ajax realiza postbacks a intervalos definidos. Si utiliza el control Timer con un control UpdatePanel, puede habilitar actualizaciones parciales de pgina en un intervalo definido. Tambin puede utilizar el control Timer para enviar toda la pgina. Tambin se puede utilizar este control como disparador (<trigger>) de uno o varios UpdatePanels. Ver ejemplo 4.

Ejemplos
Ejemplo 1 (Update sencillo)

Crea un nuevo proyecto web y un nuevo elemento (un nuevo web form). Crea la estructura que se muestra. En ella puedes observar: Un ScriptManager. Un label (ID=fuera), una caja de texto (ID=TextFuera), un label de resultado (ID=ResultadoFuera) y un botn (ID=BotonFuera).

Programacin avanzada en .NET con C#

Servicio de Informtica

AJAX
Un separador (<hr>) Un panel con fondo gris y borde. Dentro del panel hay un updatePanel. Dentro de updatePanel ponemos: Un label (ID=dentro), una caja de texto (ID=TextDentro), un label de resultado (ID=ResultadoDentro) y un botn (ID=BotonDentro). Dentro de updatePanel ponemos una imagen pequea (para el ejemplo2) (ID=Foto).

En la clase asociada solo utilizamos el evento Page_Load:

protected void Page_Load(object sender, EventArgs e) { this.ResultadoDentro.Text += this.TextDentro.Text; this.ResultadoFuera.Text += this.TextFuera.Text; }

Y al ejecutar vemos la diferencia que hay de usar un botn u otro.

Ejemplo 2 (Update con UpdateProgress y tipos de disparadores) Vamos a cargar el UpdatePanel con un disparador. El objetivo es que al pulsar sobre cualquier botn se cargue una imagen grande y remota que reemplace a la pequea (ID=Foto) que tenemos dentro de UpdatePanel. Para hacer la prueba usamos que simula una tardanza de 10 segundos.
Thread.Sleep(10000);

Una ayuda visual para el usuario de manera que vea que en la pgina est pasando algo lo logramos con un updateProgress.
<asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="UpdatePanel1"> <ProgressTemplate> <asp:Image ID="Image1" runat="server" ImgUrl=cargando.gif /> </ProgressTemplate> </asp:UpdateProgress>

Pero podemos observar que este aviso slo funciona cuando actualizamos el UpdatePanel con el disparador de dentro (BotonDentro). Para que funcione con el otro botn tendremos que recurrir a inyectar Javascript en el ScriptManager tal y cmo se explica ms adelante.

Programacin avanzada en .NET con C#

Servicio de Informtica

AJAX
Dos propiedades a destacar son DisplayAfter que sirve para que UpdateProgress ocupe siempre el mismo espacio y no se contraiga cuando no se llama. O DisplayAfter muy til para evitar molestos parpadeos cuando se usa con un control Timer por ejemplo.

Ejemplo 3 (disparador con FileUpload) La nica forma de hacer que esto funcione:

<form id="form1" runat="server"> <div> <asp:Label ID="Label2" runat="server" Text="Label"> </asp:Label> <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> <asp:UpdatePanel ID="UpdatePanel1" runat="server"> <ContentTemplate> <asp:FileUpload ID="FileUpload1" runat="server" /> <asp:Label ID="Label1" runat="server" Text="Label"> </asp:Label> </ContentTemplate> <Triggers> <asp:PostBackTrigger ControlID="Button1" /> </Triggers> </asp:UpdatePanel> </div> <asp:Button ID="Button1" runat="server" Text="Button" onclick="Button1_Click" /> </form>

Es usando PostBackTrigger. Echando un vistazo a la programacin en C#:

using System; public partial class Default_8 : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e)

Programacin avanzada en .NET con C#

Servicio de Informtica

AJAX
{ Label2.Text = DateTime.Now.ToString(); } protected void Button1_Click(object sender, EventArgs e) { String savePath = @"C:\trabajo\Dropbox\_c_av_2ed\pruebas\ejemplo\"; if (FileUpload1.HasFile) { String fileName = FileUpload1.FileName; savePath += fileName; FileUpload1.SaveAs(savePath); Label1.Text = "Se guard el fichero " + fileName; } else { Label1.Text = "Indica un nombre para el fichero."; } } }

Ejemplo 4 (varios updatePanel y el timer)

Aadimos a nuestro ejemplo otro UpdatePanel.

Aadimos un label: <asp:Label ID="Label1" runat="server" Text="Su

hora: ">

Aadimos otro label: <asp:Label ID="LaHora" runat="server" Text=""> Dentro aadimos un control Timer que funcione cada 600 milisegundos. Haciendo doble click sobre el control Timer creamos el evento que se deber ejecutar cada 600 milisegundos, que muestre la hora en el label LaHora.
LaHora.Text = DateTime.Now.ToString();

Programacin avanzada en .NET con C#

Servicio de Informtica

AJAX
<asp:Panel ID="Panel2" runat="server" BackColor="#99CCFF"> <asp:UpdatePanel ID="UpdatePanel2" runat="server"> <ContentTemplate> <asp:Label ID="Label1" runat="server" Text="Su hora: </asp:Label> <asp:Label ID="LaHora" runat="server" Text=""> </asp:Label> <asp:Timer ID="Timer1" runat="server" Interval="600" ontick="Timer1_Tick"></asp:Timer> </ContentTemplate> </asp:UpdatePanel>

">

Observar el comportamiento de la pgina. Cambiar la propiedad UpdateMode en ambos UpdatePanels a condicional y volver a observar cmo cambia el comportamiento.

Anidando UpdatePanels2.
En algunos escenarios, la anidacin de los controles UpdatePanel permite proporcionar funcionalidad de interfaz de usuario que sera difcil proporcionar de otra forma. Los paneles anidados son tiles si desea actualizar separadamente regiones concretas de la pgina y actualizar al mismo tiempo varias regiones. Esto se puede lograr si establece la propiedad UpdateMode de los controles externo y anidado en Conditional. De esta forma, el panel externo no actualiza la regin de su pgina si slo se actualiza el panel interno. Sin embargo, si se actualiza el panel externo, tambin se actualizan los paneles anidados.

Ejemplo 5

http://msdn.microsoft.com/es-es/library/bb398867.aspx
10

Programacin avanzada en .NET con C#

Servicio de Informtica

AJAX
Anidamos 2 updatePanels: Ambos tendrn la propiedad de UpdateMode a Conditional. El de arriba se llamar updatePanelSuperior y contiene una imagen, un label y un button, adems del otro updatePanel. El de abajo se llamar updatePanelInferior y contiene una imagen, un label y un button.

Se han aadido adems 3 updateProgress, uno sin asociar a nada, otro asociado a UpdatePanelSuperior y otro a UpdatePanelInferior.

Ya podemos aadir programacin:

protected void ButtonInferior_Click(object sender, EventArgs e) { programacion(); } protected void ButtonSuperior_Click(object sender, EventArgs e) { programacion(); } private void programacion() { Thread.Sleep(1000); ImageSuperior.ImageUrl = "img/foto.jpg"; ImageSuperior.Width = 600; HoraSuperior.Text = DateTime.Now.ToString(); ImageInferior.ImageUrl = "img/foto2.jpg"; ImageInferior.Width = 600; HoraInferior.Text = DateTime.Now.ToString(); }

Si pulsamos sobre el botonInferior:

11

Programacin avanzada en .NET con C#

Servicio de Informtica

AJAX

Si pulsamos sobre el superior:

12

Programacin avanzada en .NET con C#

Servicio de Informtica

AJAX

Instrucciones para el control de llamadas asncronas Para comprobar si la pgina est haciendo un postback usamos:
protected void Page_Load(object sender, EventArgs e) { if (IsPostBack) { programacion(); } }

Para comprobar que el postback es asncrono, entonces usamos:

protected void Page_Load(object sender, EventArgs e) { if (ScriptManager.GetCurrent(this).IsInAsyncPostBack) { programacion(); } }

Tambin podemos forzar que un updatePanel se actualice usando update():

private void programacion()

13

Programacin avanzada en .NET con C#

Servicio de Informtica

AJAX
{ Thread.Sleep(10000); ImageSuperior.ImageUrl = "img/foto.jpg"; ImageSuperior.Width = 600; HoraSuperior.Text = DateTime.Now.ToString(); ImageInferior.ImageUrl = "img/foto2.jpg"; ImageInferior.Width = 600; HoraInferior.Text = DateTime.Now.ToString(); UpdatePanelSuperior.Update(); }

Ejercicio 1.
A partir de estas clases que se te entregan resuelve el problema.

Se pide una web que muestre en un primer momento:

14

Programacin avanzada en .NET con C#

Servicio de Informtica

AJAX

Si seleccionamos una localizacin se aplica un filtro de manera que las personas que se muestran son las que trabajan en esa localizacin. Se pide que no se recargue la pgina entera.

Si seleccionamos una persona se muestra la ficha de la persona. Se pide que no se recargue la pgina entera.

Suponemos que la carga de los datos acarrea algo de tiempo. Para que al pulsar la pgina no de la sensacin de no hacer nada se piden 3 indicadores de progreso: Cuando la pgina est haciendo algo Cuando se estn actualizando las personas o la ficha de persona. Cuando se est actualizando la ficha de persona.

Se ha asociado un pgina CSS para cuidar el formato. Para que un UpdateProgress se pueda poner a la altura de un label se debe meter en un panel y asociarle un estilo que tenga float: left. Una vez terminada enviar por mail en un fichero comprimido llamado Nombre_Ajax01 para la evaluacin del curso.

15

Programacin avanzada en .NET con C#

Servicio de Informtica

AJAX

Uso de AJAX Avanzado3

Si en una pgina normal quisiramos inyectar algo de cdigo javascript que se ejecutar al arrancar la pgina usaramos:
protected void Page_Load(object sender, EventArgs e) { string _script = ""; _script += "alert('Ejecutado');"; Page.ClientScript.RegisterStartupScript( this.GetType(), "myscript", _script, true); }

Si usamos AJAX este cdigo slo se ejecutara una vez. Pero y si quisiramos ejecutar una funcin de javascript cada vez se ejecutara un AJAX? Esta funcin se ejecutar al cargar la pgina y cada vez que usemos AJAX:
protected void Page_Load(object sender, EventArgs e) { string _script = ""; _script += "alert('Ejecutado');"; ScriptManager.RegisterStartupScript( this,this.GetType(),"myscript",_script,true); }

Esta funcin se ejecutar SOLO al usar AJAX:

protected void Page_Load(object sender, EventArgs e) { if (Page.IsPostBack) { string _script = ""; _script += "$get('Resultado').innerHTML += 'Ejecutado';"; ScriptManager.RegisterStartupScript( this, this.GetType(), "myscript", _script, true); } }

Ejemplo 5 (actualizar un control fuera del UpdatePanel):

Dada esta pgina:

http://msdn.microsoft.com/es-es/magazine/cc163354.aspx
16

Programacin avanzada en .NET con C#

Servicio de Informtica

AJAX

Buscamos que cada vez que ocurra una actualizacin AJAX se refleje este cambio en una etiqueta resultado que est fuera de los UpdatePanel. Este es el cdigo asociado:
public partial class Default_5 : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { if (Page.IsPostBack) { string _script = ""; _script += "$get('Resultado').innerHTML += 'Ejecutado';"; ScriptManager.RegisterStartupScript( this, this.GetType(), "myscript", _script, true); } } protected void ButtonArriba_Click(object sender, EventArgs e) { Thread.Sleep(1000); txtArriba.Text += "Pulsado arriba"; } protected void ButtonAbajo_Click(object sender, EventArgs e) { Thread.Sleep(1000); txtAbajo.Text += "Pulsado abajo"; } }

Pero nuestro objetivo no es que aparezca cualquier texto, sino que ponga un texto personalizado en funcin de lo que ha actualizado. Entonces necesitamos por un lado hacer la llamada a una funcin de Javascript y por otro lado tener registrado el cdigo de Javascript. Para hacer la llamada usamos ScriptManager1.RegisterDataItem:
protected void ButtonArriba_Click(object sender, EventArgs e) { Thread.Sleep(1000); txtArriba.Text += "Pulsado arriba"; ScriptManager1.RegisterDataItem(Resultado, txtArriba.Text); }

17

Programacin avanzada en .NET con C#

Servicio de Informtica

AJAX
Resultado es el nombre del control que se pasa a Javascript y txtArriba.Text es el
valor que estamos pasando, en este caso un string.

Por otro lado creamos un fichero .js (mi.js) con el cdigo Javascript que consideramos necesario. En este caso buscamos en el cdigo el ID resultado e insertamos como contenido html el que me llega en el array args
Sys.WebForms.PageRequestManager.getInstance().add_pageLoading(MiFuncio n); function MiFuncion(sender,args){ $get('Resultado').innerHTML = args.get_dataItems()['Resultado']; return; }

Y se lo aadimos a nuestra pgina:

<asp:ScriptManager ID="ScriptManager1" runat="server"> <Scripts> <asp:ScriptReference Path="mi.js" /> </Scripts> </asp:ScriptManager>

Ejemplo 6 (Autoarranque y barra de progreso por programacin):

Puede ocurrir que nuestra pgina sea extremadamente pesada de cargar y deseamos mostrar un pequeo mensaje al usuario mientras que el resto de la pgina se carga. Para ello deseamos que un UpdatePanel se ejecute nada ms arrancar la pgina Cmo lo hacemos? Necesitamos, como en el ejemplo 5 un .js.
Sys.WebForms.PageRequestManager.getInstance(). add_initializeRequest(Inicia); Sys.WebForms.PageRequestManager.getInstance(). add_endRequest(Finaliza); var elementoPostBack; function Inicia(sender, args) { elementoPostBack = args.get_postBackElement().id; if (elementoPostBack == 'ButtonArriba') $get('UpdateProgressArriba').style.display = 'block'; } function Finaliza(sender, args) { if (elementoPostBack == 'ButtonArriba') $get('UpdateProgressArriba').style.display = 'none'; }

18

Programacin avanzada en .NET con C#

Servicio de Informtica

AJAX
Y en el .cs
public partial class Default_6 : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { Page.ClientScript.RegisterStartupScript(this.GetType(), "xx", "$get('ButtonArriba').click();", true); } protected void ButtonArriba_Click(object sender, EventArgs e) { Thread.Sleep(10000); txtArriba.Text += "Pulsado arriba"; } }

Otra forma de autoarrancar sera en lugar de Page.ClientScript.RegisterStartupScript(this.GetType(), "xx", "$get('ButtonArriba').click();", true); Sera:
Page.ClientScript.RegisterStartupScript(this.GetType(), "xx", " __doPostBack('ButtonArriba','Hola');", true);

Donde el primer argument sera el disparador (en nuestro caso ButtonArriba) y el segundo seran los argumentos. Para rescatar los argumentos desde C#:
protected void ButtonArriba_Click(object sender, EventArgs e) { string _argumento = Request.Params.Get("__EVENTARGUMENT"); txtArriba.Text += _argumento; }

Para ms informacin: http://aspalliance.com/895_Understanding_the_JavaScript___doPostBack_Function.all

Para ver el resto de los miembros de la clase de Javascript

Sys.WebForms.PageRequestManager

http://msdn.microsoft.com/es-es/library/bb311028.aspx

Cancelacin de actualizaciones de UpdatePanel

El evento pageLoaded es uno de los que desencadena la clase PageRequestManager cuando un UpdatePanel regresa al servidor para actualizar su contenido. Otro evento importante que

19

Programacin avanzada en .NET con C#

Servicio de Informtica

AJAX
desencadena PageRequestManager es initializeRequest, que tiene lugar antes de que se produzca una devolucin de llamada asincrnica. El segundo parmetro que se transmite a un controlador de initializeRequest es un objeto del tipo initializeRequestEventArgs. Este objeto contiene un mtodo get_postBackElement que identifica el botn o el elemento que ha desencadenado la actualizacin. Tambin dispone de un mtodo set_cancel que se puede usar para cancelar una devolucin de llamada antes de que ocurra. Este es un ejemplo del mtodo set_cancel en accin:
<script type=text/javascript> var prm = Sys.WebForms.PageRequestManager.getInstance(); prm.add_initializeRequest(inicia); function inicia(sender, args) { args.set_cancel(!confirm(Seguro?)); } </script>

En este ejemplo, antes de que se ejecute una devolucin de llamada, un controlador de intializeRequest abre un cuadro de confirmacin que pregunta al usuario si debe continuar la actualizacin. Al hacer clic en Cancelar en el cuadro de confirmacin, se transfiere true a set_cancel, lo que detiene en seco la devolucin de llamada. En la vida real, probablemente no le interesa pedir confirmacin al usuario antes de permitir que contine una actualizacin pero podra ser til tener la posibilidad de cancelar una actualizacin en funcin de las condiciones que existan en otras partes de la aplicacin.

Varios UpdatePanels
Una pgina puede contener varios UpdatePanels. De forma predeterminada, cuando se actualiza un UpdatePanel en una pgina, los dems UpdatePanel de la pgina tambin se actualizan. A veces esto ser lo que quiera pero, pero con frecuencia, no necesitar que se actualicen todos los UpdatePanel como respuesta a la actualizacin de otros UpdatePanel. Puede elegir las instancias de UpdatePanel que desee actualizar (y cundo) si establece en "Condicional" la propiedad de UpdateMode de cada control UpdatePanel de la pgina. A continuacin, cuando se actualice un UpdatePanel y ste llame a un controlador de eventos del cliente, llame a UpdatePanel.Update en los dems paneles que desee actualizar. De este modo se reduce la carga en el servidor, al disminuir el nmero de controles que se representan, y se reduce el volumen de datos de la respuesta porque los UpdatePanel que no se actualicen no agregarn nada a la respuesta.

20

Programacin avanzada en .NET con C#

Servicio de Informtica

AJAX

Ejercicio 2.
Crea una pgina con un texto introductorio que al arrancar cargue por AJAX 3 imgenes remotas y que las muestre. Debe aparecer abajo un control Label que indique el tiempo que ha durado la carga (se usa el objeto System.Diagnostics.Stopwatch). Adems, mientras se est cargando aparecer un mensaje de cargando. Una vez terminada enviar por mail en un fichero comprimido llamado Nombre_Ajax02 para la evaluacin del curso.

21

Programacin avanzada en .NET con C#

Servicio de Informtica

AJAX

AJAX Control ToolsKit4

ToolsKit contiene una serie de controles Web y extendedores con los que podremos utilizar las avanzadas caractersticas de ASP.NET AJAX sin ms que un arrastre de ratn. Del mismo modo, con su descarga disponemos de ejemplos de uso, as como del propio cdigo fuente de los controles. Vamos a distinguir entre controles Web y extendedores, donde los primeros tienen una entidad por s mismos, mientras que los segundos nicamente aaden un comportamiento a un control Web existente. Se trata de una serie de pequeas funcionalidades que cualquier webmaster, en su historia de programador, ha utilizado o deseado para sus Webs. La diferencia ahora es que los ejemplos son 100% AJAX y usarlos no exige conocimiento alguno sobre AJAX, javascript o XML.

Para instalar: Desde la Web donde se centraliza el trabajo sobre el ASP.NET AJAX Control Toolkit, en su apartado de descargas: http://ajaxcontroltoolkit.codeplex.com/releases/view/74023 Podemos elegir entre descargarnos o no el cdigo fuente junto con el resto del Kit. Nosotros elegiremos la opcin en que lo tiene. Seguiremos a continuacin los siguientes pasos: 1.- Aceptar los trminos y condiciones tras haberlos ledo y guardar el archivo AjaxControlToolkit.zip en nuestro ordenador. 2.- Descomprimir el fichero. Podemos observar los directorios: en uno se ubica el cdigo fuente, en otro su correspondiente binario, templates, etc. La carpeta SampleWebSite contiene un proyecto con ejemplos especficos de cada uno de los controles que componen esta versin del ASP.NET AJAX Control Toolkit. 3.- Ahora iniciemos el Visual Studio. Elegimos crear un nuevo WebSite. 4.- Vamos a aadir los controles del ASP.NET AJAX Control Toolkit a nuestra caja de herramientas. Para ello, una vez dentro de cualquiera de nuestras pginas (por ejemplo default.aspx), presionamos el botn derecho sobre nuestra caja de herramientas para elegir Add Tab (agregar ficha). Con ello, crearemos un tab especfico en nuestra caja de herramientas

http://www.es-asp.net/tutoriales-asp-net/tutorial-0-5312/asp-net-ajax-control-toolkit.aspx
22

Programacin avanzada en .NET con C#

Servicio de Informtica

AJAX
para el ASP.NET AJAX Control Toolkit. Y le llamamos (por ejemplo) ASP.NET AJAX Control Toolkit. 5.- Desplegamos nuestro nuevo tab y de nuevo recurrimos al botn derecho y elegimos Choose tems...(elegir elementos) Desde el botn de Browse... (examinar) buscamos la carpeta donde hemos descomprimido nuestro ASP.NET AJAX Control Toolkit. Elegimos AjaxControlToolkit.dll y presionamos sobre open. Y a los tenemos instalados. Estos controles van desde un simple botn con una alerta asociada, hasta un complejo panel que podemos arrastrar por la pantalla; en ambos casos, mandando y recogiendo informacin entre el cliente y el servidor sin ningn tipo de recarga de pgina. Su uso har que nuestra Web sea mucho ms atractiva y simptica al usuario a la par que potente y efectiva. Para saber que es y cmo funciona acudiremos a la web http://www.es-asp.net/tutoriales-asp-net/tutorial-5312-5317/controles-y-extendedores.aspx http://www.asp.net/ajaxlibrary/AjaxControlToolkitSampleSite/asyncfileupload/asyncfileuploa d.aspx

(Ejemplo) ValidatorCalloutExtender
El ValidatorCallout es un extendedor de cualquier tipo de validador (RequiredFieldValidator, RangeValidator, CustomValidator...), con el que conseguimos una vista mucho ms amable de los tpicos validadores. No tenemos que aplicar los validadores como lo hemos hecho hasta ahora, pero con el detalle de aadirles el atributo Display=None y asignarles el ValidatorCalloutExtender. Para que funcione correctamente, en lugar de poner
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>

hay que poner

<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server"></asp:ToolkitScriptManager>

23

Programacin avanzada en .NET con C#

Servicio de Informtica

AJAX

Propiedades TargetControlID: ID del Validador que se est extendiendo. Width: Anchura del Callout HighlightCssClass: Opcionalmente se puede asignar una clase CSS sobre el Callout. WarningIconImageUrl: Url del icono que muestra la alerta. Si no se especifica se muestra el que viene por defecto. CloseImageUrl: Imagen que produce el cierre del Callout

Ejemplo 7 (Callout)
<body> <form id="form1" runat="server"> <div> <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server"> </asp:ToolkitScriptManager> <asp:TextBox ID="TextBox1" runat="server"> </asp:TextBox> <asp:RegularExpressionValidator ID="RegularExpressionValidator1" runat="server" ErrorMessage="Un nmero por favor" ControlToValidate="TextBox1" Display="None" ValidationExpression="[0-9]+"> </asp:RegularExpressionValidator> <asp:ValidatorCalloutExtender ID="ValidatorCalloutExtender1" runat="server" TargetControlID="RegularExpressionValidator1" </asp:ValidatorCalloutExtender> </div> </form> </body>

>

24