Saltar al contenido

Postback de ASP.NET con JavaScript

Solución:

Aquí hay una solución completa.

Etiqueta de formulario completo de la página asp.net

<form id="form1" runat="server">
    <asp:LinkButton ID="LinkButton1" runat="server" /> <%-- included to force __doPostBack javascript function to be rendered --%>

    <input type="button" id="Button45" name="Button45" onclick="javascript:__doPostBack('ButtonA','')" value="clicking this will run ButtonA.Click Event Handler" /><br /><br />
    <input type="button" id="Button46" name="Button46" onclick="javascript:__doPostBack('ButtonB','')" value="clicking this will run ButtonB.Click Event Handler" /><br /><br />

    <asp:Button runat="server" ID="ButtonA" ClientIDMode="Static" Text="ButtonA" /><br /><br />
    <asp:Button runat="server" ID="ButtonB" ClientIDMode="Static" Text="ButtonB" />
</form>

Todo el contenido de la clase de código subyacente de la página

Private Sub ButtonA_Click(sender As Object, e As System.EventArgs) Handles ButtonA.Click
    Response.Write("You ran the ButtonA click event")
End Sub

Private Sub ButtonB_Click(sender As Object, e As System.EventArgs) Handles ButtonB.Click
    Response.Write("You ran the ButtonB click event")
End Sub
  • El LinkButton se incluye para garantizar que la función javascript __doPostBack se muestre al cliente. El simple hecho de tener controles de botón no hará que se procese esta función __doPostBack. Esta función se representará en virtud de tener una variedad de controles en la mayoría de las páginas ASP.NET, por lo que normalmente no se necesita un botón de enlace vacío.

¿Qué pasa?

Se representan dos controles de entrada al cliente:

<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />
<input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />
  • __EVENTTARGET recibe el argumento 1 de __doPostBack
  • __EVENTARGUMENT recibe el argumento 2 de __doPostBack

La función __doPostBack se representa así:

function __doPostBack(eventTarget, eventArgument) {
    if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
        theForm.__EVENTTARGET.value = eventTarget;
        theForm.__EVENTARGUMENT.value = eventArgument;
        theForm.submit();
    }
}
  • Como puede ver, asigna los valores a las entradas ocultas.

Cuando el formulario se envía / devuelve:

  • Si proporcionó el UniqueID del botón de control del servidor cuyo controlador de clic de botón desea ejecutar (javascript:__doPostBack('ButtonB',''), luego se ejecutará el controlador de clic de botón para ese botón.

¿Qué sucede si no quiero ejecutar un controlador de clics, pero quiero hacer otra cosa en su lugar?

Puedes pasar lo que quieras como argumentos a __doPostBack

Luego puede analizar los valores de entrada ocultos y ejecutar código específico en consecuencia:

If Request.Form("__EVENTTARGET") = "DoSomethingElse" Then
    Response.Write("Do Something else") 
End If

Otras notas

  • ¿Qué sucede si no conozco el ID del control cuyo controlador de clics quiero ejecutar?
    • Si no es aceptable establecer ClientIDMode="Static", entonces puedes hacer algo como esto: __doPostBack('<%= myclientid.UniqueID %>', '').
    • O: __doPostBack('<%= MYBUTTON.UniqueID %>','')
    • Esto inyectará la identificación única del control en el javascript, si lo desea

Per Phairoh: Use esto en la Página / Componente en caso de que cambie el nombre del panel

<script type="text/javascript">
     <!--
     //must be global to be called by ExternalInterface
         function JSFunction() {
             __doPostBack('<%= myUpdatePanel.ClientID  %>', '');
         }
     -->
     </script>

Si bien la solución de Phairoh parece teóricamente sólida, también he encontrado otra solución a este problema. Al pasar el ID de UpdatePanels como un parámetro (destino del evento) para la función doPostBack, el panel de actualización se publicará, pero no toda la página.

__doPostBack('myUpdatePanelId','')

* nota: el segundo parámetro es para argumentos de eventos adicionales

¡Espero que esto ayude a alguien!

EDITAR: así que parece que este mismo consejo se dio anteriormente mientras escribía 🙂

¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)



Utiliza Nuestro Buscador

Deja una respuesta

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