Question

我正在使用SweetAlert2替换我的MVC5应用中的javascript警报。我的问题是：如何在运行删除操作之前使用sweetalert确认。例如，这很好....

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

如果我取消删除操作未运行。如果我单击确定它运行正常。

但我想使用SweetAlert2。基本上这是提示......

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

问题是我不知道如何用这段代码替换确认并让它正常工作。

我尝试在函数中包装上面的代码，如果成功则返回true，但问题是无论是否取消，ActionLink操作总是会运行。

Answer 1

首先，您当前的代码正在导航到删除操作。任何改变数据的动作方法都不应该是Http GET动作方法。它应该在Http Post动作方法中。

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

既然我们的Delete方法是HttpPost，您需要表单提交，而不是通过浏览器导航到链接（这是GET请求）。因此，在删除按钮周围构建一个表单标记（将roleName保留在表单中的隐藏字段中），在此按钮上收听click事件，防止导航到新网址的正常行为，而不是显示甜蜜警报，在then回调中（用户确认＆＃34;是＆＃34;），提交表格。

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

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

    });

})

SweetAlert使用@ Html.ActionLink

1 个答案: