如何在不重定向到 MVC 中的不同页面的情况下使用警报框？

Question

我正在尝试显示一个自定义警报框以确保用户想要删除一个项目。删除该项目后，会打开一个新警报框并显示“该项目已删除”，然后用户必须单击“确定”按钮。

我的问题是，删除该项目后，该页面被重定向到另一个页面，而无需单击“确定”按钮。我怎样才能安排代码来实现我的观点。

控制器；

public ActionResult Delete(int id)
{
   Category category = db.Categories.Find(id);
   db.Categories.Remove(category);
   db.SaveChanges();
   return RedirectToAction("Index");
}

删除按钮；

<button type="button" class="btn bg-red waves-effect" onclick="Delete();">Delete</button>

警报脚本；

<script>
    function Delete()
    {
        swal({
            title: "Are you sure?",
            text: "You will not be able to recover this imaginary file!",
            type: "warning",
            showCancelButton: true,
            confirmButtonColor: "#DD6B55",
            confirmButtonText: "Yes, delete it!",
            closeOnConfirm: false
        },
            function () {
                location.href = '@Url.Action("Delete", "Categories", new { id = Model.Id })',
                swal({
                    title: "Deleted!",
                    text: "Your imaginary file has been deleted.",
                    type: "success"
                })
            });
    }
</script>

Answer 1

当您执行location.href="Categories/Delete/123" 行时，浏览器基本上会将当前页面重定向到这个新的url，本质上是发出一个新的GET 请求。如果您只想从服务器中删除该项目并向用户显示警报，则需要通过 ajax 来完成。

所以在“确认删除”按钮单击的回调中，对服务器进行 ajax 调用。您可以使用 jQuery $.post 方法。

function Delete() {
    swal({
            title: "Are you sure?",
            text: "You will not be able to recover this imaginary file!",
            type: "warning",
            showCancelButton: true,
            confirmButtonColor: "#DD6B55",
            confirmButtonText: "Yes, delete it!",
            closeOnConfirm: false
        },
        function() {
            var url = '@Url.Action("Delete", "Home", new {id = Model.Id})';
            $.post(url,
                function(response) {
                    if (response.success === "success") {
                        swal({
                            title: "Deleted!",
                            text: "Your imaginary file has been deleted.",
                            type: "success"
                        });
                    } else {
                        // failed to delete. show messaage to user
                        alert(response.message);
                    }
                });
        });
}

此外，由于您通过 ajax 进行 Delete 方法调用，您可能会返回 json 响应而不是重定向响应。我还建议将 Delete 操作保留为 HttpPost 操作，因为它会更改数据。

[HttpPost]
public ActionResult Delete(int id)
{
   try
   {
     Category category = db.Categories.Find(id);
     db.Categories.Remove(category);
     db.SaveChanges();
     if(Request.IsAjaxRequest())
     {
       return Json(new { status  = "success" });
     }
     return RedirectToAction("Index");
   }
   catch(Exception e)
   {
     return Json(new { status = "failed",message=e.Message });
   }
}