ASP Webform JavaScript 中的 Sweet Alert Response 调用服务器函数

Question

我想在 javascript 函数中根据用户对 sweetalert 的响应调用服务器端函数。我尝试使用非 ajax 函数，使用 2 个按钮解决方案。一个按钮显示甜蜜警报，第二个按钮调用内部甜蜜警报。

HTML代码（2个按钮）：

<asp:Button runat="server" ID="DelUser" Text="" style="display:none;" OnClick="DeleteEvent"/>
<asp:Button ID="DeleteUser" runat="server" Text="Delete User" Width="122px" BackColor="#FF572D" Font-Bold="True"  OnClick="DeleteUser_Click" />

JS 函数和 sweetalert 来源：

<script src="https://unpkg.com/sweetalert@2.1.2/dist/sweetalert.min.js"></script>  
<script type="text/javascript">

function delalert() {
   
    swal({
        title: "Are you sure?",
        text: "Are you sure that you want to delete this data?",
        icon: "warning",
        buttons:true,
        dangerMode: true,
    })
        .then(willDelete => {
            if (willDelete) {
                document.getElementById("DelUser").click();

            }
            else {
                swal("Safe!", "Your imaginary file is safe!", "success");
            }
        });
  
}

在我的服务器端代码中 (aspx.cs):

       protected void DeleteUser_Click(object sender, EventArgs e)
    {
        ClientScript.RegisterStartupScript(this.GetType(), "Popup", "delalert()", true);
       
    }

    protected void DeleteEvent(object sender, EventArgs e)
    {
        Response.Write("ASSSSSDASDASDASDSDSD");
    }

Else 函数工作正常，但是当我单击“确定”时它什么也没显示，没有调用 DeleteEvent。我该如何解决这个问题？

Answer 1

根据我在这里找到的答案： Link for Reference

问题似乎在我的

document.getElementById("DelUser").click();

我引用的 HTML。所以解决方案是：

引用动态名称

document.getElementById("<%= DelUser.ClientID %>").click();
在.NET4中我们可以使用ClientIDMode="Static"

HTML 代码变为：

<asp:Button runat="server" ClientIDMode="Static" ID="DelUser" Text="" style="display:none;" OnClick="DeleteEvent"/>

并像以前的方法一样调用： document.getElementById("DelUser").click();

无论哪种方式都可以正常工作。

Answer 2

除了隐藏的按钮选择器外，您的设置看起来还不错。只需添加标签 ClientIDMode="static".

或者，你当然可以使用这个：

getElementById('<%= DelUser.ClientID %>');

但是，你把这个倒过来了。用户没有点击服务器按钮，然后你在代码后面试图注入 + 运行 js 对话框。

您的代码后面不需要该部分 - 删除脚本寄存器。

但是，您可以在此处使用一个 NICE 技巧，因此只需要一个按钮。

更好的是您没有对按钮进行硬编码。因此，从理论上讲，您可以制作一个通用例程，甚至可以制作一个从代码隐藏触发的例程。（但是，作为该设置的一部分，您必须传递按钮才能单击）。但是，让我们在这里一次处理一个问题。

正如我们所知，大多数 jQuery/js 对话框当然不会等待。所以，那你不能真的return true/false，因为js代码运行s，和returns的值然后弹出对话框。所以，一个常见的解决方案当然是你的决斗按钮，以及隐藏按钮技巧。

但是，您实际上只需一个按钮就可以完成这项工作，而且这里的代码更改并不多。如前所述，奖励积分，因为这还可以让您 use/get/pass 单击按钮的位置。

因此，假设单击此按钮：

        <asp:Button ID="Button1" runat="server" Height="31px" Text="Button" Width="159px"
            OnClientClick="return delalert(this);"                
            OnClick="Button1_Click"    />

请注意我没有隐藏按钮。您只需要一个按钮。

但是，您的警报代码现在变成了：

    <script>
        var delalertok = false
        function delalert(btn) {

            if (delalertok) {
                delalertok = false
                return true
            }
            
            swal({
                title: "Are you sure?",
                text: "Are you sure that you want to delete this data?",
                icon: "warning",
                buttons: true,
                dangerMode: true,
            })
                .then(willDelete => {
                    if (willDelete) {
                        delalertok = true;
                        btn.click();
                    }
                    else {
                        swal("Safe!", "Your imaginary file is safe!", "success");
                    }
                });
            return false;
        }

    </script>

请注意我们是如何添加全局delalertok 的。 js 代码的初始化仅运行s 第一次加载页面。因此，我们设置该值 = false.

请注意我们是如何传递按钮的 - 因此我们不需要更改同一页面上不同按钮的警报代码。

另请注意例程的最后一行 return 是错误的。

另请注意如何通过传递按钮，我们可以再次“单击”它。

所以，你点击了你的按钮。 js 代码运行s，弹出对话框 - returns false。服务器端按钮没有运行.

注意弹出对话框。如果用户点击确定，那么你的代码存根运行s，点击按钮，但在我们点击之前，我们设置该值 = true。所以现在再次单击按钮运行s，它在 jscode 的第一行中看到 true，因此你的按钮将“现在”得到 return true - 并将运行服务器会外活动。

因此我们不需要也不需要任何服务器端注册脚本。

ASP Webform JavaScript 中的 Sweet Alert Response 调用服务器函数

Sweet Alert Response Call Server Function in JavaScript on ASP Webform

javascript

asp.net

webforms

sweetalert