因此,我正在try 将应用程序中的确认框更改为更时尚的内容.

jquery确认.js插件非常吸引人,但我真的很难让它以我想要的方式工作.

我在页面上有一个简单的链接按钮.

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

在他们的网站上,这是推荐的实现,但它不会返回值或停止回发.

$.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函数移到这个函数中,但是它将不可重用.我只想在用户点击"取消"时停止回发.这样我就可以在任何地方调用它,而且它会正常工作.

我try 了一些无效的方法,这里有几个例子.

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
            }
        });
    }

我还try 了最后一种发送返回值的方法,但也不起作用.

任何帮助都将不胜感激.

推荐答案

好吧,那么这是怎么回事?

在几乎所有的情况下,使用一些jQuery.用户界面对话框,sweetalert和99%的情况下?

这些jQuery和JavaScript插件都有一个巨大的"相似"方面:

即代码不等待,也不阻止调用代码.

这类代码的技术术语是我们所说的异步.

在坚果壳中,当您调用此类代码时,将显示提示对话框或其他任何内容,但代码不会停止.您调用的 routine 将100%运行其代码、显示对话框或其他内容,然后100%完成、退出并返回值.

这种代码的原因是不会冻结浏览器,不会损坏重绘和信息显示.

因此,JavaScript中仅有的两个真正暂停代码的命令是

"alert ()"和确认().

以上两个命令将暂停代码.因此,你的问题是:

你有一个plane jane按钮,然后说一些代码来删除或执行一个 destruct 性的选项,然后我们都连接了这样的代码:

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

而且,正如我们所知,如果用户点击cancel,那么按钮代码不会运行.

然而,那些js插件和奇特的对话框呢?他们不会等的.

我没有特定的js外接程序,但因为我们都使用jQuery,所以我给出了一个如何使用jQuery实现这一点的示例.用户界面.

我们按下上面的按钮,现在做这个:

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

现在,在上面,我们调用一个 routine ,它将"显示"我们的对话框提示.但请记住上面的规则:尽管代码是流动的,但不会停止调用js代码.

所以,我们需要做的还是第一次返回false.(现在,我们的酷提示对话框显示出来.

如何让这一切顺利?好的,在上面我们通过"这个".在此上下文中,"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
        }

请注意非常-但超级复制者在上面接近.该 routine 将返回false.这意味着你点击按钮,调用js routine ,显示对话框,然后返回FALSE.

现在,将显示该对话框.如果点击ok按钮,我们将变量设置为true,然后再次点击按钮!!!!

这一次,同样的 routine 将运行,但我们将"flag"=true,代码运行并返回true,服务器端按钮代码将运行.

它看起来是这样的:

enter image description here

所以,用户点击按钮,代码运行,显示对话框,返回"false".

现在,如果用户点击"ok",那么我们运行以下代码:

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

所以,我们设置flag=true,然后再次单击按钮!!!这一次,按钮调用我们的 routine ,但这一次 routine 将返回true,现在该按钮的服务器端代码将运行.

那么,你的大问题?如果不是现在所有的JavaScript代码都是异步运行的,那么这一比例接近100%.它不会等待.

所以,有一些先进的概念,比如"等待"和JavaScript"promise ",但它仍然不能解决这个问题.

所以,asp.net按钮单击事件,使用onclientclick是一个很好的功能,但是当你想使用某种类型的对话框"加载项"时,它往往会崩溃,因为正如我所说的,它们都不会等待.因此,您必须采用上述概念,设置一个标志(该标志代码仅在页面加载时运行——第一次).

事实上,有人可以证明,在我使用.单击()运行该按钮,我可能应该再次将该标志设置为false.然而,由于服务器端的按钮导致回发,所以在大多数情况下,我们的标志将被重新设置为false.

Edit: Example with jquery-confirm.

如前所述,我从未使用过confirm库(大约有100多万个可以找到——你也许应该提供一个链接).

不管怎样,该对话框的工作原理如下:

        <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!!!!
            }

请注意,在上面非常小心-我们在最后一行返回false!!!

所以,点击按钮,客户端代码运行,显示对话框,返回false.

现在,用户要么点击取消按钮,要么点击确认.如果他们点击确认,我们将flag设置为true,然后再次点击按钮passed.现在,我们的 routine 再次运行,这次返回true,因此您的服务器端代码现在运行.

Edit3: - the issue is use of LinkButton

这里的问题是,使用jQuery(甚至JavaScript)点击链接按钮?

你必须使用这个:

        <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]也必须解决单击问题.

当然,我从不使用链接按钮——我通常只是插入一个标准按钮,没有太多理由使用链接按钮.但是,问题在于jQuery的使用.点击-点击事件需要[0]才能工作.

my linkbutton click事件背后的代码如下:

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

And when I run it enter image description here

Javascript相关问答推荐

如何避免移动设备中出现虚假调整大小事件?

在React中获取数据后,如何避免不必要的组件闪现1秒?

用JavaScript复制C#CRC 32生成器

将旋转的矩形zoom 到覆盖它所需的最小尺寸&S容器

使用GraphQL查询Uniswap的ETH价格

在JS中拖放:检测文件

闭包是将值复制到内存的另一个位置吗?

如何将数组用作复合函数参数?

Reaction组件在本应被设置隐藏时仍显示

如果一个字符串前面有点、空格或无字符串,后面有空格、连字符或无字符串,则匹配正则表达式

有没有一种直接的方法可以深度嵌套在一个JavaScript对象中?

图表4-堆叠线和条形图之间的填充区域

无法设置RazorPay订阅API项目价格

与在编剧中具有动态价值的定位器交互

如果我的列有条件,我如何呈现图标?

为什么我的Navbar.css没有显示在本地主机页面上?

使用Library chart.js在一个带有两个y轴的图表中绘制两个数据集

如何在preLoad()中自定义p5.js默认加载动画?

如何为Reaction应用程序创建仅登录的路由?

如何在HTML中使用rxjs显示动态更新