Sweet Alert Response Call Server Function in JavaScript on ASP Webform-CodePudding

I want to call server side function based on user response on sweetalert in my javascript function. I tried using non ajax function, with 2 buttons solution. One button to show sweet alert and second button called inside sweet alert.

HTML Code (2 button) :

<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 Function and sweetalert source :

<script src="https://unpkg.com/[email protected]/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");
            }
        });
  
}

And in my server side code (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 function works just fine but when i click ok it shows nothing, the DeleteEvent not called. How can i solve this ?

CodePudding user response：

Based on the answer I found here : Link for Reference

The problem seems on my

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

And the HTML I'm referencing at. So the solution would be :

Reference the dynamic name

document.getElementById("<%= DelUser.ClientID %>").click();
In .NET4 we can use ClientIDMode="Static"

The HTML Code then becomes :

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

And called like previous method : document.getElementById("DelUser").click();

Either way it will work just fine.

CodePudding user response：

What you have looks ok, except for the hidden button selector. Just add the tag ClientIDMode="static".

Or, you can of course use this:

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

However, you have this backwards. The user does not click on server button, and THEN you in code behind attempt to inject run the js dialog box.

You don't need that part in your code behind - REMOVE the script register.

However, there is a NICE trick you can use here, and thus only need ONE button.

And BETTER YET you don't have hard code the button. So, in theory, you could make a general routine and even one that you trigger from code behind. (but, you would have to pass the button to click as part of that setup). but, lets deal with one issue at a time here.

As we know, most jQuery/js dialog boxes of course don't wait. So, then you can't really return true/false, since the js code runs, and returns the value and THEN pops up the dialog box. So, a common solution is of course your duel button, and the hidden button trick.

However, you can actually make this work with JUST one button, and not really much of any code change here. And as noted, bonus points, since this also lets you use/get/pass the location of the button click.

so, assume this button click:

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

Note how I do NOT hide the button. You ONLY need the one button.

But, your alert code now becomes this:

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

Note how we added a global delalertok. The initializtion of js code ONLY runs the first time on page load. So, we set that value = false.

Note how we passed the button - so we don't need to change the alert code for differnt buttons on the same page.

Note also how the last line of the routine returns false.

Note also how by passing the buttion, we can "click" it again.

So, you click on your button. js code runs, pops dialog - returns false. Server side button did not run.

Note the dialog is popped up. If user hits ok, then your code stub runs, clicks the button, but BEFORE we click, we set that value = true. So now the click button runs again, it sees true in the first lines of the jscode, and thus your button will "now" get a return true - and will run the server side event.

We thus do not need nor require any server side register script here.