Documentos de Académico
Documentos de Profesional
Documentos de Cultura
Ajax
Ajax
Ajax
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
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
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.
AJAX
Distinguimos 2 tipos de disparadores segn desde donde acten:
-
AJAX
Ver ejemplo 2.
Distinguimos 2 tipos de disparadores fuera de updatePanel segn cmo acten:
Always: el contenido del UpdatePanel ser siempre ser renderizado cada vez que se
invoque un postback, independientemente que sea el mismo UpdatePanel.
Ver ejemplo 4.
http://www.frameworkla.net/?post=Modos+de+actualizaci%C3%B3n+del+UpdatePanel#/Post/Modos%
20de%20actualizaci%C3%B3n%20del%20UpdatePanel
5
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).
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).
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.
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 programacin en C#:
using System;
public partial class Default_8 : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
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.";
}
}
}
">
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>
">
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
AJAX
Anidamos 2 updatePanels:
Se han aadido adems 3 updateProgress, uno sin asociar a nada, otro asociado a
UpdatePanelSuperior y otro a UpdatePanelInferior.
11
AJAX
12
AJAX
13
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.
14
AJAX
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
AJAX
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);
}
http://msdn.microsoft.com/es-es/magazine/cc163354.aspx
16
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
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;
}
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
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";
}
}
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
http://msdn.microsoft.com/es-es/library/bb311028.aspx
19
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>
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
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
AJAX
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
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>
23
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
>