Razor MVC Get Confirm Message Before Delete

Question

First of all i dont wanna use the following :

"onclick="return confirm('are you sure you wanna delete?');"

Because i wanna be able to edit the buttons, edit the layout, etc.

My problems are:

When i click on something to delete, it immediatly delete, not stopping in the Javascript
After that what code should i place in the "Yes" button, to resume the post.

My view:

@using (Html.BeginForm("ActionAppointment", "Client"))
{
  @foreach (var item in Model)
  {
    .... (more columns here )
    <td align="center">
         <button type="submit" name="ToEditID" title="Editar" value="@item.ID">
         <span class="glyphicon glyphicon-pencil" style="color:blue" aria-hidden="true"></span>
         </button>
         <button type="submit" name="ToDeleteID" id="DeleteID" title="Apagar" value="@item.ID">
         <span class="glyphicon glyphicon-erase" style="color:red " aria-hidden="true"></span>
         </button>
        </td>                  
  }
}

My dialog box:

<div id="dialog" title="Confirmation Required">
                Are you sure you wanna delete?
            </div>

My javascript code:

         $("#dialog").dialog({
        modal: true,
        autoOpen: false,
        title: "Confirmation",
        width: 350,
        height: 160,
        buttons: [
        {
            id: "Yes",
            text: "Yes",
            click: function () {
              //How to resume the post here ?
            }
        },
        {
            id: "No",
            text: "No",
            click: function () {
                $(this).dialog('close');
            }
        }
        ]
    });
    $("#DeleteID").click(function (e) {
        e.preventDefault();
        $('#dialog').dialog('open');
    });

My Controller have the following action:

 ClientAction(string EditID, string DeleteID){
if (DeleteID != null){
 delete code here......

}

Thanks for your time.

EDITED: Changing the js to a class instead of the id of the button worked. Only need to resume the post now, ideas? :P

This might be of some help to you: http://stackoverflow.com/a/9091077/3585278 — Danieboy, Jul 22 '16 at 15:30
It appears as though you're putting multiple rows each with their own button that has an ID of "DeleteID". That won't work. — krillgar, Jul 22 '16 at 15:31

Marko · Accepted Answer · 2016-07-22T17:19:59.043

You have many issues in your code the way it is right now. First of all your delete button is inside foreach loop and you are giving them ID so basically you end up with multiple items on your page with the same id. You need to remove the id attribute completely and base your javascript code off of a class. So for example:

<button type="submit" name="ToDeleteID" class="js-delete" title="Apagar" value="@item.ID">
    <span class="glyphicon glyphicon-erase" style="color:red " aria-hidden="true"></span>
</button>

and then have the following:

$(".js-delete").click(function (e) {
    e.preventDefault();
    $('#dialog').dialog('open');
});

2nd issue, your dialog div's ID is "delete-dialog" but you are attaching the the bootstrap dialog handler to something with ID "dialog". So change the dialog div id:

<div id="dialog" title="Confirmation Required">
    Tem a certeza que pretende eliminar a conta?
</div>

Once you have that fixed you need to somehow define that the YES button should submit to the delete URL. The best way would be via some sort of AJAX call. So you need to modify the code for the click event handler of your YES button to something like this:

click: function () {
    $.ajax({
       url: '@Url.Action("ClientAction", "ControllerName")?EditID=' + editId + '&DeleteID=' + deleteId,
       type: "GET",
       cache: false,
       success: function () {
           // Some logic to delete the html of the deleted item from the page...
       }
    });
}

Note that you will have to pass in the parameters (EditID and DeleteID) which your controller action is expecting. I will leave that to you but I suggest you look into the usage of data- (data-dash) attributes. Good luck...

Thanks, now the dialog opens ;) Any idea what i should place on the Yes button in order to resume the post ? — Fábio, Jul 22 '16 at 15:50
@Fábio I made additional edits I hope it helps you, but you will need to figure out some stuff on your own... Good luck! — Marko, Jul 22 '16 at 17:22

Razor MVC Get Confirm Message Before Delete

1 Answers1