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

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" })

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" })

Share Improve this question edited Jan 23, 2018 at 18:15 asked Jan 23, 2018 at 13:54 Svinjica 2,5193 gold badges41 silver badges72 bronze badges

1 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. – Lidaranis Commented Jan 23, 2018 at 14:10
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. – Soham Commented Jan 23, 2018 at 14:12
if (confirm) { where is confirm defined here? – ADyson Commented Jan 23, 2018 at 14:21
@Soham thanks mate, write answer so I can accept it :) – Svinjica Commented Jan 23, 2018 at 17:29

Add a ment |

3 Answers 3

Sorted by: Reset to default 2

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

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 plicated, 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;
  });
});

The above answer is correct and easy but jquery code is supposed to be like this:

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

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - How to create bootstrap 4 confirmation modal for delete in ASP.NET MVC - Stack Overflow

3 Answers 3

与本文相关的文章

评论列表(0)