Como capturar enviar evento usando jQuery em um aplicativo ASP.NET?

StackOverflow https://stackoverflow.com/questions/1230573

Pergunta

Eu estou tentando manipular o evento submit de um elemento form usando jQuery. 

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

Isso nunca é acionado quando o submete o formulário (como parte de uma nova postagem, por exemplo, quando eu clico em um botão ou linkbutton).

Existe uma maneira de fazer este trabalho? Eu poderia anexar a eventos dos elementos individuais que desencadeiam a apresentação, mas isso é menos do que ideal - (. Por exemplo dropdownlists com atalhos autopostback = true, teclado, etc) existem apenas muitas possibilidades

Update: Aqui está um caso de teste mínimo - este é todo o conteúdo da minha 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>

Eu recebo o alerta "Documento pronto", mas não a "enviar detectado" ao clicar no linkbutton.

Foi útil?

Solução

Obrigado, @ Ken Browning e @russau por me apontar na direção de seqüestro __doPostBack. Eu vi um par de diferentes abordagens para isso:

  1. Hard-código de minha própria versão de __doPostBack, e colocá-lo mais tarde na página para que ele substitui o padrão.
  2. Sobrecarga de renderização na página e injetar meu próprio código personalizado para o __doPostBack existente.
  3. Aproveite a natureza funcional do Javascript e criar um gancho para adicionar funcionalidade para __doPostBack.

Os dois primeiros parecem indesejável para um par de razões (por exemplo, suponha que nas necessidades else futuro alguém para adicionar sua própria funcionalidade para __doPostBack) para que eu tenha ido com # 3.

Esta função addToPostBack é uma variação de uma técnica comum pre-jQuery Eu costumava usar para adicionar funções para window.onload, e funciona bem: 

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: Mudou addToPostBack para que

  1. pode levar os mesmos argumentos que __doPostBack
  2. a função que está sendo adicionado ocorre antes __doPostBack
  3. a função a ser adicionado pode retornar false para abortar postback

Outras dicas

Eu tive sucesso com uma solução com substituindo __doPostBack() , de modo a chamar uma substituição em form.submit() (ie $('form:first').submit(myHandler)), mas eu acho que é mais de engenharia. A partir de ASP.NET 2.0, a solução mais simples é:

  1. Definir uma função JavaScript que você deseja executar quando o formulário é enviado isto. 

    <script type="text/javascript">

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

</script>

  2. Registre a sua função de manipulador dentro de seu codebehind i. 

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

Isso é tudo! myhandler() será chamado a partir submete botão de entrada simples e chamadas __doPostBack() automáticas igualmente.

Sim, isso é irritante. I substituir __doPostBack com a minha própria para que eu pudesse obter enviar eventos ao fogo.

Se bem me lembro, este é um problema quando enviar um formulário via javascript (que chama a __doPostBack fazer) no IE (talvez outros navegadores também).

Meu substituição __doPostBack chama $(theForm).submit() Depois de replicar o comportamento padrão (enchendo valores em entradas escondidas)

Eu não sei como fazê-lo com jQuery, mas você pode adicionar uma propriedade OnClientClick ao controle ASP.NET: 

<asp:linkbutton id="TestButton" text="Click me!" runat="server" OnClientClick="alert('Submit detected.');" />

Se você estiver usando .NET Framework 3.5 ou para cima, você pode usar ScriptManager.RegisterOnSubmitStatement () em seu código do lado do servidor. O script registrada será chamado tanto no normal, submeter e em doPostBack. 

ScriptManager.RegisterOnSubmitStatement(this, this.GetType(), "myKey", "SomeClientSideFunction();");

Isso funciona para capturar a apresentar: 

$("form input[type=submit]").live("click", function(ev) {
    ev.preventDefault();
    console.log("Form submittion triggered");
  });

 $(document).ready(function () {

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

                console.log("submitted");
             }
}

Você precisa adicionar OnClientClick para linkbutton

OnClientClick = "se falso retorno ($ ( '# form1') válido (!).);"

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top