SweetAlert Confirm prompt with @Html.ActionLink

Question

I am using SweetAlert2 to replace javascript alerts in my MVC5 app. My question is: How do I use the sweetalert confirmation before a delete action is run. For example, this works fine....

 <span onclick="return confirm('Are you sure to delete?')">
        @Html.ActionLink("Delete", "Delete", new { roleName = @role.Name }, new { @class = "btn btn-success btn-xs" })
   </span>

If I cancel the delete action is not run. If I click ok it's run properly.

But I want to use SweetAlert2. Basically here's the prompt....

swal({
  title: 'Are you sure?',
  text: "You won't be able to revert this!",
  type: 'warning',
  showCancelButton: true,
  confirmButtonColor: '#3085d6',
  cancelButtonColor: '#d33',
  confirmButtonText: 'Yes, delete it!'
}).then(function () {
  swal(
    'Deleted!',
    'Deleted.',
    'success'
  )
})

The problem is that I'm not sure how to replace the confirm with this code and have it work correctly.

I tried wrapping the above code in a function and returning true if it was a success, but the problem is the ActionLink action is always run regardless of if I cancel or not.

Answer 1

First of all, your current code is navigating to the delete action. Any action methods which is altering data should not be an Http GET action method. It should be inside a Http Post action method.

[HttpPost]
public ActionResult Delete(string roleName)
{
    // to do  : Delete and return something
}

Now since our Delete method is HttpPost, you need a form submit, not navigating to a link via browser(which is a GET request). So build a form tag around your delete button(keep the roleName in a hidden field in the form), listen to the click event on this button, prevent the normal behavior which is navigating to the new url, instead, show the sweet alert, and in the then callback (user confirmed "Yes"), submit the form.

@using (Html.BeginForm("Delete", "Home"))
{
    <input type="hidden" name="roleName" value="admin" />
    <span>
        @Html.ActionLink("Delete", "Delete", null,
                           new { @class = "btn btn-success btn-xs deleteBtn" })
    </span>
}

And the javascript

$(function () {

    $(".deleteBtn").click(function (e) { 
        //whenever our button is clicked

        e.preventDefault();  
        // stop the default behavior(navigation)
        var _form = $(this).closest("form");
        //get a reference to the container form 

        swal({
            title: 'Are you sure?',
            text: "You won't be able to revert this!",
            type: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            confirmButtonText: 'Yes, delete it!'
        }).then(function () {
            //user selected "Yes", Let's submit the form
            _form.submit();
        });

    });

})