在一些回发之前检查条件

Question

在我的场景中，页面中有很多 asp.net 按钮。每个 asp.net 按钮在客户端呈现时都具有如下结构：

<button onclick="__doPostBack('ctl00$...ID','')" type="button" class=".."></button>

页面中的某些按钮有一个特殊的 class，这意味着该按钮将导致表单验证：

<button onclick="__doPostBack('ctl00$...ID','')" type="button" class=".. require-validation"></button>

我想在运行仅在这些按钮上的常规 onclick 函数之前执行 javascript 函数来验证表单。如果可能的话，我只想在客户端使用 jQuery 更改此行为（这样服务器端我只需要使用适当的 class 标记按钮）。

如果我尝试（使用 jQuery）所有带有 class“require-validation”的按钮并附加验证函数（这将抑制提交事件）一切正常，但是只是有时候。

此处是验证函数示例：

$("myOnlyPageForm").find(".require-validation").click(function (e) {
            if ( trikyValidationFail() )
                e.preventDefault();
        });

我的理解是带有“require-validation”的按钮现在附加了两个不同的事件，因此点击会同时触发它们并且不能保证顺序。所以有时它会阻止常规回发，但有时不会（在我的测试中，第一次回发总是被阻止，但第二次点击会导致回发，即使验证总是失败）。

所以到现在为止我只能考虑完全重写 onclick 代码（使用 jQuery）所以它会变成：

<button onclick="trikyValidationFail() ?__doPostBack('ctl00$...ID','') : false" type="button" class=".. require-validation"></button>

但我不确定这是否可行，也不确定如何实现

Answer 1

任何平面简 asp.net 按钮都可以有客户端 (JavaScript) 单击事件，然后是服务器端事件。

因此，假设我们有一个按钮，想要确认一个删除操作。

  <asp:Button ID="cmdDelete" runat="server" Text="Server delete prompt" 
     OnClientClick="return confirm('Really delete this file?');"  />

因此，如果 ClientCick return 为真，则将触发服务器端按钮事件。如果 ClientClick 事件 return 为 false，则不会触发服务器端按钮事件。

因此，对于每个按钮，该函数可以简单地 return true 或 false。

所以，按钮代码服务器端可以是这样的：

Protected Sub cmdDelete_Click1(sender As Object, e As EventArgs) Handles cmdDelete.Click

    Response.Write("<h2> This is the server side delete run code</h2>")
    ' real delete code follows

End Sub

因此，以上内容将根据客户端例程 return 为真或假为条件运行服务器端。

现在，您必须要小心，因为最近经常有大量 JavaScript 代码例程运行异步。（js代码不要等）

例如，我想弹出一个 jQuery.UI 对话框（代替那些看起来很糟糕的确认）。

所以，我们可能会调用一个 jQuery.UI 对话框，像这样说：

        <asp:Button ID="cmdTest" runat="server" Text="Server Delete Prompt" ClientIDMode="Static"
            OnClientClick="return mytest2ok(this)"/>
        <br />

        <div id="MyDialog" style="display:none">
            <h2>my cool dialog text</h2>
            <h2>This delete operation can't be undone</h2>
        </div>

    <script>

        var mytest2ok = false
        function mytest(cmdBtn) {
            if (mytest2ok) {
                return true
            }

            myDialog = $("#MyDialog")
            myDialog.dialog({
                title: "Delete the whole server system",
                modal: true,
                appendTo: "form",
                autoOpen: false,
                buttons: {
                    ok: function () {
                        myDialog.dialog('close')
                        mytest2ok = true
                        $(cmdBtn).click()
                    },
                    cancel: function () {
                        myDialog.dialog('close')
                    }
                }
            })

            myDialog.dialog('open')
            return false
        }

    </script>

现在，当我点击按钮时，我得到了这个：

现在，在上面，注意非常接近 - 当我单击服务器按钮时，客户端代码运行s，显示对话框，代码失败并且 returns 错误！！！ !

现在，当我单击“确定”时，在客户端对话框中，我设置标志 = true 并再次单击按钮 (jquery.Click())。所以现在点击按钮，客户端 js 运行s 再次，returns 为真，因此我的服务器端按钮代码然后运行s.

所以，虽然它是 100% 简单的规则：

 If client click event returns true  - sever side code event runs
 if client click even returns false - server side code event does NOT run

唯一真正遇到麻烦的时候，是调用或使用一些不会停止的js代码，结果你甚至不能使用async（await），甚至不能在js中说一个promise - 它仍然会失败。所以在那些情况下，你要么有 js 代码运行，然后调用按钮或服务器端代码，或者在“许多”情况下，你可以使用上面的 true/false 标志技巧，并通过button(this)到js例程中，如果是returntrue，则设置一个flag，在js中再次点击按钮，按钮再次点击运行s，并带一个truereturn 值，服务器端代码运行s.

在一些回发之前检查条件

Check condition before some postback

jquery

asp.net

postback