如何在ASP中使用jQuery捕获提交事件。网络应用程序?

I'm trying to handle the submit event of a form element using jQuery.

我正在尝试使用jQuery处理表单元素的提交事件。

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

This never fires when the form submits (as part of a postback, e.g. when I click on a button or linkbutton).

这不会在表单提交时触发(作为回发的一部分，例如当我单击按钮或链接按钮时)。

Is there a way to make this work? I could attach to events of the individual elements that trigger the submission, but that's less than ideal - there are just too many possibilities (e.g. dropdownlists with autopostback=true, keyboard shortcuts, etc.)

有什么办法可以让它工作吗?我可以连接到触发提交的单个元素的事件，但这并不理想——有太多的可能性(例如，自动回传给=true的下拉列表、键盘快捷键等等)。

Update: Here's a minimal test case - this is the entire contents of my aspx 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>

I get the "Document ready" alert, but not the "Submit detected" when clicking on the linkbutton.

我获得了“文档准备”警报，但在单击linkbutton时没有得到“Submit detection”。

8 个解决方案

#1

Thanks, @Ken Browning and @russau for pointing me in the direction of hijacking __doPostBack. I've seen a couple of different approaches to this:

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

Hard-code my own version of __doPostBack, and put it later on the page so that it overwrites the standard one.
硬编码我自己的版本的__doPostBack，并将其放在页面的后面，以便它覆盖标准版本。
Overload Render on the page and inject my own custom code into the existing __doPostBack.
重载呈现在页面上，并将我自己的自定义代码注入到现有的__doPostBack中。
Take advantage of Javascript's functional nature and create a hook for adding functionality to __doPostBack.
利用Javascript的功能特性，并创建一个钩子来添加功能到__doPostBack。

The first two seem undesirable for a couple of reasons (for example, suppose in the future someone else needs to add their own functionality to __doPostBack) so I've gone with #3.

前两个似乎是不可取的(例如，假设将来某人需要添加自己的功能到__doPostBack)，所以我使用了#3。

This addToPostBack function is a variation of a common pre-jQuery technique I used to use to add functions to window.onload, and it works well:

这个addToPostBack函数是我用来向窗口添加函数的常用前jquery技术的变体。onload，它运行良好:

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: Changed addToPostBack so that

编辑:修改addToPostBack

it can take the same arguments as __doPostBack
它可以和__doPostBack一样。
the function being added takes place before __doPostBack
添加的函数发生在__doPostBack之前
the function being added can return false to abort postback
添加的函数可以返回false来中止回发

#2

I've had success with a solution with overriding __doPostBack() so as to call an override on form.submit() (i.e. $('form:first').submit(myHandler)), but I think it's over-engineered. As of ASP.NET 2.0, the most simple workaround is to:

我已经成功地使用了重写__doPostBack()的解决方案，以便调用form.submit()(即$(“form:first”).submit(myHandler))上的重写，但我认为这是过度设计的。ASP。NET 2.0，最简单的解决方法是:

Define a javascript function that you want to run when the form is submitted i.e.

定义一个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()");
}

That's all! myhandler() will be called from straightforward button-input submits and automatic __doPostBack() calls alike.

这是所有!myhandler()将从直接的按钮输入提交和自动__doPostBack()调用中调用。

#3

Yeah, this is annoying. I replace __doPostBack with my own so that I could get submit events to fire.

是的,这是令人讨厌的。我用自己的方式替换了__doPostBack，这样我就可以提交事件来触发。

Iirc, this is an issue when submitting a form via javascript (which calls to __doPostBack do) in IE (maybe other browsers too).

Iirc，当通过javascript(调用__doPostBack do)提交表单时(也可能是其他浏览器)，这是一个问题。

My __doPostBack replacement calls $(theForm).submit() after replicating the default behavior (stuffing values in hidden inputs)

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

#4

I don't know how to do it with jQuery, but you could add an OnClientClick property to the ASP.NET control:

我不知道如何使用jQuery，但是您可以将OnClientClick属性添加到ASP中。网络控制:

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

#5

If you are using .NET Framework 3.5 or up, you can use ScriptManager.RegisterOnSubmitStatement() in your server-side code. The registered script will get called both on normal submit and on DoPostback.

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

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

#6

This works for capturing the submit:

这适用于捕获提交:

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

-2

You need to add OnclientClick to linkbutton

您需要将OnclientClick添加到linkbutton

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

OnClientClick = "如果(! $('中# form1 ').valid()返回false;”

#1