Tema AJAX

Programación avanzada en .NET con C#
Servicio de Informática
1
AJAX
Índice
Familiarizarse con Ajax .................................................................................................................. 2
Introducción .............................................................................................................................. 2
Relación 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 asíncronas ........................................................ 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 programación): ....................................... 18
Cancelación de actualizaciones de UpdatePanel .................................................................... 19
Varios UpdatePanels ............................................................................................................... 20
Ejercicio 2. ................................................................................................................................... 21
AJAX Control ToolsKit .................................................................................................................. 22
ValidatorCalloutExtender ........................................................................................................ 23
Ejemplo 7 (Callout) .................................................................................................................. 24

Programación avanzada en .NET con C#
Servicio de Informática
Familiarizarse con Ajax
2
AJAX
Introducción
El modelo estándar de trabajo hasta ahora con ASP.NET ha sido utilizar el modelo postback
conde las páginas están perpetuamente reenviándose al servidor web y regenerándose. Esto
conlleva la desventaja de que se reenvían todos los datos al servidor, además de un incómodo
parpadeo.
La nueva generación de aplicaciones web utiliza un conjunto de prácticas de diseño y
tecnologías conocidas como Ajax cuya característica fundamental es la capacidad para
actualizar parte de la página, mientras que deja el resto intacto.
AJAX son las siglas de Asynchronous JavaScript And XML. No es un lenguaje de programación
sino un conjunto de tecnologías (HTML-JavaScript-CSS-DHTML-PHP/ASP.NET/JSP-XML) que nos
permiten hacer páginas de internet más interactivas.
La característica fundamental de AJAX es permitir actualizar parte de una página con
información que se encuentra en el servidor sin tener que refrescar completamente la página.
De modo similar podemos enviar información al servidor.
Vamos a sorprendernos al ver que ASP.Net esconde la complejidad de Ajax y permite una fácil
transición entre aplicaciones web tradicionales y el nuevo modelo.
Relación de controles de AJAX
Control ScriptManager
El control ScriptManager administra el script de
cliente de las páginas web ASP.NET habilitadas
para AJAX. De forma predeterminada, el control
ScriptManager registra el script de Microsoft Ajax
Library con la página. Esto permite al script de
cliente usar las extensiones del sistema de tipos y
admitir características como la representación
parcial de páginas y las llamadas a servicios Web.
Más adelante veremos cómo ampliar el javascript
de manera que sólo actúe en la parte de página
que se carga por AJAX y los posibles usos.
Hay una propiedad a destacar: el tiempo que debe esperar la página de ASP.NET que hace la
llamada antes de dar un timeScriptOut. Por defecto son 90 segundos. Si deseamos ampliar
este tiempo usaremos:

Programación avanzada en .NET con C#
Servicio de Informática
3
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 páginas de
contenido (content pages) y controles de usuario, agreguen a las páginas 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 página web sólo puede contener un control
ScriptManager, bien de forma directa en la propia página, o de forma indirecta en un
componente anidado o primario. El control ScriptManagerProxy permite agregar scripts y
servicios a páginas de contenido y controles de usuario donde la página maestra o la página
host ya contienen un control ScriptManager.
El control ScriptManagerProxy requiere configuración específica 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 Diseño de la página donde
podría haber aparecido el control. En la vista Diseño, si hace clic en el control que está en ese
estado, Microsoft Expression Web le ofrecerá la opción de crear o actualizar el archivo
web.config.
Control UpdatePanel
Ver ejemplo 1.
Los UpdatePanel permiten generar aplicaciones web
enriquecidas y centradas en el cliente. Estos controles
permiten actualizar las partes seleccionadas de una página
en lugar de actualizar toda la página con una devolución de
datos. Esto se conoce como actualización parcial de la
página. Una página web ASP.NET que contiene un control
ScriptManager (esto es obligatorio) y uno o varios controles
UpdatePanel puede participar automáticamente en
actualizaciones parciales de la página, sin un script de
cliente personalizado.

Programación avanzada en .NET con C#
Servicio de Informática
4
AJAX
Distinguimos 2 tipos de disparadores según desde donde actúen:
- Disparador dentro del updatePanel. Simplemente:
protected void BotonDentro_Click(object sender, EventArgs e)
{
Thread.Sleep(10000);
Foto.ImageUrl = "foto.jpg";
}
- Disparador fuera de updatePanel.

Programación avanzada en .NET con C#
Servicio de Informática
Ver ejemplo 2.
5
AJAX
Distinguimos 2 tipos de disparadores fuera de updatePanel según cómo actúen:
Los disparadores pueden ser asíncronos a síncronos.
Lo normal es crear disparadores asíncronos (AsyncPostBackTrigger).
Si creamos un disparador síncrono (PostBackTrigger) lo que conseguimos es hacer un postback
normal sobre la misma página actuando también 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 valer 1 :
• 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 algún
control que no se encuentra fuera del UpdatePanel, se llama al método Update del
control UpdatePanel manual mente.
Ver ejemplo 4.
1
http://www.frameworkla.net/?post=Modos+de+actualizaci%C3%B3n+del+UpdatePanel#/Post/Modos%
20de%20actualizaci%C3%B3n%20del%20UpdatePanel

Programación avanzada en .NET con C#
Servicio de Informática
Control UpdateProgress
6
AJAX
Si una página contiene controles UpdatePanel también puede incluir controles
UpdateProgress para mantener a los usuarios informados sobre el estado de las
actualizaciones parciales de página.
Puede usar un control UpdateProgress de dos formas diferentes: una para representar el
progreso de las actualizaciones parciales de la página entera y otra para representar el
progreso de un solo control UpdatePanel.
Más 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 página en un
intervalo definido. También puede utilizar el control Timer para enviar toda la página.
También se puede utilizar este control como disparador () 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 botón (ID=BotonFuera).

Programación avanzada en .NET con C#
Servicio de Informática
• Un separador ()
7
AJAX
• 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 botón
(ID=BotonDentro).
• Dentro de updatePanel ponemos una imagen pequeña (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 botón 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 botón se cargue una imagen grande y remota que
reemplace a la pequeña (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 página está pasando algo lo
logramos con un updateProgress.
Pero podemos observar que este aviso sólo funciona cuando actualizamos el UpdatePanel con
el disparador de dentro (BotonDentro). Para que funcione con el otro botón tendremos que
recurrir a inyectar Javascript en el ScriptManager tal y cómo se explica más adelante.

Programación avanzada en .NET con C#
Servicio de Informática
Ejemplo 3 (disparador con FileUpload)
La única forma de hacer que esto funcione:
8
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.
Es usando PostBackTrigger.
Echando un vistazo a la programación en C#:
using System;
public partial class Default_8 : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)

Programación avanzada en .NET con C#
Servicio de Informática
}
{
}
9
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)
Añadimos a nuestro ejemplo otro UpdatePanel.
• Añadimos un label:
• Añadimos otro label:
• Dentro añadimos 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();

Programación avanzada en .NET con C#
Servicio de Informática
10
AJAX
Observar el comportamiento de la página. Cambiar la propiedad UpdateMode en ambos
UpdatePanels a condicional y volver a observar cómo cambia el comportamiento.
Anidando UpdatePanels 2.
En algunos escenarios, la anidación de los controles UpdatePanel permite proporcionar
funcionalidad de interfaz de usuario que sería difícil proporcionar de otra forma. Los paneles
anidados son útiles si desea actualizar separadamente regiones concretas de la página 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 región de su página si sólo se actualiza el panel interno. Sin embargo, si
se actualiza el panel externo, también se actualizan los paneles anidados.
Ejemplo 5
2 http://msdn.microsoft.com/es-es/library/bb398867.aspx

Programación avanzada en .NET con C#
Servicio de Informática
Anidamos 2 updatePanels:
11
AJAX
• Ambos tendrán la propiedad de UpdateMode a Conditional.
• El de arriba se llamará updatePanelSuperior y contiene una imagen, un label y un
button, además del otro updatePanel.
• El de abajo se llamará updatePanelInferior y contiene una imagen, un label y un
button.
Se han añadido además 3 updateProgress, uno sin asociar a nada, otro asociado a
UpdatePanelSuperior y otro a UpdatePanelInferior.
Ya podemos añadir programación:
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:

Programación avanzada en .NET con C#
Servicio de Informática
Si pulsamos sobre el superior:
12
AJAX

Programación avanzada en .NET con C#
Servicio de Informática
Instrucciones para el control de llamadas asíncronas
13
AJAX
Para comprobar si la página está haciendo un postback usamos:
protected void Page_Load(object sender, EventArgs e)
{
if (IsPostBack) { programacion(); }
}
Para comprobar que el postback es asíncrono, entonces usamos:
protected void Page_Load(object sender, EventArgs e)
{
if (ScriptManager.GetCurrent(this).IsInAsyncPostBack)
{
programacion();
}
}
También podemos forzar que un updatePanel se actualice usando update():
private void programacion()

Programación avanzada en .NET con C#
Servicio de Informática
{
}
14
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:

Programación avanzada en .NET con C#
Servicio de Informática
15
AJAX
Suponemos que la carga de los datos acarrea algo de tiempo.
Para que al pulsar la página no de la sensación de no hacer
nada se piden 3 indicadores de progreso:
• Cuando la página está haciendo algo
• Cuando se están actualizando las personas o la ficha
de persona.
• Cuando se está actualizando la ficha de persona.
Si seleccionamos una localización se aplica un filtro de
manera que las personas que se muestran son las que
trabajan en esa localización. Se pide que no se recargue la
página entera.
Si seleccionamos una persona se muestra la ficha de la
persona. Se pide que no se recargue la página entera.
Se ha asociado un página 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
evaluación del curso.

Programación avanzada en .NET con C#
Servicio de Informática
Uso de AJAX Avanzado 3
16
AJAX
Si en una página normal quisiéramos inyectar algo de código javascript que se ejecutar al
arrancar la página usaríamos:
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 código sólo se ejecutaría una vez. Pero ¿y si quisiéramos ejecutar una
función de javascript cada vez se ejecutara un AJAX?
Esta función se ejecutará al cargar la página 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 función 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 página:
3 http://msdn.microsoft.com/es-es/magazine/cc163354.aspx

Programación avanzada en .NET con C#
Servicio de Informática
17
AJAX
Buscamos que cada vez que ocurra una actualización AJAX se refleje este cambio en una
etiqueta resultado que está fuera de los UpdatePanel. Este es el código 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 función de lo que ha actualizado.
Entonces necesitamos por un lado hacer la llamada a una función de Javascript y por otro lado
tener registrado el código 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);
}

Programación avanzada en .NET con C#
Servicio de Informática
18
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 código Javascript que consideramos
necesario. En este caso buscamos en el código 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 añadimos a nuestra página:
Ejemplo 6 (Autoarranque y barra de progreso por programación):
Puede ocurrir que nuestra página sea extremadamente pesada de cargar y deseamos mostrar
un pequeño mensaje al usuario mientras que el resto de la página se carga. Para ello deseamos
que un UpdatePanel se ejecute nada más arrancar la página ¿Cómo 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';
}

Programación avanzada en .NET con C#
Servicio de Informática
Y en el .cs
19
AJAX
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 sería en lugar de
Page.ClientScript.RegisterStartupScript(this.GetType(), "xx", "$get('ButtonArriba').click();",
true);
Sería:
Page.ClientScript.RegisterStartupScript(this.GetType(), "xx", "
__doPostBack('ButtonArriba','Hola');”", true);
Donde el primer argument sería el disparador (en nuestro caso ButtonArriba) y el segundo
serían 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 más información:
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
Cancelación 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

Programación avanzada en .NET con C#
Servicio de Informática
20
AJAX
desencadena PageRequestManager es initializeRequest, que tiene lugar antes de que se
produzca una devolución de llamada asincrónica.
El segundo parámetro que se transmite a un controlador de initializeRequest es un objeto del
tipo initializeRequestEventArgs. Este objeto contiene un método get_postBackElement que
identifica el botón o el elemento que ha desencadenado la actualización. También dispone de
un método set_cancel que se puede usar para cancelar una devolución de llamada antes de
que ocurra. Este es un ejemplo del método set_cancel en acción:
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_initializeRequest(inicia);
function inicia(sender, args)
{
args.set_cancel(!confirm(‘¿Seguro?’));
}
En este ejemplo, antes de que se ejecute una devolución de llamada, un controlador de
intializeRequest abre un cuadro de confirmación que pregunta al usuario si debe continuar la
actualización. Al hacer clic en Cancelar en el cuadro de confirmación, se transfiere true a
set_cancel, lo que detiene en seco la devolución de llamada.
En la vida real, probablemente no le interesa pedir confirmación al usuario antes de permitir
que continúe una actualización pero podría ser útil tener la posibilidad de cancelar una
actualización en función de las condiciones que existan en otras partes de la aplicación.
Varios UpdatePanels
Una página puede contener varios UpdatePanels. De forma predeterminada, cuando se
actualiza un UpdatePanel en una página, los demás UpdatePanel de la página también 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 actualización de otros UpdatePanel.
Puede elegir las instancias de UpdatePanel que desee actualizar (y cuándo) si establece en
"Condicional" la propiedad de UpdateMode de cada control UpdatePanel de la página.
A continuación, cuando se actualice un UpdatePanel y éste llame a un controlador de eventos
del cliente, llame a UpdatePanel.Update en los demás paneles que desee actualizar. De este
modo se reduce la carga en el servidor, al disminuir el número de controles que se
representan, y se reduce el volumen de datos de la respuesta porque los UpdatePanel que no
se actualicen no agregarán nada a la respuesta.

Programación avanzada en .NET con C#
Servicio de Informática
21
AJAX
Ejercicio 2.
Crea una página con un texto introductorio que al arrancar cargue por AJAX 3 imágenes
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).
Además, mientras se esté cargando aparecerá un mensaje de “cargando”.
Una vez terminada enviar por mail en un fichero comprimido llamado Nombre_Ajax02 para la
evaluación del curso.

Programación avanzada en .NET con C#
Servicio de Informática
AJAX Control ToolsKit 4
22
AJAX
ToolsKit contiene una serie de controles Web y extendedores con los que podremos utilizar las
avanzadas características de ASP.NET AJAX sin más que un arrastre de ratón. Del mismo modo,
con su descarga disponemos de ejemplos de uso, así como del propio código 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 añaden un comportamiento a
un control Web existente.
Se trata de una serie de pequeñas 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 código fuente junto
con el resto del Kit. Nosotros elegiremos la opción en que lo
tiene. Seguiremos a continuación los siguientes pasos:
1.- Aceptar los términos y condiciones tras haberlos leído y
guardar el archivo AjaxControlToolkit.zip en nuestro ordenador.
2.- Descomprimir el fichero. Podemos observar los directorios:
en uno se ubica el código fuente, en otro su correspondiente
binario, templates, etc. La carpeta “SampleWebSite” contiene
un proyecto con ejemplos específicos de cada uno de los
controles que componen esta versión del ASP.NET AJAX Control
Toolkit.
3.- Ahora iniciemos el Visual Studio. Elegimos crear un nuevo
WebSite.
4.- Vamos a añadir los controles del ASP.NET AJAX Control
Toolkit a nuestra caja de herramientas. Para ello, una vez
dentro de cualquiera de nuestras páginas (por ejemplo
default.aspx), presionamos el botón derecho sobre nuestra caja
de herramientas para elegir Add Tab (agregar ficha). Con ello,
crearemos un tab específico en nuestra caja de herramientas
4 http://www.es-asp.net/tutoriales-asp-net/tutorial-0-5312/asp-net-ajax-control-toolkit.aspx

Programación avanzada en .NET con C#
Servicio de Informática
23
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 botón derecho y elegimos
“Choose ítems...”(elegir elementos) Desde el botón 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 botón con una alerta
asociada, hasta un complejo panel que podemos arrastrar por la pantalla; en ambos casos,
mandando y recogiendo información entre el cliente y el servidor sin ningún tipo de recarga de
página. Su uso hará que nuestra Web sea mucho más atractiva y simpática al usuario a la par
que potente y efectiva.
Para saber que es y cómo 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 más amable de
los típicos validadores.
No tenemos que aplicar los validadores como lo hemos hecho hasta ahora, pero con el detalle
de añadirles el atributo Display=”None” y asignarles el ValidatorCalloutExtender.
Para que funcione correctamente, en lugar de poner
hay que poner

Programación avanzada en .NET con C#
Servicio de Informática
Propiedades
• TargetControlID: ID del Validador que se está extendiendo.
• Width: Anchura del Callout
24
AJAX
• 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)