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

Question

i have created web application in MVC using Entity Framework to perform CRUD operations. in when i Delete any record it takes me to Delete View and then i am able to Delete that Record. but instead of doing that i want to have a alert box stating "Are you sure you want to delete this record" through java script and then without talking user to another page i want to delete the record.

i am using following option but its not helping...

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

It is caching error stating "Not Found". Am i doing any mistake while stating URL.

Answer 1

Your success callback is invoked after the request to the server has already been sent and the record already deleted.

You need to confirm the user intention before you're performing the Ajax request, typically using the window.confirm method.

Something like:

$('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);
        }
    });
});

See Documentation

Answer 2

Use jquery dialog. In your View add:

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

and change your function:

$('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

Currenty what you're doing invokes the action method and only after that your confirmation dialog shows. I think you need the reverse. Assuming you have a button in your View that leads the user to the deletion of a certain record I would do this. First, I would have a function on the client side that would just ask user to confirm if he/she is sure and set the button onclick to that function.

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

And in your yesDeleteIt function you can go AJAX:

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