Programación avanzada en .NET con C# Servicio de Informática Ejercicios AJAX Ejercicio 1. A partir de estas clases que se te entregan resuelve el problema. Se pide una web que muestre en un primer momento: 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. 1 Programación avanzada en .NET con C# Servicio de Informática Ejercicios AJAX Si seleccionamos una persona se muestra la ficha de la persona. Se pide que no se recargue la página entera. 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. 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. Chuleta Ajax Avanzado1 Para verificar si el postback es asíncrono ScriptManager.GetCurrent(this).IsInAsyncPostBack Javascript que se ejecuta al arrancar la página usaríamos: Page.ClientScript.RegisterStartupScript( Javascript cada vez se ejecuta un AJAX ScriptManager.RegisterStartupScript( Para ver el resto de los miembros de la clase de Javascript this.GetType(), "myscript", _script, true); this,this.GetType(),"myscript",_script,true); http://msdn.microsoft.com/es-s/library/bb311028.aspx Sys.WebForms. PageRequestManager 1 http://msdn.microsoft.com/es-es/magazine/cc163354.aspx 2 Programación avanzada en .NET con C# Servicio de Informática Ejercicios AJAX Llamadas a Javascript al terminar de actualizar. C# ScriptManager1.RegisterDataItem(Resultado, txtArriba.Text); ---- JavaScript Sys.WebForms.PageRequestManager. getInstance().add_pageLoading(MiFuncion); function MiFuncion(sender,args){ $get('Resultado').innerHTML = args.get_dataItems()['Resultado']; } Uso de Javasript al comenzar / acabar la llamada asíncrona JavaScript Sys.WebForms.PageRequestManager.getInstance(). add_initializeRequest(Inicia); Sys.WebForms.PageRequestManager.getInstance(). Usado cuando un control se convierte en disparador add_endRequest(Finaliza); var elementoPostBack; function Inicia(sender, args) { elemPostBack = args.get_postBackElement().id; if (elemPostBack == 'ButtonArriba') $get('UpdateProgressArriba').style.display=’block'; } function Finaliza(sender, args) { if (elemPostBack == 'ButtonArriba') $get('UpdateProgressArriba').style.display='none'; } Cancelación de UpdatePanel var prm = Sys.WebForms.PageRequestManager.getInstance(); prm.add_initializeRequest(inicia); function inicia(sender, args) { args.set_cancel(!confirm(‘¿Seguro?’)); } AjaxToolsKit http://ajaxcontroltoolkit.codeplex.com/releases/view/74023 3 Programación avanzada en .NET con C# Servicio de Informática Ejercicios AJAX Page.ClientScript.RegisterStartupScript(this.GetType(), "xx", "$get('ButtonArriba').click();", true); AutoArranque Page.ClientScript.RegisterStartupScript(this.GetType(), "xx", " __doPostBack('ButtonArriba','Hola');”", true); Recuperar argumento: string _argumento = Request.Params.Get("__EVENTARGUMENT"); 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. 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 número por favor" ControlToValidate="TextBox1" Display="None" ValidationExpression="[0-9]+"> </asp:RegularExpressionValidator> <asp:ValidatorCalloutExtender ID="ValidatorCalloutExtender1" runat="server" TargetControlID="RegularExpressionValidator1" </asp:ValidatorCalloutExtender> </div> </form> </body> 4 >