Ejecutar funciones JavaScript en controles de servidor dentro de controles Updatepanel

Un control de servidor Updatepanel permite generar aplicaciones web enriquecidas y centradas en el cliente al posibilitar una actualización parcial de partes seleccionadas de una página en lugar de actualizar toda la página con una devolución de datos.

Un problema algo extraño con este control de servidor surge al intentar ejecutar una función JavaScript, sobre todo si se trata de funciones jQuery. El problema se produce cuando se dispara un evento asincrónico en cualquiera de los controles que están dentro del Updatepanel, dejando fuera de combate las funciones JavaScript asociadas.

En el ejemplo que veremos a continuación aremos uso de la librería jQuery para ocultar y mostrar elementos. El control de servidor que dispara dicha función se encuentra dentro de un updatepanel junto con otros controles como se muestra a continuación.

<asp:UpdatePanel ID="upButtons" runat="server" UpdateMode="Conditional">
   <ContentTemplate>
      <input id="btnCliente" type="button" value="Mostrar Panel"/>
 
      <asp:Button ID="btnServidor" runat="server" Text="Enviar"/>
   </ContentTemplate>
</asp:UpdatePanel>
 
<div id="hidden">Contenido del panel</div>

Agregaremos nuestro selector CSS que ocultara el panel que mostraremos luego al presionar nuestro botón enviar.

#hidden{display:none;}

Ahora nuestra función JavaScript que en teoría debería mostrar el panel.

$(document).ready(function () {
 
   // Agregamos la función Javascript al evento click del boton
   $('#btnCliente).on('click', function(){
      $('#hidden').slideDown(); // Mostramos el panel
   });
 
});

Si cargamos la página y presionamos el botón “btnCliente” la función se dispara a la perfección y hasta acá todo bien; el problema está al presionar el botón que genera el postback dentro del Updatepanel ya sea antes o después de presionar el botón “btnCliente”, si hacemos eso la función JavaScript deja de funcionar.

La causa del problema

Si cargamos la página y presionamos el botón “btnCliente” la función se dispara a la perfección y hasta acá todo bien; el problema está al presionar el botón que genera el postback dentro del Updatepanel ya sea antes o después de presionar el botón “btnCliente”, si hacemos eso la función JavaScript deja de funcionar.

La solución al problema

No puede haber algo más sencillo. En lugar de asignar de forma automática el evento clic al botón utilizando JavaScript, tenemos que asignar manualmente el atributo de evento dentro del control, de esta forma no importa que el control valla o vuelva del servido el atributo siempre estará ahí. Hacemos entonces lo siguiente:

function Show() {
   $('#hidden').slideDown();
}

<asp:UpdatePanel ID="upButtons" runat="server" UpdateMode="Conditional">
   <ContentTemplate>
      <input id="btnCliente" type="button" value="Mostrar Panel" onclick="Show();"/>
 
      <asp:Button ID="btnServidor" runat="server" Text="Enviar"/>
   </ContentTemplate>
</asp:UpdatePanel>
 
<div id=”hidden”>Contenido del panel</div>