javascript - 如何在 MVC 中使用警告框而不重定向到其他页面？

Question

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

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

Controller ；

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 进行删除方法调用，因此您可能会返回 json 响应而不是重定向响应。我还建议在更改数据时将删除操作保留为 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 });
   }
}