为什么确认甜蜜警报后没有触发.click()？

Question

我正在尝试在 JavaScript 中创建一个可重用的函数来调用需要用户确认的按钮。

我的 WebForms 母版页上已经有此代码。

function sweetAlertConfirm(btn, title, msg, icon) {
    if (btn.dataset.confirmed) {
        // The action was already confirmed by the user, proceed with server event
        btn.dataset.confirmed = false;
        return true;
    } else {
        // Ask the user to confirm/cancel the action
        event.preventDefault();
        Swal.fire({
            icon: icon,
            title: title,
            text: msg,
            showDenyButton: true,
            showCancelButton: true,
            confirmButtonText: 'Yes',
            denyButtonText: `No`,
        }).then((result) => {
            if (result.isConfirmed) {
                // Trigger the button click event to proceed with the server event
                btn.dataset.confirmed = true;
                btn.click();
            }
        });
    }
}

我正在像这样在 LinkButton 上实现它。

<asp:LinkButton runat="server" Style="margin-right: 10px;" ID="cmdDeleteGoal"
   CommandArgument='<%# DataBinder.Eval(Container.DataItem, "GoalCode") %>'
   OnClientClick="return sweetAlertConfirm(this, 'Delete Goal?', 'Do you want to delete this goal?', 'question');"
   OnClick="cmdDeleteGoal_Click"  >
   <i class="fa-solid fa-trash text-danger" data-bs-toggle="tooltip"
      data-bs-placement="top"
      title="Delete Goal"></i>
</asp:LinkButton>

背后的代码

LinkButton cmdDeleteGoal = (LinkButton)sender;
                bool _converted = int.TryParse(cmdDeleteGoal.CommandArgument, out int goalCode);
               
                if (!_converted) { 
                    ShowToast("", "#00ff00");
                    return;
                }

                _systemProcess = new DeleteGoalLogic();
                _userInput = new UserInput()
                {
                    KRACode = 1,
                    GoalCode = goalCode
                };
                _systemResult = _systemProcess.DoProcess(_userInput);

                ShowToast(_systemResult.Message, (_systemResult.ResultCode == SystemResult.ResultCode_Success ? "#00ff00" : "#ff0000"));

这是在 HTML 中呈现的元素

    <a id="_bodyContent_rptrGoals_cmdDeleteGoal_0"
        href="javascript:__doPostBack('ctl00$_bodyContent$rptrGoals$ctl00$cmdDeleteGoal','')" 
        style="margin-right: 10px;">
           <i class="fa-solid fa-trash text-danger" data-bs-toggle="tooltip" data-bs-placement="top" aria-label="Delete Goal" data-bs-original-title="Delete Goal"></i>
   </a>

现在的情况是，在我确认甜蜜警报后，甜蜜警报正在显示。

btn.click();

未触发。

我已经在这段代码中尝试过

console.log('test')

if (result.isConfirmed) {
    // Trigger the button click event to proceed with the server event
    btn.dataset.confirmed = true;
    btn.click();
}

并且工作正常。

现在，我的问题是，我做错了什么？如果用户确认，我怎样才能成功触发 btn.click？

Answer 1

删除事件阻止默认值。

让我们做一个工作示例。

请勿使用阻止默认值。

假设我们有一个网格视图，单击链接按钮。

这个：

<asp:GridView ID="GHotels" runat="server" AutoGenerateColumns="False" 
        DataKeyNames="ID" CssClass="table table-hover" Width="50%">
        <Columns>
            <asp:BoundField DataField="FirstName" HeaderText="FirstName"  />
            <asp:BoundField DataField="LastName" HeaderText="LastName"    />
            <asp:BoundField DataField="HotelName" HeaderText="HotelName"  />
            <asp:TemplateField HeaderText="Active" ItemStyle-HorizontalAlign="Center">
                <ItemTemplate>
                    <asp:CheckBox ID="chkActive" runat="server" Checked='<%# Eval("Active") %>' />
                </ItemTemplate>
            </asp:TemplateField>

            <asp:BoundField DataField="Description" HeaderText="Description"  />

            <asp:TemplateField HeaderText="Delete" ItemStyle-HorizontalAlign="Center">
                <ItemTemplate>
                    <asp:LinkButton ID="cmdDeleteHotel" 
                        ToolTip="Delete this file"
                        runat="server"
                        OnClick="cmdDeleteHotel_Click"
                        OnClientClick="return sweetAlertConfirm(this, 'Delete Hotel?', 'Delete this hotel?', 'question');"
                        >
                            <span class="fa fa-trash-o fa-lg"></span>
                    </asp:LinkButton>
                </ItemTemplate>
            </asp:TemplateField>
        </Columns>
    </asp:GridView>

要加载的代码，以及链接删除按钮代码：

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
    If Not IsPostBack Then
        LoadGrid
    End If
End Sub

Sub LoadGrid()

    GHotels.DataSource = MyRst("SELECT * FROM tblHotelsA ORDER BY HotelName")
    GHotels.DataBind()

End Sub

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

    Dim btn As LinkButton = sender
    Dim gRow As GridViewRow = btn.NamingContainer

    Debug.Print("Row index = " & gRow.RowIndex)
    Dim intPK As Integer = GHotels.DataKeys(gRow.RowIndex).Item("ID")

    Dim cmdSQL As New SqlCommand("DELETE FROM tblHotels WHERE ID = @ID")
    cmdSQL.Parameters.Add("@ID", SqlDbType.Int).Value = intPK
    'MyRstPE(cmdSQL)
    Debug.Print($"Will delete {intPK}")

End Sub

脚本是这样的：

        <script>
            function sweetAlertConfirm(btn, title, msg, icon) {

                if (btn.dataset.confirmed) {
                    // The action was already confirmed by the user, proceed with server event
                    btn.dataset.confirmed = false;
                    return true;
                } else {
                    // Ask the user to confirm/cancel the action

                    swal(msg, {
                        buttons: ["No", "Yes"],
                    }).then((willDelete) => {
                        if (willDelete) {
                            // Trigger the button click event to proceed with the server event
                            btn.dataset.confirmed = true;
                            btn.click();
                        }
                    });
                }
                return false;
            }

结果是这样的：

输出：

Row index = 5
Will delete 3

因此，您返回 true 或 false。上面的内容可以很好地作为概念证明。

清理你的代码，你的剪切+粘贴，否则代码有各种错误。

 Swal --- no, it lower case!!! swal(.....

还有这个：

    }).then((result) => {
        if (result.isConfirmed) {

应该是这样的：

  }).then((result) => {
     if (result) {

所以，是的，删除阻止默认值。

只需返回 true 或 false 即可控制服务器端按钮的运行。

由于 js 代码错误，您的点击可能不起作用。

编辑#2：使用甜蜜警报 2

所以，我现在有了这个，确实相同的代码，而且它仍然工作得很好。

记住，这是你想在这里学习的概念。

所以，假设我们有这个：

<script src="//cdn.jsdelivr.net/npm/sweetalert2@10"></script>

<asp:GridView ID="GHotels" runat="server" AutoGenerateColumns="False" 
        DataKeyNames="ID" CssClass="table table-hover" Width="800px">
        <Columns>
            <asp:BoundField DataField="FirstName" HeaderText="FirstName"  />
            <asp:BoundField DataField="LastName" HeaderText="LastName"    />
            <asp:BoundField DataField="HotelName" HeaderText="HotelName"  />
            <asp:TemplateField HeaderText="Active" ItemStyle-HorizontalAlign="Center">
                <ItemTemplate>
                    <asp:CheckBox ID="chkActive" runat="server" Checked='<%# Eval("Active") %>' />
                </ItemTemplate>
            </asp:TemplateField>
            <asp:BoundField DataField="Description" HeaderText="Description"  />
            <asp:TemplateField HeaderText="Delete" ItemStyle-HorizontalAlign="Center">
                <ItemTemplate>
                    <asp:LinkButton ID="cmdDeleteHotel" 
                        ToolTip="Delete this file"
                        runat="server"
                        OnClick="cmdDeleteHotel_Click"
                        OnClientClick="return sweetAlertConfirm(this);"
                        >
                        <span class="fa fa-trash-o fa-lg"></span>
                    </asp:LinkButton>
                </ItemTemplate>
            </asp:TemplateField>
        </Columns>
    </asp:GridView>


        <script>
            function sweetAlertConfirm(btn) {

                if (btn.dataset.confirmed) {
                    btn.dataset.confirmed = false;
                    return true;
                }

                Swal.fire({
                    title: 'Are you sure?',
                    text: "Delete This Hotel?",
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonText: 'Yes, delete it!',
                    cancelButtonText: 'No, Cancel',
                }).then((result) => {
                    if (result.isConfirmed) {
                        // Trigger the button click event to proceed with the server event
                        btn.dataset.confirmed = true;
                        btn.click();
                    }
                })
                return false;
            }
        </script>

我们的代码再次是这样的：

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

    Dim btn As LinkButton = sender
    Dim gRow As GridViewRow = btn.NamingContainer
    Dim intPK As Integer = GHotels.DataKeys(gRow.RowIndex).Item("ID")

    Dim cmdSQL As New SqlCommand("DELETE FROM tblHotelsA WHERE ID = @ID")

    cmdSQL.Parameters.Add("@ID", SqlDbType.Int).Value = intPK
    MyRstPE(cmdSQL)
    LoadGrid()  ' update gv to show deleted

End Sub

正如我所指出的，取消注释掉删除命令，并删除 debug.prints。

现在的结果是这样的：