Programación avanzada en.net con C# Servicio de Informática AJAX

Transcripción

1 Índice Familiarizarse con Ajax... 2 Introducción... 2 Relación de controles de... 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 Ejemplo Instrucciones para el control de llamadas asíncronas Ejercicio Uso de Avanzado Ejemplo 5 (actualizar un control fuera del UpdatePanel): Ejemplo 6 (Autoarranque y barra de progreso por programación): Cancelación de actualizaciones de UpdatePanel Varios UpdatePanels Ejercicio Control ToolsKit ValidatorCalloutExtender Ejemplo 7 (Callout)

2 Familiarizarse con 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. 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 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 Control ScriptManager El control ScriptManager administra el script de cliente de las páginas web ASP.NET habilitadas para. 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 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: 2

3 AsyncPostBackTimeOut="36000" Donde 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. 3

4 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. 4

5 Ver ejemplo 2. 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 de%20actualizaci%C3%B3n%20del%20UpdatePanel 5

6 Control UpdateProgress 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 (<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 botón (ID=BotonFuera). 6

7 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 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. <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 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. 7

8 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 programación en C#: using System; public partial class Default_8 : System.Web.UI.Page protected void Page_Load(object sender, EventArgs e) 8

9 Label2.Text = DateTime.Now.ToString(); protected void Button1_Click(object sender, EventArgs e) String savepath 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: <asp:label ID="Label1" runat="server" Text="Su hora: "> Añadimos otro label: <asp:label ID="LaHora" runat="server" Text=""> 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(); 9

10 <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 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

11 Anidamos 2 updatepanels: 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: 11

12 Si pulsamos sobre el superior: 12

13 Instrucciones para el control de llamadas asíncronas 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() 13

14 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

15 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. 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. 15

16 Uso de Avanzado 3 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 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? Esta función se ejecutará al cargar la página y cada vez que usemos : 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 : 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:

17 Buscamos que cada vez que ocurra una actualización 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); 17

18 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: <asp:scriptmanager ID="ScriptManager1" runat="server"> <Scripts> <asp:scriptreference Path="mi.js" /> </Scripts> </asp:scriptmanager> 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'; 18

19 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 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: dopostback_function.all Para ver el resto de los miembros de la clase de Javascript Sys.WebForms.PageRequestManager 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 19

20 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: <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 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. 20

21 Ejercicio 2. Crea una página con un texto introductorio que al arrancar cargue por 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. 21

22 Control ToolsKit 4 ToolsKit contiene una serie de controles Web y extendedores con los que podremos utilizar las avanzadas características de ASP.NET 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% y usarlos no exige conocimiento alguno sobre, javascript o XML. Para instalar: Desde la Web donde se centraliza el trabajo sobre el ASP.NET Control Toolkit, en su apartado de descargas: 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 Control Toolkit. 3.- Ahora iniciemos el Visual Studio. Elegimos crear un nuevo WebSite. 4.- Vamos a añadir los controles del ASP.NET 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

23 para el ASP.NET Control Toolkit. Y le llamamos (por ejemplo) ASP.NET 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 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 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 <asp:scriptmanager ID="ScriptManager1" runat="server"></asp:scriptmanager> hay que poner <asp:toolkitscriptmanager ID="ToolkitScriptManager1" runat="server"></asp:toolkitscriptmanager> 23

24 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> </div> </form> </body> <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> 24