如何在 Javascript 中定义 URL 以调用驻留在控制器中的 ActionResult 方法

Question

我使用实体框架在 MVC 中创建了 Web 应用程序来执行 CRUD 操作。当我删除任何记录时，它会将我带到删除视图，然后我就可以删除该记录。但我不想这样做，而是希望有一个警告框，通过 java 脚本说明“您确定要删除此记录”，然后无需将用户与另一个页面交谈，我想删除该记录。

我正在使用以下选项，但它没有帮助...

$(function () {
    $('table.dataList tbody a[linktype="Delete"]').click(function (e) {
        e.preventDefault();
        $.ajax({
            type: 'POST',
            url: '/DepartmentController/DeleteConformed/',
            dataType: 'script',
            success: function () {
                alert('Are you sure you want to Delete this Department');
            },
            error: function (req, status, err) {
                alert(err);
            }
        });
    });

这是缓存错误，说明“未找到”。我在说明 URL 时有什么错误吗？

Answer 1

您的success 回调在向服务器的请求已经发送并且记录已经被删除之后被调用。

您需要在执行 Ajax 请求之前确认用户意图，通常使用window.confirm 方法。

类似：

$('table.dataList tbody a[linktype="Delete"]').click(function (e) {
    if (!window.confirm("Are you sure you want to delete this Department?"))
        return;

    e.preventDefault();

    $.ajax({
        type: 'POST',
        url: '/DepartmentController/DeleteConformed/',
        dataType: 'script',
        success: function () {
            alert('Department deleted successfully');
        },
        error: function (req, status, err) {
            alert(err);
        }
    });
});

见Documentation

Answer 2

使用 jquery 对话框。在您的视图中添加：

<div id="confirm-dialog"></div>

并改变你的功能：

$('table.dataList tbody a[linktype="Delete"]').click(function (e) {
    e.preventDefault();
    $("#confirm-dialog").dialog({
        title: "Are you sure you want to delete this Department?",
        autoOpen: false,
        modal: true,
        height: 'auto',
        close: function () {
            $(this).dialog("close");
        }
    });

    $("#confirm-dialog").dialog({
        buttons: {
            "OK": function () {
                $.ajax({
                    type: 'POST',
                    url: '/DepartmentController/DeleteConformed/',
                    dataType: 'script',
                    success: function () {
                        alert('Are you sure you want to Delete this Department');
                    },
                    error: function (req, status, err) {
                        alert(err);
                    }
                });
            },
            "Cancel": function () {
                $(this).dialog("close");
            }
        }
    });
 });

Answer 3

当前您正在执行的操作会调用 action 方法，并且只有在此之后您的确认对话框才会显示。我认为你需要反过来。假设您的视图中有一个按钮可以引导用户删除某条记录，我会这样做。首先，我会在客户端有一个功能，它只会要求用户确认他/她是否确定并将按钮 onclick 设置为该功能。

 function confirmDelete(){
    $('<div id="dialog">').dialog({
             text:"Are you sure you want to delete?",
             modal:true,
             buttons:[{
                text: 'Yes',
                click: yesDeleteIt()
                },
             {
                text: 'No',
                click: function ()
                {
                   $(this).dialog('close');
                }
             }]
       })
 }

在你的 yesDeleteIt 函数中你可以使用 AJAX：

  function yesDeleteIt(){
     url= '/Department/DeleteConformed/';
     $.post(url);//
  }