如何在 ASP.NET 应用程序中使用 jQuery 捕获提交事件？答案

【问题标题】：How to capture submit event using jQuery in an ASP.NET application?如何在 ASP.NET 应用程序中使用 jQuery 捕获提交事件？
【发布时间】：2010-11-16 20:45:30
【问题描述】：

我正在尝试使用 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>

单击链接按钮时，我收到“文档准备就绪”警报，但没有“检测到提交”。

【问题讨论】：

标签： asp.net jquery webforms form-submit

【解决方案1】：

感谢@Ken Browning 和@russau 为我指明了劫持__doPostBack 的方向。我已经看到了几种不同的方法：

对我自己的 __doPostBack 版本进行硬编码，然后将其放在页面上，以便覆盖标准版本。
在页面上重载渲染并将我自己的自定义代码注入现有的 __doPostBack。
利用 Javascript 的功能特性并创建一个钩子以向 __doPostBack 添加功能。

前两个似乎不受欢迎有几个原因（例如，假设将来其他人需要将他们自己的功能添加到 __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 以中止回发

【讨论】：

在更新面板中使用 AutoPostBack 控件时显示加载通知的绝佳解决方案。
非常感谢您的回答！我在 Sharepoint 中遇到了这个问题，但不知道为什么。我想我会发表评论，以防其他人为此苦苦挣扎。对于 Sharepoint，除了您的代码之外，您还需要在匿名函数返回之前添加以下内容：_spFormOnSubmitCalled = false;
非常感谢分享这个。我只是遇到了相反的问题 - 表单提交事件的 jQuery 处理程序被触发（并显示加载 gif）但 _doPostBack 没有被调用，因为验证失败。很奇怪，但已经不是问题了！
我采用了这个解决方案并将其放入一个 jQuery 插件中：plugins.jquery.com/beforePostBack

【解决方案2】：

我在a solution with overriding __doPostBack() 上取得了成功，以便在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() 调用类似地调用。

【讨论】：

只是为了澄清一下，在您的示例中，“myHandlerKey”是表单标签的 id。像这样：
抱歉，不 - 请查看文档：msdn.microsoft.com/en-us/library/bb301794.aspx。 key 唯一标识脚本以帮助防止重复注册。顺便说一句，不需要唯一标识表单元素，因为网络表单每页只允许一个表单。
澄清一下：网络表单只允许使用 runat="server" 声明的每个页面使用一个表单。页面上可能还有其他非服务器表单。
我喜欢这个。这是处理事情的正确“.NET 方式”。

【解决方案3】：

是的，这很烦人。我将__doPostBack 替换为我自己的，这样我就可以触发提交事件。

Iirc，这是在 IE（也可能是其他浏览器）中通过 javascript（调用__doPostBack do）提交表单时出现的问题。

在复制默认行为（在隐藏输入中填充值）后，我的 __doPostBack 替换调用 $(theForm).submit()

【讨论】：

劫持 __doPostBack : weblogs.asp.net/vga/archive/2004/03/01/…
@russau - 从这篇文章中我的印象是，从 Whidbey (VS2005) 开始就不需要回发劫持？
@Herb 好吧，他们劫持的原因与您的不同。听起来他们的原因已经得到解决。你的肯定没有。如果您希望通过调用 __doPostBack 发起回发时触发 jQuery 提交事件，那么您需要劫持 __doPostBack。

【解决方案4】：

我不知道如何使用 jQuery，但您可以将 OnClientClick 属性添加到 ASP.NET 控件：

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

【讨论】：

这对我的情况没有帮助。首先，如果我要处理可能触发回发的每一个控件，那么使用 jQuery 全面捕获这些事件将是一个更好的解决方案。但我需要的是针对许多不同表单的全局解决方案，我不想返回并触摸可能触发回发的每一个控件。

【解决方案5】：

如果您使用的是 .NET Framework 3.5 或更高版本，则可以在服务器端代码中使用 ScriptManager.RegisterOnSubmitStatement()。注册的脚本将在正常提交和 DoPostback 时被调用。

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

【讨论】：

【解决方案6】：

这适用于捕获提交：

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

【讨论】：

【解决方案7】：

 $(document).ready(function () {

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

                console.log("submitted");
             }
}

【讨论】：

【解决方案8】：

您需要将 OnclientClick 添加到链接按钮

OnClientClick="if(!$('#form1').valid()) return false;"

【讨论】：