防止在UpdatePanel中使用jQuery的submit()方法提交时触发ASP.net的__doPostback()方法

Question

防止在UpdatePanel中使用jQuery的submit()方法提交时触发ASP.net的__doPostback()方法

asp.netjqueryformsasp.net-ajaxupdatepanel

5

如果我的自定义jQuery验证返回false，我希望在表单提交时停止postback。

有没有办法在submit()函数内阻止__doPostback()函数完成？

我原本以为：

$('#aspnetForm').submit(function () { return false; });

使用return false应该可以解决问题，但显然情况并非如此：有人有建议吗？

submit（）函数确实会阻止后续事件（如果您在firebug中暂停），但似乎在submit（）函数完成后无法阻止事件的发生！

谢谢，Ed

编辑

好的，我尝试了一下，并发现导致后续事件的按钮与updatepanel绑定作为asyncpostbacktrigger似乎是个问题：如果将其作为触发器删除（即导致完全后续事件），则没有问题可以用return false;阻止后续事件。

有什么想法可以解释为什么无法使用return false阻止异步后续事件吗？

- Ed James

2个回答

3

$('#yourPostButton').click(function(){  
    return false; 
});

这应该可以做到！

- tucaz

1

是的，但那样我需要将其附加到表单上的每个按钮，这并不是很明智。我需要能够使用submit()（或某个等效物）进行操作，以便我可以在不必按页面配置的方式下使用利用该代码的控件。 - Ed James

如果您不介意的话，可以使用$('input[type=button]')或类似的方式将其添加到每个按钮中，或者尝试jQuery文档中建议的.preventDefault()方法，链接在此处http://api.jquery.com/submit/。 - tucaz

1

另一个想法是获取对原始__doPostBack函数的引用，并在需要中断 postback 时将其替换为一些虚拟函数。类似这样：var __oldPostBack = __doPostBack; __doPostBack = function() { //检查是否可以发布，然后调用__oldPostBack() } - tucaz

是的，选择器没错，但在ASP.net中任何事情都可能引起回发，比如下拉列表的选中索引改变（我们经常使用的一种），所以我必须根据输入类型绑定各种事件，这变得有点过于复杂了。至于preventDefault()，return false会自动调用它，你可以通过firebug逐步调试来看到。 - Ed James

如果您尝试多次链接 __doPostBack，可能会出现一些问题，这意味着当多个控件需要向 __doPostback 添加功能时，它将变得非常复杂。 - Ed James

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Andras Vass · Accepted Answer

您需要使用客户端的PageRequestManager来正确处理AJAX提交事件。(例如，避免异步回发。)

如果您无法完全控制页面，则页面上可能有JavaScript仅调用__doPostBack()而不经过任何页面逻辑。在这种情况下 - 除了上述方法 - 您还需要存储旧的window.__doPostBack()并提供自己的方法，正如@tucaz在他的评论中所提到的。 (...就像您提到的那样，它可能会非常困惑，尤其是在链接中。) 对于常规提交(非AJAX)，您可以像其他人指出的那样提供事件处理程序。这个页面可能会有所帮助，并且有一些使用PageRequestManager的代码示例。特别是：

initialize : function()
{
    ...

    this._onSubmitHandler = Function.createDelegate(this, this._onSubmit);
    this._onPartialUpdateEnd = Function.createDelegate(this, this._onUpdateEnd);

    if (typeof(Sys.WebForms)!== "undefined" && typeof(Sys.WebForms.PageRequestManager)!== "undefined")
    {
        Array.add(Sys.WebForms.PageRequestManager.getInstance()._onSubmitStatements, this._onSubmitHandler);
        Sys.WebForms.PageRequestManager.getInstance().add_endRequest(this._onPartialUpdateEnd);
    }
    else 
        $addHandler(document.forms[0], "submit", this._onSubmitHandler);
},

编辑: 以下是我使用的示例，对于我来说可以正常工作（.Net 3.5 SP1，Button1 是更新面板中的触发器等）:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!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>

    <script src="http://ajax.microsoft.com/ajax/jQuery/jquery-1.4.2.js" charset="utf-8"
        type="text/javascript"></script>

</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
        <ContentTemplate>
            <div>
                <asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" />
            </div>
        </ContentTemplate>
        <Triggers>
            <asp:AsyncPostBackTrigger ControlID="Button1" />
        </Triggers>
    </asp:UpdatePanel>
    </form>
    <script type="text/javascript">
        (function($, undefined) {

            var submitHandler = function(e) {
                return false;
            }

            if (typeof (Sys.WebForms) !== "undefined" && typeof (Sys.WebForms.PageRequestManager) !== "undefined") {
                Array.add(Sys.WebForms.PageRequestManager.getInstance()._onSubmitStatements, submitHandler);
            } else {
                $("form").submit(submitHandler);
            }
        })(jQuery);
    </script>
</body>
</html>