如何通过ASP.NET MVC中的SweetAlert删除

Question

我想通过SweetAlert对话框删除一行。我的控制器工作正常但我在JavaScript函数中有问题。当我点击“是删除它”时，没有任何反应。否则它在我不使用Javascript时工作。

控制器：

public ActionResult DeleteCategory(int id)
{
    using (Db db = new Db())
    {
        //Get the category
        CategoryDTO dto = db.Categories.Find(id);
        //Remove the category
        db.Categories.Remove(dto);
        //Save
        db.SaveChanges();
    }
    //Redirect
    return RedirectToAction("Categories");
}

视图：

<td class="text-center">
@Html.ActionLink("Delete", "DeleteCategory", new { id = item.Id }, new { 
@class = "delete" }) </td>

<script>
$("body").on("click", "a.delete", function (e) {
        e.preventDefault();

        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((result) => {
            if (result.e) {
                swal(
                    'Deleted!',
                    'Your category has been deleted.',
                    'success'
                )
            }
        })
    });
<script>

Answer 1

你正在覆盖链接onclick。

e.preventDefault()停止事件传播，这会阻止项目被删除，就像你以前一样，这就是为什么你删除它工作的JS。

说过你确实停止传播并在sweetalert确认你想要它之后手动调用服务器。

在你的内心，你可能想要这样的东西。

           if (result.e) {
                fetch($(this).href()).then(()=>{
                swal(
                    'Deleted!',
                    'Your category has been deleted.',
                    'success'
                )
              }
            }

不确定我的href是否正确，自从我完成jQuery以来已经有一段时间了。

同样如评论中所述，GET是一个非常糟糕的动词，用于删除某些意外的内容。 DELETE可能是最好的IMO，你需要阅读fetch api文档，了解如何发送不同的动词:)

Answer 2

通过调用防止默认，您将停止在剃刀中为您构建的链接被调用。这意味着您必须在用户确认后自行处理该导航。你想做的事情就像我在下面概述的那样。

swal({
 //swal config
})
.then((result) => {
  if (result) {
    // Call deletion logic here - using Ajax

$.ajax({
    type: "DELETE",
    url: '/FakeController/Delete?id=10',
    contentType: 'application/json; charset=utf-8',
    success: function (data) {
        if (data) {
            // Works
        }
});

 }
});

您需要更新网址以匹配您拥有的控制器和操作，并且您需要更改它，这样一旦删除方法被命中，您就不会重定向到操作。另请注意，Ajax Call的类型是删除，因此它将与您更新的属性类型一起使用。

希望这可以帮助！

Answer 3

我通常使用Ajax Unobtrusive删除一个对象。类似下面的代码：

@using (Ajax.BeginForm("Action link", new AjaxOptions
{
    HttpMethod = "POST",
    Confirm = "Are you sure?",
    OnBegin = "OnBegin",
    OnSuccess = "OnSuccess",
    OnFailure = "OnFailure",
}))
{
    @Html.HiddenFor(modelItem => model.Id)
    <a class="btn btn-warning" title="delete" data-toggle="tooltip" onclick="$(this).parent('form').submit();"><i class="fa fa-remove"></i></a>
}

脚本部分如下：

function OnBegin() {
    swal({ text: 'Please wait ...' });
}

function OnSuccess() {
    swal({
        title: '',
        text: 'Its Successfully Done!',
        type: 'success',
        confirmButtonText: 'Ok'
    },
        function (isConfirm) {
            if (isConfirm) {
                location.reload(true);
            }
        });
}

function OnFailure() {
    swal({
        title: 'Error',
        text: 'Something happened + error',
        type: 'error',
        confirmButtonText: 'ok'
    });
}