ASP.NETアプリケーションでjQueryを使用して送信イベントをキャプチャする方法
https://stackoverflow.com/questions/1230573
-
22-07-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian質問
jQueryを使用して form 要素の submit イベントを処理しようとしています。
$("form").bind("submit", function() {
alert("You are submitting!");
});
フォームが送信されたとき（ポストバックの一部として、たとえばボタンまたはリンクボタンをクリックしたとき）、これは決して起動しません。
これを機能させる方法はありますか？送信をトリガーする個々の要素のイベントに添付することはできますが、それは理想的ではありません-あまりにも多くの可能性があります（例：autopostback = trueのドロップダウンリスト、キーボードショートカットなど）
更新：最小限のテストケースを次に示します。これは、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>
「ドキュメントの準備完了」を取得します;アラート、ただし「送信が検出されました」リンクボタンをクリックしたとき。
解決
__ doPostBackをハイジャックする方向を教えてくれてありがとう、@ Ken Browningと@russau。 これに対するいくつかの異なるアプローチを見てきました：
- 自分のバージョンの__doPostBackをハードコーディングし、標準のバージョンを上書きするように後でページに配置します。
- ページにレンダリングをオーバーロードし、既存の__doPostBackに独自のカスタムコードを挿入します。
- Javascriptの機能的性質を活用し、__ doPostBackに機能を追加するためのフックを作成します。
最初の2つは、いくつかの理由で望ましくないようです（たとえば、将来、他の誰かが__doPostBackに独自の機能を追加する必要があると仮定します）ので、＃3に進みました。
この addToPostBack 関数は、 window.onload、に関数を追加するために使用した一般的なpre-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を変更して、
- __ doPostBackと同じ引数を取ることができます
- 追加される関数は__doPostBackの前に実行されます
- 追加される関数はfalseを返してポストバックを中止できます
他のヒント
ソリューションで成功しました _。domitBack（） をオーバーライドして、 form.submit（）のオーバーライドを呼び出す（つまり、 $（ 'form：first'）。submit（ myHandler））、しかし私はそれが過剰に設計されていると思います。 ASP.NET 2.0の時点で、最も簡単な回避策は次のとおりです。
-
フォームの送信時に実行するJavaScript関数を定義します。つまり、
<script type="text/javascript"> function myhandler() { alert('you submitted!'); } </script> -
コードビハインド内にハンドラー関数を登録します。つまり、
protected override void OnLoad(EventArgs e) { base.OnLoad(e); ScriptManager.RegisterOnSubmitStatement(Page, Page.GetType(), "myHandlerKey", "myhandler()"); }
以上です！ myhandler（）は、単純なボタン入力送信と自動 __ doPostBack（）呼び出しから同様に呼び出されます。
ええ、これは迷惑です。 __ doPostBack を自分のものに置き換えて、送信するイベントを取得できるようにします。
Iirc、これはIE（他のブラウザでも可能）でjavascript（ __ doPostBack doを呼び出す）を介してフォームを送信するときの問題です。
私の __ doPostBack の置換は、デフォルトの動作（非表示の入力に値を詰め込む）を複製した後に $（theForm）.submit（）を呼び出します
jQueryでそれを行う方法はわかりませんが、OnClientClickプロパティをASP.NETコントロールに追加できます。
<asp:linkbutton id="TestButton" text="Click me!" runat="server" OnClientClick="alert('Submit detected.');" />
.NET Framework 3.5以降を使用している場合、サーバー側コードで ScriptManager.RegisterOnSubmitStatement（）を使用できます。登録されたスクリプトは、通常の送信とDoPostbackの両方で呼び出されます。
ScriptManager.RegisterOnSubmitStatement(this, this.GetType(), "myKey", "SomeClientSideFunction();");
これは送信をキャプチャするために機能します：
$("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");
}
}
リンクボタンにOnclientClickを追加する必要があります
OnClientClick =＆quot; if（！$（ '＃form1'）。valid（））return false;＆quot;
