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

>