web-dev-qa-db-fra.com

Comment capturer un événement de soumission à l'aide de jQuery dans une application ASP.NET?

J'essaie de gérer l'événement submit d'un élément form à l'aide de jQuery.

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

Cela ne se déclenche jamais lorsque le formulaire est soumis (dans le cadre d'une publication, par exemple lorsque je clique sur un bouton ou sur un lien).

Y at-il un moyen de faire ce travail? Je pourrais attacher aux événements des éléments individuels qui déclenchent la soumission, mais ce n'est pas idéal - il y a trop de possibilités (par exemple, des listes déroulantes avec autopostback = true, des raccourcis clavier, etc.)

Mise à jour: Voici un scénario de test minimal. Voici l'intégralité du contenu de ma page 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>

Je reçois l'alerte "Document prêt", mais pas "Envoyer détecté" en cliquant sur le lien.

asp.netjquerywebformsform-submit
28
Herb Caudill

Merci à Ken Browning et @russau de m'avoir indiqué le détournement de __doPostBack. J'ai déjà vu plusieurs approches différentes:

  1. Codez en dur ma propre version de __doPostBack et mettez-la plus tard sur la page afin qu'elle écrase la version standard.
  2. Surcharger Render sur la page et injecter mon propre code personnalisé dans le __doPostBack existant.
  3. Tirez parti de la nature fonctionnelle de Javascript et créez un crochet pour ajouter des fonctionnalités à __doPostBack. 

Les deux premières ne semblent pas souhaitables pour plusieurs raisons (par exemple, supposons que quelqu'un d'autre ait besoin d'ajouter sa propre fonctionnalité à __doPostBack). Je suis donc parti avec # 3. 

Cette fonction addToPostBack est une variante d'une technique commune antérieure à jQuery que j'utilisais pour ajouter des fonctions à window.onload, et qui fonctionne 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?")
    });
});

Edit: Modifié addToPostBack pour que

  1. il peut prendre les mêmes arguments que __doPostBack
  2. la fonction ajoutée a lieu avant __doPostBack
  3. la fonction en cours d'ajout peut renvoyer false pour abandonner la publication
34
Herb Caudill

J'ai eu du succès avec une solution avec la substitution __doPostBack() afin d'appeler une substitution sur la fonction form.submit() (c'est-à-dire $('form:first').submit(myHandler)), mais je pense que sa conception est trop complexe. Depuis ASP.NET 2.0, la solution de contournement la plus simple consiste à:

  1. Définissez une fonction javascript que vous souhaitez exécuter lorsque le formulaire est soumis, c.-à-d.

    <script type="text/javascript">

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

</script>

  2. Enregistrez votre fonction de gestionnaire dans votre codebehind i.e.

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

C'est tout! myhandler() sera appelé à partir de soumissions de saisie de bouton simples et d'appels __doPostBack() automatiques identiques.

12
James McCormack

Ouais, c'est agaçant. Je remplace __doPostBack par le mien afin de pouvoir envoyer les événements de soumission à déclencher.

Iirc, cela pose un problème lors de la soumission d'un formulaire via javascript (qui appelle à __doPostBack do) dans IE (peut-être également d'autres navigateurs).

Mon __doPostBack appelle $(theForm).submit() après la réplication du comportement par défaut (remplissage des valeurs dans les entrées masquées)

4
Ken Browning

Si vous utilisez .NET Framework 3.5 ou version ultérieure, vous pouvez utiliser ScriptManager.RegisterOnSubmitStatement () dans votre code côté serveur. Le script enregistré sera appelé à la fois lors de l'envoi normal et lors de DoPostback.

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

Je ne sais pas comment procéder avec jQuery, mais vous pouvez ajouter une propriété OnClientClick au contrôle ASP.NET:

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

Cela fonctionne pour capturer le soumettre:

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

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

                console.log("submitted");
             }
}
0
zamoldar