Cómo capturar un evento de envío usando jQuery ASP.NET ¿solicitud?

Estoy tratando de manejar el evento submit de un elemento form usando jQuery. 

    $("form").bind("submit", function() {
        alert("You are submitting!");
    });

Esto nunca se activa cuando el formulario se envía (como parte de un postback, por ejemplo, cuando hago clic en un botón o linkbutton).

¿Hay alguna manera de hacer que esto funcione? Podría adjuntar a eventos de los elementos individuales que activan el envío , pero eso es menos que ideal: hay demasiadas posibilidades (por ejemplo, listas desplegables con autopostback = true, atajos de teclado, sucesivamente.)

Actualización: Aquí hay un caso de prueba mínimo - este es el contenido completo de mi página aspx: 

<%@ page language="vb" autoeventwireup="false" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <asp:scriptmanager id="ScriptManager" runat="server" enablepartialrendering="true">
                <scripts>
                    <asp:scriptreference path="/Standard/Core/Javascript/Jquery.min.js" />
                </scripts>
            </asp:scriptmanager>
            <p>
                <asp:linkbutton id="TestButton" text="Click me!" runat="server" /></p>
        </div>
    </form>

    <script type="text/javascript">
        $(document).ready(function() {
            alert("Document ready.");
            $("form").submit(function() {
                alert("Submit detected.");
            });
        });
    </script>

</body>
</html>

Recibo la alerta "Document ready", pero no la "Submit detected" al hacer clic en el linkbutton.

Author: Herb Caudill, 2009-08-05
Source

8 answers

Gracias, @Ken Browning y @russau por señalarme en la dirección del secuestro __doPostBack. He visto un par de enfoques diferentes a esto:

  1. Codifique mi propia versión de __doPostBack, y póngala más tarde en la página para que sobrescriba la versión estándar.
  2. Sobrecarga el renderizado en la página e inyecta mi propio código personalizado en el __doPostBack existente.
  3. Aproveche la naturaleza funcional de Javascript y cree un gancho para agregar funcionalidad a __doPostBack.

Los dos primeros parecen indeseables por un par de razones (por ejemplo, supongamos que en el futuro alguien más necesita agregar su propia funcionalidad a __doPostBack), así que me he ido con #3.

Esta función addToPostBack es una variación de una técnica común previa a jQuery que solía usar para agregar funciones a window.onload, y funciona bien: 

addToPostBack = function(func) {
    var old__doPostBack = __doPostBack;
    if (typeof __doPostBack != 'function') {
        __doPostBack = func;
    } else {
        __doPostBack = function(t, a) {
            if (func(t, a)) old__doPostBack(t, a);
        }
    }
};

$(document).ready(function() {
    alert("Document ready.");
    addToPostBack(function(t,a) {
        return confirm("Really?")
    });
});

Editar: Cambiado addToPostBack para que

  1. puede tomar los mismos argumentos que __doPostBack
  2. el la función que se añade tiene lugar antes de _ _ doPostBack
  3. la función que se agrega puede devolver false para abortar postback
 33
Author: Herb Caudill,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2010-02-04 20:25:05

He tenido éxito con una solución con sobreescritura __doPostBack() para llamar a una anulación en form.submit() (es decir, $('form:first').submit(myHandler)), pero creo que está sobre-diseñado. A partir de ASP.NET 2.0, la solución más simple es:

  1. Defina una función javascript que desea ejecutar cuando se envía el formulario, es decir, 

    <script type="text/javascript">

function myhandler()
{
    alert('you submitted!');
}

</script>

  2. Registre su función de controlador dentro de su código posterior, es decir, 

    protected override void OnLoad(EventArgs e)
{
    base.OnLoad(e);
    ScriptManager.RegisterOnSubmitStatement(Page, Page.GetType(), 
                                            "myHandlerKey", "myhandler()");
}

Eso es todo! myhandler() se llamará desde directo los envíos de button-input y las llamadas automáticas __doPostBack() por igual.

 12
Author: James McCormack,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-05-04 17:11:55

Sí, esto es molesto. Remplazo __doPostBack con el mío propio para poder enviar eventos al fuego.

Iirc, este es un problema cuando se envía un formulario a través de javascript (que llama a __doPostBack hacer) en IE (tal vez otros navegadores también).

Mis __doPostBack llamadas de reemplazo $(theForm).submit() después de replicar el comportamiento predeterminado (valores de relleno en entradas ocultas)

 4
Author: Ken Browning,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2009-08-05 00:32:38

No se como hacerlo con jQuery, pero puedes agregar una propiedad OnClientClick a la ASP.NET control: 

<asp:linkbutton id="TestButton" text="Click me!" runat="server" OnClientClick="alert('Submit detected.');" />
 1
Author: Powerlord,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2009-08-05 14:31:00

Si está utilizando.NET Framework 3.5 o superior, puede usar ScriptManager.RegisterOnSubmitStatement () en su código del lado del servidor. El script registrado será llamado tanto en normal submit como en doPostBack.

ScriptManager.RegisterOnSubmitStatement(this, this.GetType(), "myKey", "SomeClientSideFunction();");
 1
Author: fripp13,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-02-14 19:31:11

Esto funciona para capturar el envío: 

$("form input[type=submit]").live("click", function(ev) {
    ev.preventDefault();
    console.log("Form submittion triggered");
  });
 0
Author: Freeman,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2012-05-22 08:43:36 
 $(document).ready(function () {

          $(this).live("submit", function () {

                console.log("submitted");
             }
}
 0
Author: zamoldar,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2012-12-10 22:40:12

Debe agregar OnClientClick a linkbutton

OnClientClick= " if(!form ('#form1').valid ()) devuelve false; "

 -2
Author: Phanindra Kumar,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-10-18 16:42:13