How to create bootstrap 4 confirmation modal for delete in ASP.NET MVC

Question

I'm having trouble creating bootstrap confirmation modal in ASP.NET MVC. I've managed to successfully call modal when clicking on delete link inside view, but when I want to confirm, nothing happens.

Index View()

<p>
    @Html.ActionLink("Create New", "Create")
</p>
<table class="table">
    <tr>
        <th>
            @Html.DisplayNameFor(model => model.CurrentGrade.GradeName)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Name)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Surname)
        </th>
        <th></th>
    </tr>

@foreach (var item in Model) {
    <tr>
        <td>
            @Html.DisplayFor(modelItem => item.CurrentGrade.GradeName)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Name)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Surname)
        </td>
        <td>
            @Html.ActionLink("Edit", "Edit", new { id=item.StudentId }) |
            @Html.ActionLink("Details", "Details", new { id=item.StudentId }) |
            @Html.ActionLink("Delete", "Delete", new { id=item.StudentId }, new { @class="element", @data_toggle = "modal", @data_target = "#exampleModalCenter" })
        </td>
    </tr>
}

</table>

Here is modal that I'm calling:

<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <h6>Are you sure that you want to delete this?</h6>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-danger">Delete</button>
            </div>
        </div>
    </div>
</div>

And finally, here is my simple js script.

    $(document).ready(function () {
        $('.element').click(function (e) {

            $('#exampleModalCenter').modal('show');
            if (confirm) {
                return true;
            } else {
                return false;
            }
        });
});

UPDATE

I tried edit js code according to link that Soham provided but without any luck.

$(document).ready(function () {
        $('#exampleModalCenter').on('show.bs.modal', function (e) {
            $(this).find('.btn-danger').attr('href', $(e.relatedTarget).data('href'));
            $('.debug-url').html('Delete URL: <strong>' + $(this).find('.btn-danger').attr('href') + '</strong>');
        });
    });

Maybe problem lies in @Html.ActionLink for Delete?

 @Html.ActionLink("Delete", "Delete", new { id = item.StudentId }, new { @data_toggle = "modal", @data_target = "#exampleModalCenter" })

Solution 1

I was able to reproduce your issue and found some things required to get confirm modal popup work.

Assumed Delete action method exists:

[HttpPost]
public ActionResult Delete(int id) 
{
    // other stuff

    return View();
}

Here are those key points:

1) Add data-id attribute to ActionLink method.

@Html.ActionLink("Delete", "Delete", new { id=item.StudentId }, new { @class="element", 
                 @data_toggle = "modal", @data_target = "#exampleModalCenter", 
                 @data_id = item.StudentId })

2) Add a hidden field which stores value of StudentId to delete.

@Html.Hidden("itemid", "", new { id = "itemid" })

3) Add id element to 'Delete' button in modal popup.

<div class="modal-footer">
    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
    <button type="button" id="Delete" class="btn btn-danger">Delete</button>
</div>

4) Use this script inside document.ready to show modal popup and make request for 'Delete' button click:

$('.element').click(function (e) {
    e.preventDefault();
    $('#exampleModalCenter').modal('show');

    var id = $(this).data('id');
    $('#itemid').val(id);
});


$('#Delete').click(function () {
   var studentId = $('#itemid').val();

   $.post(@Url.Action("Delete", "Delete"), { id: studentId }, function (data) {
       // do something after calling delete action method
       // this alert box just an example
       alert("Deleted StudentId: " + studentId);
   });

   $('#exampleModalCenter').modal('hide');
});

Live example: .NET Fiddle

Similar issues:

MVC Actionlink & Bootstrap Modal Submit

bootstrap modal for delete confirmation mvc

Solution 2

If you already have the delete action setup in the controller by entity framework, when you added a controller with actions, it should not be complicated, as all what you have to do after the user confirms the delete is to redirect to the delete action view by using simple JavaScript code and a hidden field to hold the item id to pass it in with the URL string.

The bootstrap dialog modal

<!-- Confirmation modal -->
<div class="modal fade" id="confirmdelete" tabindex="-1" role="dialog" aria-labelledby="confirmdelete" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="confirmdelete">Action Confirmation</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <p>Are you sure you want to delete this record ??</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-primary" id="action">Delete</button>
            </div>
        </div>
    </div>
</div>

Hidden field to hold the item id to be deleted

Make sure it is placed inside the foreach loop

 @Html.HiddenFor(c => item.ID, new { @id = "hdnItemId" })

Jquery simple code to redirect to the delete action with item id included

$(document).ready(function () {
  $('#action').click(function () {
    var itemId = $('#hdnItemId').val();
    var actionLink = "/Banks/Delete/" + itemId;
    window.location.href = actionLink;
  });
});

Comments

[Lidaranis]

That happens because you expect the popup to behave like the default javascript confirm message. But it doesn't. The default one stops the execution until you press one of the buttons while your custom popup does not. The easiest way to do this with your current setup is to change the click function to make an ajax call to the delete action instead of returning true.

[Soham]

You can directly set GET/POST action on your Delete button in your confirmation popup. You just need an ID or some data to identify which row is being deleted. Take a look at this answer.

[ADyson]

if (confirm) { where is confirm defined here?

[Svinjica]

@Soham thanks mate, write answer so I can accept it :)