web-dev-qa-db-ja.com

ASP.NETアプリケーションでjQueryを使用して送信イベントをキャプチャする方法は？

JQueryを使用してsubmit要素のformイベントを処理しようとしています。

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

これは、フォームが送信されたとき（ポストバックの一部として、たとえばボタンまたはリンクボタンをクリックしたとき）には発生しません。

これを機能させる方法はありますか？送信をトリガーする個々の要素のイベントにアタッチすることもできますが、それは理想的ではありません-可能性が多すぎます（例：autopostback = trueのドロップダウンリスト、キーボードショートカットなど）。

pdate：最小限のテストケースです-これは私の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>

リンクボタンをクリックしても、「ドキュメントの準備完了」アラートは表示されますが、「送信が検出されました」アラートは表示されません。

asp.netjquerywebformsform-submit
28
Herb Caudill

@Ken Browningと@russauが__doPostBackのハイジャックの方向を教えてくれてありがとう。これに対するいくつかの異なるアプローチを見てきました。

  1. 独自のバージョンの__doPostBackをハードコードし、後でページに配置して、標準バージョンを上書きします。
  2. ページのレンダリングをオーバーロードし、独自のカスタムコードを既存の__doPostBackに挿入します。
  3. JavaScriptの機能的な性質を利用して、__ doPostBackに機能を追加するためのフックを作成します。

最初の2つはいくつかの理由で望ましくないように見えます（たとえば、将来、他の誰かが独自の機能を__doPostBackに追加する必要があるとします）。そこで、＃3に進みました。

このaddToPostBack関数は、window.onload,に関数を追加するために私が使用していた一般的なjQuery以前の手法のバリエーションであり、うまく機能します。

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?")
    });
});

編集： addToPostBackを変更して、

  1. __doPostBackと同じ引数を取ることができます
  2. 追加される関数は__doPostBackの前に実行されます
  3. 追加される関数はfalseを返してポストバックを中止できます
34
Herb Caudill

私は __doPostBack()（つまりform.submit()）のオーバーライドを呼び出すように$('form:first').submit(myHandler) をオーバーライドするソリューションで成功しましたが、過剰に設計されていると思います。 ASP.NET 2.0以降、最も簡単な回避策は次のとおりです。

  1. フォームが送信されたときに実行するJavaScript関数を定義します。

    _<script type="text/javascript">

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

</script>
_

  2. ハンドラー関数を分離コード内に登録します。

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

それで全部です！ myhandler()は、単純なボタン入力送信と自動__doPostBack()呼び出しから呼び出されます。

14
James McCormack

ええ、これは迷惑です。 ___doPostBack_を自分のものに置き換えて、送信イベントを発生させることができます。

IE（おそらく他のブラウザも））でJavaScript（___doPostBack_ doを呼び出す）を介してフォームを送信するときの問題です。

私の___doPostBack_置換は、デフォルトの動作を複製した後に$(theForm).submit()を呼び出します（非表示の入力に値を詰め込む）

4
Ken Browning

.NET Framework 3.5以降を使用している場合は、サーバーサイドコードでScriptManager.RegisterOnSubmitStatement（）を使用できます。登録されたスクリプトは、通常の送信時とDoPostback時の両方で呼び出されます。

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

JQueryでそれを行う方法はわかりませんが、OnClientClickプロパティをASP.NETコントロールに追加できます。

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

これは、送信をキャプチャするために機能します。

$("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