Sincronizando UpdatePanels

Partamos de lo básico, un control <asp:UpdatePanel> viene en las extensiones de AJAX para ASP.Net y tiene por objetivo marcar una región de la pagina web. Interactuando con el <asp:ScriptManager>, el UpdatePanel puede actualizar el contenido de esa región de la página en respuesta a un llamado realizado a través de AJAX. En su forma más simple, el UpdatePanel es capaz de tomar todos los eventos de los controles contenidos y convertirlos en llamados asincrónicos a través de AJAX. Este mecanismo reduce la cantidad de código en javascript a cero (0) y permite implementaciones rápidas de AJAX en sitios web donde los desarrolladores no son expertos en el tema. También es cierto que este no es la mejor opción en todos los escenarios y se debe utilizar de forma conservadora.


El principal problema de esta estrategia de programación está en sincronizar varios UpdatePanels que se encuentran en la misma página web.



Siguiendo el ejemplo de la imagen 1: se necesita que cada vez que se seleccione un nodo del árbol de la derecha (región roja) se muestre el nombre de la ciudad en el texto superior (región verde), y cada vez que se marque o se desmarque una ciudad del mismo árbol con un check, la ciudad debe alimentar la lista del grilla de la izquierda (región azul) .


Primero, la peor solución es encerrar todos los controles dentro de un único UpdatePanel, ya que esto desvirtúa una de las principales ventajas de usar AJAX , la cual es reducir la cantidad de información que viaja entre el cliente y el servidor para responder a un evento de usuario.


Segundo, deben analizar la funcionalidad implícita de cada control antes de incluirlos dentro de un UpdatePanel, por ejemplo, el árbol (TreeView) perite marcar y desmarcar nodos de forma implícita y para tal efecto NO debe realizar viajes entre el cliente y el servidor, por eso la región roja NO se encuentra dentro de un UpdatePanel. Adicionalmente, en caso de controles proveídos por terceros, deben revisar la documentación del fabricante para asegurarse que el comportamiento esperado del control no se vea afectado por el UpdatePanel. Todos los controles de última generación vienen con esta información técnica.


Ahora bien, las regiones se deben actualizar frente a diferentes eventos del árbol: OnNodeSelectionChanged para la región verde y OnNodeChecked para la región azul. Por tal razón no se puede dejar el comportamiento por defecto del UpdatePanel el cual “siempre” actualiza su región (léase: ‘envía y recibe información’) en cualquier acción de tipo AJAX. Es entonces que resulta necesario sincronizar la acción de los UpdatePanels dependiendo de las necesidades funcionales de la página.


Inicialmente, se debe asegurar que el ScriptManager habilite el rendering parcial de la página web:


<asp:ScriptManager EnablePartialRendering=“true” ID=“ScriptManager1″ runat=“server”></asp:ScriptManager>


 Es cierto que en la versión 3.5 de este control, la opción EnablePartialRendering viene en verdadero por defecto, pero….


Para la región verde, se necesita que el control de texto muestre el nombre del nodo seleccionado. Para tal efecto, esta sección se enmarca con un UpdatePanel, el cual tenga la opción UpdateMode en “Conditional“.


Esta opción le indica al UpdatePanel que no debe enviar información en todas las operaciones de AJAX y que tampoco actualizará esta región siempre. La condición bajo la cual se actualiza esta región se especifica en la colección de “Triggers


<asp:UpdatePanel ID=“UpdatePanel2″ runat=“server” ChildrenAsTriggers=“False” UpdateMode=“Conditional”>
   <contenttemplate>
      <asp:Label ID=“Label1″ runat=“server” Text=“Label”></asp:Label>
   </contenttemplate>
   <triggers>
      <asp:AsyncPostBackTrigger ControlID=“UltraWebTree1″ EventName=“NodeSelectionChanged” />
   </triggers>
</asp:UpdatePanel>

 Existen dos clases de Triggers:


PostBackTrigger: En los cuales se indica cual control que se encuentre dentro de la región del UpdatePanel dispara la operación AJAX a través de sus eventos.


AsyncPostBackTrigger: Asocia la ejecución de la operación AJAX a un evento especifico (no a cualquiera) de un control que NO se encuentre dentro de la región del UpdatePanel.


Adicionalmente existe la propiedad ChildrenAsTriggers. Le indica al UpdatePanel que además de los Triggers configurados, los eventos de los controles contenidos en la región enmarcada se consideran para ejecutar operaciones AJAX.


En el ejemplo, la región enmarcada en verde, se debe actualizar frente al evento NodeSelectionChanged del árbol y no debe ejecutarse ninguna operación AJAX frente a PostBack realizados por los controles internos, en este caso un label.


Para la región azul, se cambia la propiedad ChildrenAsTriggers a verdadero con el fin de permitir que los eventos ejecutados por la grilla interna también se ejecuten a través de operaciones de AJAX.


<asp:UpdatePanel ID=“UpdatePanel1″ runat=“server” ChildrenAsTriggers=“True” UpdateMode=“Conditional”>
   <triggers>
      <asp:AsyncPostBackTrigger ControlID=“UltraWebTree1″ EventName=“NodeChecked” />
   </triggers>
   <contenttemplate>
      <igtbl:UltraWebGrid ID=“UltraWebGrid1″ runat=“server” Height=“100%” Width=“100%”

 En conclusión, el UpdatePanel es una poderosa estrategia que habilita rápidamente a los equipos de desarrollo a implementar estrategias AJAX dentro de sus aplicaciones web, sin embargo, es necesario ahondar en todas la opciones diferentes a las utilizadas por defecto para lograr un equilibrio en las páginas y un desempeño optimo de la aplicación.

One thought on “Sincronizando UpdatePanels”

Leave a Reply

Your email address will not be published. Required fields are marked *


*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>