使用 jquery-confirm 确认框停止回发，似乎无法获得 return 值（webform 项目）

Question

所以我正在尝试将我的应用程序中的确认框更改为更时尚的东西。

jquery-confirm.js 附加功能非常吸引人，但我真的很难让它按照我想要的方式工作。

我在页面上有一个简单的 link 按钮。

<asp:LinkButton ID="lnkDelete" CssClass="btn btn-danger" runat="server" OnClientClick="return ShowConfirm();" CommandArgument='<%#Eval("StatusId")%>' OnClick="DeleteStatus">

在他们的网站上，这是推荐的实施方式，但它没有 return 值或停止回发。

$.confirm({
title: 'Encountered an error!',
content: 'Something went downhill, this may be serious',
type: 'red',
typeAnimated: true,
buttons: {
    tryAgain: {
        text: 'Try again',
        btnClass: 'btn-red',
        action: function(){
        }
    },
    close: function () {
    }
  }
});

我知道我可以将我的 onclick 函数移到其中，但是它不能重复使用。我只想在用户点击取消时停止回发。这样我就可以从任何地方调用它，它就会正常工作。

我尝试了一些方法都无济于事这里有几个例子。 None 其中停止回发，但我认为我应该包括我尝试过的内容。

function ShowConfirm() {            
        var Confirmed = $.confirm({
            title: 'Please Confirm!',
            content: 'Are you sue that you want to delete this record?',
            type: 'red',
            typeAnimated: true,
            buttons: {
                tryAgain: {
                    text: 'Delete',
                    btnClass: 'btn-red',
                    action: function () {
                        this.preventDefault();
                    }
                },
                close: function () {

                }
            }
        });
        return Confirmed;
    }

另一个

function confirmation() {
        var defer = $.Deferred();
        $.confirm({
            title: 'Please Confirm!',
            content: 'Are you sue that you want to delete this record?',
            type: 'red',
            typeAnimated: true,
            buttons: {
                tryAgain: {
                    text: 'Delete',
                    btnClass: 'btn-red',
                    action: function () {
                        //Do something
                        defer.resolve(true);
                    }
                },
                close: function () {
                    //Do Something
                    defer.resolve(false);
                }
            }
        });
        return defer.promise();
    };

    function ShowConfirm() {
        confirmation().then(function (answer) {
            console.log(answer);
            ansbool = (String(answer) == "true");
            if (ansbool) {
                alert("this is obviously " + ansbool);//TRUE
            } else {
                alert("and then there is " + ansbool);//FALSE
            }
        });
    }

我也尝试了发送 return 值的最后一个，但这也不起作用。我的 onclick 服务器端代码始终执行。

任何帮助将不胜感激。

Answer 1

好的，这是怎么回事？

在几乎“所有”情况下，使用一些 jQuery.UI 对话框、sweetalert 并且在 99% 的情况下？

这些 jQuery 和 JavaScript add-ins 全部，并且在所有情况下都有一个巨大的“相似”方面：

即代码不等待，也不阻塞调用代码。

这种代码的技术术语就是我们所说的异步。

简而言之shell，当您调用此类代码时，将显示提示对话框或其他任何内容，但代码不会停止。您调用的例程将 100% 运行通过其代码，显示对话框或其他内容，然后 100% 完成，退出并 return 值。

这样的代码是为了不冻结浏览器，不损坏 re-plot 和信息显示。

因此，JavaScript 中仅有的两个实际停止代码的命令是

“警报()”和确认()。

以上两个命令将暂停代码。因此，您的问题：

你有一个飞机简键，说出一些删除或执行破坏性选项的代码，然后我们都像这样连接代码：

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

而且，正如我们所知，如果用户点击取消，则按钮代码不会运行。

但是，那些 js add-ins 和花哨的对话框呢？好吧，他们不会等待。

我没有你的特定 js add-in，但由于我们都使用 jQuery，所以我举一个例子如何使用 jQuery.UI。

所以，我们使用上面的按钮，现在这样做：

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

现在，在上面，我们调用了一个例程，它将“显示”我们的对话框提示。但请记住上面的规则：虽然代码 FLOWS，但不会停止调用 js 代码。

所以，我们需要做的是第一次仍然 RETURN 错误。（现在显示了我们很酷的提示对话框。

如何实现？好吧，在上面我们传递了“this”。在此上下文中，“this”是当前按钮。所以，我们的代码现在看起来像这样：

        <div id="MyDialog" style="display:none">
            <h4><i>my cool dialog text</i></h4>
            <h4><i>This delete can't be undone</i></h4>
        </div>
    </div>
    <script>
        var mydeleteok = false
        function mydeleteprompt(cmdBtn) {
            if (mydeleteok) {
                return true
            }

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

注意非常 - 但超级骗子关闭在上面。该例程将 return false。这意味着您单击按钮，调用 js 例程，显示对话框，然后 returned.

现在，显示对话框。如果您点击确定按钮，我们会设置我们的变量 = true 然后再次点击该按钮！！！！

这一次，相同的例程将运行，但我们设置我们的“标志”= true，代码运行s 和 returns true，以及我们的服务器侧边按钮代码将运行.

看起来像这样：

因此，用户单击按钮，代码运行s，显示对话框，returns “false”。

现在，如果用户点击“确定”，那么我们运行这段代码：

                buttons: {
                    ok: function () {
                        myDialog.dialog('close')
                        mydeleteok= true
                        $(cmdBtn).click()
                    },

所以，我们将标志设置为 true，然后再次单击按钮！！！这一次，该按钮调用了我们的例程，但这次例程将 return 为真，现在该按钮的服务器端代码将运行.

那么，您的大问题是什么？接近 100%，如果不是现在所有 JavaScript 代码运行都是异步的。它不会等待。

因此，有高级概念，例如“等待”和JavaScript“承诺”之类的东西，但它仍然没有解决这个问题。

因此，asp.net 按钮单击事件和使用 onclientclick 是一个很棒的功能，但是当您想使用某种类型的对话框时它往往会出现故障“add-in”，因为正如我所说，NONE 他们在等待。因此，您必须采用上述概念，设置一个标志（该标志代码仅在页面加载时运行s - 第一次。

事实上，在我使用 .click() 到运行那个按钮之后，我可能应该再次设置那个标志 = false。但是，由于该服务器端按钮导致 post-back，因此在大多数情况下，我们的标志将 re-set 变为 false。

编辑：示例 jquery-confirm。

如前所述，我从未使用过那个确认库（大约有 1+ 百万个可以找到 - 你也许应该提供一个 link）。

无论如何，该对话框的工作方式如下：

        <asp:Button ID="Button1" runat="server" Text="Button" CssClass="btn"
            OnClick="Button1_Click"
            OnClientClick="return myconfirm(this)"              
            />

        <script>

            var myconfirmok = false
            function myconfirm(btn) {

                if (myconfirmok) {
                    return true
                }

                $.confirm({
                    title: 'Confirm!',
                    content: 'Simple confirm!',
                    buttons: {
                        confirm: function () {
                            myconfirmok = true
                            $(btn).click()
                        },
                        cancel: function () {
                            console.log("user hit cancel")
                            
                        }
                    }
                });
                return false  // routine MUST return false!!!!
            }

注意上面非常小心 - 我们在最后一行 return false!!!

因此，单击按钮，客户端代码运行s，显示对话框，returns false。

现在，用户要么点击取消按钮，要么点击确认。如果他们点击确认，我们将我们的标志设置为 true，然后再次单击通过的按钮。现在，我们的例程再次运行s，这次 returns 为真，因此您的服务器端代码现在运行s.

编辑 3：- 问题是使用 LinkButton

这里的问题是使用jQuery（甚至JavaScript）点击link按钮？

你必须使用这个：

        <asp:Repeater ID="Repeater1" runat="server">

            <ItemTemplate>
                <asp:TextBox ID="TextBox1" runat="server" Text='<%# Eval("HotelName") %>' >
                </asp:TextBox>

                <asp:LinkButton ID="cmdDel" runat="server" ClientIDMode="Static"
                    CommandArgument='<%# Eval("ID") %>'
                    onclick="cmdDel_Click"
                    OnClientClick="return myconfirm(this)"                        
                    >delete</asp:LinkButton>

                <br />
            </ItemTemplate>
        </asp:Repeater>


        <script>

            var myconfirmok = false
            function myconfirm(btn) {

                if (myconfirmok) {
                    return true
                }

                $.confirm({
                    title: 'Confirm!',
                    content: 'Simple confirm!',
                    buttons: {
                        confirm: function () {
                            myconfirmok = true
                            $(btn)[0].click()
                        },
                        cancel: function () {
                            console.log("user hit cancel")
                        }
                    }
                });
                return false  // routine MUST return false!!!!
            }
        </script>

因此，即使使用 [0]，您也必须解决点击问题。

当然，我从不使用 link 按钮 - 我通常只是放入一个标准按钮，并没有太多理由使用 Linkbutton。但是，问题过去和现在都是使用jQuery.Click - 它需要 [0] 才能使点击事件起作用。

我的 link 按钮点击事件背后的代码是这样的：

Protected Sub cmdDel_Click(sender As Object, e As EventArgs)

    Dim cmdDel As LinkButton = sender

    Dim intPKID As Integer = cmdDel.CommandArgument

    Debug.Print("code here to delete row with PK id = " & intPKID)

    ' get current repeater row
    Dim OnerepRow As RepeaterItem = cmdDel.NamingContainer

    Debug.Print("Repeter index row click = " & OnerepRow.ItemIndex)

    ' get hotel name texgt box
    Dim txtHotel As TextBox = OnerepRow.FindControl("TextBox1")
    Debug.Print(txtHotel.Text)


End Sub

当我运行它

使用 jquery-confirm 确认框停止回发，似乎无法获得 return 值（webform 项目）

Stopping Postback with jquery-confirm confirm box, can't seem to get return value (webform project)

javascript

asp.net

jquery

编辑：示例 jquery-confirm。

编辑 3：- 问题是使用 LinkButton

使用 jquery-confirm 确认框停止回发，似乎无法获得 return 值（webform 项目）

Stopping Postback with jquery-confirm confirm box, can't seem to get return value (webform project)

javascript

asp.net

jquery

编辑：示例 jquery-confirm。

编辑 3：- 问题是使用 LinkBut​​ton

编辑 3：- 问题是使用 LinkButton