Development of structure codes in Turkey

Para empezar a abrir boca con asP.NeT aJaX vamos a reproducir el ejemplo sencillo del capítulo anterior de fundamentos usando asP.NeT. veremos cómo se comporta al tratarse de una aplicación asP.NeT normal y luego lo fácil que es convertirlo en una aplicación aJaX. Nos servirá para conocer los fundamentos de la parte servidora de la aPI de aJaX.

crea un nuevo sitio Web con visual studio y en la página por defecto añade dos controles DropDownList, uno a continuación del otro separados con un par de espacios en blanco. en el primero de ellos habilita el “auto postback” de modo que se genere automáticamente un evento SelectedIndexChanged en el servidor cada vez que se seleccione un elemento diferente de la lista. Usa la opción de editar elementos en su menú de tareas para añadir cuatro categorías: revistas, Blogs, empresas y Libros.

ahora vamos a responder a su evento de selección para introducir en la segunda lista los elementos correspondientes a la categoría seleccionada. haz doble clic en el control DropDownList1 para obtener la definición del manejador de eventos para su evento SelectionIndexChanged y escribe el siguiente código:

Protected Sub DropDownList1_SelectedIndexChanged(ByVal sender As Object, ByVal e As System.EventArgs) Handles DropDownList1. SelectedIndexChanged

Select Case DropDownList1.SelectedValue.ToLower() Case “revistas” DropDownList2.Items.Clear() DropDownList2.Items.Add(New ListItem(“dotNetMania”)) DropDownList2.Items.Add(New ListItem(“MSDN Magazine”)) DropDownList2.Items.Add(New ListItem(“CodeProject”)) Case “blogs” DropDownList2.Items.Clear() DropDownList2.Items.Add(New ListItem(“www.jasoft. org”)) DropDownList2.Items.Add(New ListItem(“www.geeks.ms”)) DropDownList2.Items.Add(New ListItem(“weblogs.asp. net”)) Case “empresas” DropDownList2.Items.Clear() DropDownList2.Items.Add(New ListItem(“Krasis [www. krasis.com]”)) DropDownList2.Items.Add(New ListItem(“Microsoft [www. microsoft.com]”))

DropDownList2.Items.Add(New ListItem(“Plain Concepts [www.plainconcepts.com]”))

Case “libros”

DropDownList2.Items.Clear()

DropDownList2.Items.Add(New ListItem(“Crimen y castigo”))

DropDownList2.Items.Add(New ListItem(“Cien años de soledad”))

DropDownList2.Items.Add(New ListItem(“El Quijote”)) End Select

End Sub

con esto tenemos suficiente para demostrar la diferencia entre una aplicación Web corriente y una con soporte para aJaX.

ejecuta la aplicación pulsando F5 (acepta el diálogo que te avisa que se va a modificar web.config para dar soporte a la depuración) y cuando se abra el navegador juega un poco con la interfaz cambiando la selección en la primera lista.

como puedes comprobar, cada vez que eliges un elemento nuevo en la lista 1, se produce un postback al servidor y al regresar la página, ésta se recarga y muestra los elementos apropiados en la segunda lista. Los efectos molestos de esta aplicación tan sencilla son fáciles de ver:

Durante la recarga de la página se produce un

1. claro parpadeo, correspon-

diente al borrado de la página original y la subsiguiente recarga de ésta con los nuevos valores. si usas Internet explorer además oirás un sonidito (como un “clac”) en cada recarga.

La primera vez que haces una selección normalmente la página tarda un poco 2.

más de lo habitual en ejecutarse. Durante quizá medio segundo el usuario no tiene ni idea de si la acción que ha llevado a cabo en la interfaz (en este caso seleccionar una categoría de la lista) ha tenido efecto o no. en algunas aplicaciones reales en las que el código es más complicado y puede que haya demoras de e/s debido a accesos a bases de datos, a disco o a redes con- gestionadas, las esperas para recibir las respuestas a eventos de servidor pueden tardar incluso varios segundos, durante los cuales el usuario no tiene ni idea de qué está pasando.

Un efecto muy desagradable de los postback y del que muchos programadores 3.

no se percatan es el de las entradas indeseadas en el historial de navegación. en nuestro ejemplo cada vez que seleccionamos un elemento de la lista y se provoca un postback aparece una nueva entrada en la historia del navegador. si el usuario pulsa la flecha para ir a la página anterior irá pasando por cada una de las selecciones que haya hecho en la lista. sin embargo el usuario ha tenido la sensación de estar trabajando todo el tiempo en la misma página. Para él o ella debería ser transparente el hecho de que nosotros por debajo estemos reenviando la página. cuando pulsa el botón de volver a la página anterior lo que un usuario espera es realmente volver a la “pantalla” en la que estuviese previamente, no a los sucesivos pasos de trabajo en la misma página actual. Por supuesto existen excepciones y a veces será necesario todo lo contrario: que incluso en aplicaciones aJaX se creen algunas entradas en el historial. Lo trataremos en otro capítulo con detalle.

vamos a retocar nuestro ejemplo sacándole partido a los controles aJaX que se pueden ver en la primera figura. De momento no explicaremos sus funciones y nos limitaremos a añadirlos sin más. en los siguientes epígrafes analizaremos con detalle cada uno de ellos.

abre la superficie de diseño de la página asPX y desde el panel de herramientas añade un control ScriptManager que encontrarás en el grupo de extensiones aJaX. asegúrate de que el control se encuentra como primer elemento de la página, es decir, arrástralo delante del primer control DropDownList que teníamos anteriormente.

ahora arrastra, justo a continuación del anterior, un control UpdatePanel. al hacerlo verás que aparece una nueva área vacía de poca altura, que es la única pista visual de que se ha arrastrado este último control.

selecciona cada uno de las dos listas desplegables y arrástralas dentro del Up-

datePanel. asegúrate de que quedan ubicadas dentro de éste. como se observa en

la figura, el recuadrado sutil del control UpdatePanel nos permite ver sus límites y saber si los controles se encuentran realmente dentro de él.

Figura 3.- Nuestra aplicación preparada para AJAX con sólo arrastrar dos controles.

Podríamos haber incluido los controles dentro del UpdatePanel también desde el código fuente de la página, en lugar de arrastrándolos, si cambiamos a la vista hTML y nos aseguramos de que sus etiquetas están encerradas dentro de las eti- quetas de tipo <contentTemplate> del panel, como se ve en la figura 4.

Figura 4.- las etiquetas de los controles en el código fuente se encuentran dentro del updatePanel.

Ya está. No es necesario hacer nada más que arrastrar este par de controles. ejecuta de nuevo la aplicación. ahora verás que al seleccionar una categoría en la primera lista la segunda se recarga enseguida con los valores apropiados sin recargar la página. el parpadeo ha desaparecido y en la historia del navegador no aparecen nuevas entradas.

2.- PoSTbAckS PArciAlES y rEPiNTAdoS

PArciAlES dE PÁgiNA

el proceso que se lleva a cabo por debajo en las páginas aJaX como la del ejemplo anterior se denomina postback con repintado parcial de página.

el funcionamiento de una página asP.NeT aJaX no difiere demasiado del de una página asP.NeT normal y corriente. ello es una gran ventaja puesto que no nos obliga a aprender conceptos diferentes o a tratar a las páginas de un modo distinto por el hecho de usar esta tecnología. Lo que ocurre durante un repintado parcial de página (en el que sólo una parte de su interfaz se modifica) es en realidad un

postback completo de la misma. La diferencia con una página normal estriba en que

éste se realiza de manera asíncrona y “por debajo” usando Javascript para solicitar la página y procesar sus resultados. La otra diferencia es que en lugar del contenido completo se devuelve sólo el hTML que compete a los contenidos del UpdatePa-

nel que se va a actualizar. el código Javascript generado automáticamente por el ScriptManager se encarga de gestionar ese resultado y repintar dinámicamente sólo

la parte apropiada de la interfaz, así como actualizar los datos de estado de los controles para subsiguientes recargas de la página.

en el servidor todo esto significa que cuando se produce un evento en un control, aunque se vea afectada sólo una pequeña parte de la página aJaX, en realidad se está procesando un postback completo, con todos sus eventos de ciclo de vida. es más, se regenera totalmente el árbol de controles de la página, se lanzan todos los eventos de ciclo de vida de éstos, se envía y recibe todo el viewstate, etc... La única diferencia es que se devuelve sólo el hTML de las partes de la página que se están modificando dentro del UpdatePanel.

olvidar esto es un error muy común que cometen los programadores, que no se dan cuenta de que, aunque se vaya a actualizar sólo un pequeño control, en realidad se está enviando el estado de todos los contenidos en la página (y hay ViewStates que ocupan mucho), se ejecutarán todos los eventos de página tales como Page_Load y los eventos de ciclo de vida de todos los controles aunque no intervengan en la acción. o sea, exactamente igual que en una página normal.

Nota:

La mayor parte de la gente se queda con esta idea de sencillez que el control UpdatePanel nos brinda. Si bien es cierto que gracias a él la creación de aplicaciones AJAX se simplifica en gran medida, también es verdad que hay multitud de pequeños detalles a tener en cuenta sobre rendimiento y optimización que se le escapan al que simplemente se queda en la superficie. ello provoca que, luego en producción y sometidas a mucha carga, algunas aplicaciones aJaX ofrezcan muchos problemas de rendimiento, ya que están hechas sin tener un buen conocimien- to de lo que se hacía. en este capítulo trataremos de comentar conceptos e ideas clave que nos ayudarán a comprender mejor toda esta tecnología. Por lo de pronto, si ya has leído el capítulo anterior de fundamentos, ya tienes más herramientas que la mayoría de los programadores asP.NeT aJaX que encontrarás por ahí.

esto tiene mucha importancia ya que podemos tener una página enorme que se construye a partir de un proceso complejo y costoso (por ejemplo obtener mucha información de una base de datos o un servicio Web remoto), en la que hemos añadido un UpdatePanel en el que se modificará solamente una pequeña cantidad de información como respuesta a una acción. Podemos pensar que el refresco de ese panel será una operación ágil y muy poco costosa ya que los datos recibidos son minúsculos. es muy fácil que nos equivoquemos y la actualización parcial aparen- temente inocente lleve mucho tiempo y sea muy costosa en términos de red y de proceso en el servidor si no hemos sido cuidadosos en nuestro código.

el nombre que se le suele otorgar a los postback de páginas aJaX tampoco ayuda demasiado a aclarar este concepto, ya que normalmente se les denomina en artículos y documentaciones como “postback parciales”, para distinguirlos de los “postback normales” que se ejecutan cuando no hay funcionalidad aJaX. en mi opinión deberían llamarse “postback asíncronos” o, directamente, no distinguir entre unos y otros y sólo hablar de actualizaciones parciales, que es lo que realmente ocurre. No te dejes engañar por el nombre cuando leas esta denominación y recuerda que los postback son siempre completos.

La primera consecuencia de esto es que, aunque parezca que no lo necesitamos, debemos seguir comprobando en la carga de la página si nos encontramos en un

postback o no, para lo cual usaremos la propiedad IsPostBack de la página. así evi-

taremos operaciones de inicialización innecesarias en cada recarga, como haríamos en cualquier página normal.

si por el motivo que sea necesitamos saber si nos encontramos dentro de un

postback conducente a una actualización parcial de la página, o sea de un postback

asíncrono de aJaX, podemos saberlo consultando la propiedad IsAsyncPostback del control ScriptManager, que tomará el valor True cuando este sea el caso.