Javascript 如何在ASP.NET MVC中通过SweetAlert进行删除

我想通过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>

@ActionLink（“删除”，“删除类别”，新{id=item.id}，新{
@class=“delete”}）
$（“正文”）。在（“单击”，“a.删除”，功能（e）{
e、 预防默认值（）；
游泳({
标题：“你确定吗？”，
文本：“您将无法还原此内容！”，
键入：“警告”，
showCancelButton:true，
confirmButtonColor:“#3085d6”，
cancelButtonColor:“#d33”，
confirmButtonText:“是的，删除它！”
})。然后（（结果）=>{
如果（结果e）{
游泳(
“已删除！”，
“您的类别已被删除。”，
“成功”
)
}
})
});

您正在覆盖链接onclick

e.preventDefault（）

停止事件传播，该事件阻止项目以与以前相同的方式被删除，这就是为什么如果删除JS，它会工作的原因

在sweetalert确认您需要propogation后，您确实停止了propogation并手动调用服务器

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

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

不确定我得到的href是否正确，我已经有一段时间没有使用jQuery了

另外，正如注释GET中所指出的那样，当某件事情出乎意料时，用它来删除它是一个非常糟糕的动词。在我看来，删除可能是最好的选择，您需要阅读fetchapi文档，了解如何发送不同的动词：）

我通常用于删除对象。类似下面的代码：

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

---

通过调用prevent default，您将停止调用razor中为您构建的链接。这意味着在用户确认后，您必须自己处理该导航。你会想做一些我在下面概述的事情

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

 }
});

您需要将url更新为 匹配您拥有的控制器和操作，并且您希望对其进行更改，以便在delete方法被命中时不会重定向到操作。还要注意Ajax调用的类型是delete，因此它将与更新的属性类型一起使用

---

希望这有帮助

删除操作永远不应该是GET，它需要是POST。如果按下“确认”按钮，则应进行ajax调用以调用

[HttpPost]

方法clicked@StephenMuecke

[HttpDelete]

也是一个动词：）@StephenMuecke删除操作正在运行。嗯，这里是新手。这就是为什么我在anchor上使用class。一个简单的警报框正在工作，但我想通过sweetAlert对话框删除。您正在更改的数据-不要使用GET。如果记录已成功删除，您是想重定向，还是想保持在同一页面上（参考典型示例），我假设您可能会这样做（但这意味着方法中的

返回RedirectToAction（“Categories”）；

，没有意义：）-您需要返回一个

JsonResult

来指示是否成功，如果成功，则从DOM中删除相关记录。我链接的文章给出了一个例子（大约2/3），我将动词改为[HttpDelete]，但它仍然不起作用。当我点击“确认”按钮时，什么也没有发生。@HammadAhmed上面的代码是针对一个GET请求的，就像您当前所做的一样。正如我所指出的，您需要阅读fetch api以了解如何向其传递删除谓词。使用ajax有点毫无意义，因为您需要使用

location.reload

来完全刷新页面。@StephenMuecke您是对的，我真的不

reload

页面。这实际上取决于查看页面。最好只是从页面中删除元素。

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

 }
});