[ASPNET] Como actualizar/refrescar UpdatePanel via javascript

Por una pregunta en los foros de MSDN sobre ASP.NET y UpdatePanel arme este post para que quede registro de futuras referencias.

Si bien hace varios años estoy trabajando en proyectos ASP.NET MVC, en los foros y preguntas de consultas personales de alumnos o clientes que trabajan con Webforms es común encontrar varios UpdatePanel (incluso anidados) y dicha necesidad.

Que es lo que se necesita? Disparar la actualización de un UpdatePanel desde Javascript

 

Opciones…

  1. Tener un control “oculto” para disparar el trigger (puede ser via un Timer)
  2. Realizar el postback vía javascript
    1. Postback de un control oculto
    2. Postback del mismo UpdatePanel

Bueno, si estas leyendo hasta aquí conoces el UpdatePanel, ese elemeento que es muy bueno pero que requiere una gran responsabilidad para no “sobreutilizarlo”

 

Ejemplo, sencillo…

Un formulario con un UpdatePanel, y un LinkButton… se configura un un Trigger con PostBackTrigger o AsyncPostBackTrigger para que se dispare en el evento click del LinkButton.

Una de las preguntas a veces es: ¿cuando utilizar AsyncPostBackTrigger?

  • Cuando el control a enlazar esta fuera del UpdatePanel

  • Esta dentro del UpdatePanel, pero se definió la propiedad ChildrenAsTriggers es false (en este ejemplo no es)

  • En los controles que están dentro de UpdatePanel hijos (anidados), y disparar la actualización de UpdatePanel superiores

 

Pero en nuestro ejemplo,

   1: <form id="form1" runat="server">

   2:         <asp:ScriptManager ID="sm1" runat="server"></asp:ScriptManager>

   3:         <h1>Gridview - Update Panel via Modal Popup</h1>

   4:     <div>

   5:         <asp:UpdatePanel ID="UpdatePanel1" runat="server" OnLoad="UpdatePanel1_Load">

   6:             <ContentTemplate>

   7:                 

   8:                

   9:                 <asp:LinkButton ID="linkActualizar" runat="server" OnClick="linkActualizar_Click">Actualizar</asp:LinkButton> | 

  10:                 <a href="#" onclick="abrirVentanaModal(); return false;">Abrir Ventana Modal</a>

  11:                     <br/>

  12:                 <asp:GridView ID="GridView1" runat="server"

  13:                     CssClass="grillaJedis" 

  14:                     AutoGenerateColumns="False">

  15:                 <Columns>

  16:                  ...

  17:                 </Columns>

  18:                 </asp:GridView>

  19:          </ContentTemplate>

  20:             <Triggers>

  21:                 <asp:AsyncPostBackTrigger ControlID="linkActualizar" EventName="Click" />

  22:             </Triggers>

  23:         </asp:UpdatePanel>

  24:     </div>

  25: </form>

Se puede crear una función en Javascript, que realice el postback como si fuera el LinkButton que disparara el update del UpdatePanel

   1: <script>

   2:  function actualizarDemo1() {

   3:    __doPostBack('<%=linkActualizar.ClientID%>', '');

   4:  }

   5: </script>

Pero también se puede hacer postback directamente del updatePanel

   1: <script>

   2:  function actualizarDemo2() {

   3:    __doPostBack('<%=UpdatePanel1.ClientID%>', '');

   4:  }

   5: </script>

La única aclaración, que se desprende de la opcion 2, es que  el evento no es mas el click del botón.. y en el codebehind tendrias que realizar la accion necesaria en el evento Load del UpdatePanel

   1: protected void UpdatePanel1_Load(object sender, EventArgs e)

   2: {

   3:    //Acciones a realizar

   4: }

No Intrusivo

Se podria también dispara si función, escribiendo en el evento onClick o registranndo via addEventListener

Ejemplos simples de onlick

   1: <input id="btnHtmlDemo3" type="button" 

   2:     value="Actualizar via onClick"

   3:     onclick="__doPostBack('<%=UpdatePanel1.ClientID%>', '');" />

   4:     

   5:  

   6: <a id="btnHtmlDemo4" 

   7:     href="__doPostBack('<%=UpdatePanel1.ClientID%>', '');return false;" />

   8:     Actualizar via enlace</a>

o menos intrusivo addEventListener (en este caso el código cliente js seria bueno que se cargara en el load de la pagina)

   1: <input id="btnHtmlDemo3" type="button" 

   2:     value="Actualizar via onClick" />

   3:     

   1: <script>

   2:     var btnHtmlDemo3 = document.getElementById('btnHtmlDemo3'); 

   3:     btnHtmlDemo3.addEventListener('click', 

   4:         function(){

   5:             __doPostBack('<%=UpdatePanel1.ClientID%>', '');

   6:         }, 

   7:         false);         

   8: </script>

 

 

Espero que te sirva de ayuda o guía

 

Un comentario en “[ASPNET] Como actualizar/refrescar UpdatePanel via javascript”

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *