Use Bootstrap Modal Confirmation to Delete List Items

Question

I am trying to create a delete confirmation using bootstrap modal. Everything works nicely except the modal always displays and deletes the first item in the list and not the actual list item where the delete button was clicked. Can someone see where I am going wrong?

<table class="table">

@foreach (var item in Model)
{
    <tr>
        <td>
            @Html.DisplayFor(modelItem => item.InvoiceID)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Description)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.InvoiceDate)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.DueDate)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Paid)
        </td>
        <td style="white-space: nowrap;width: 1px;">               
            <button type="button" class="btn btn-primary btn-xs" onclick="location.href='@Url.Action("Edit", "Billing", new { id = item.InvoiceID })'"><span class="glyphicon glyphicon-edit" style="vertical-align:middle;margin-top: -5px"></span> Edit</button>
            <button type="button" class="btn btn-default btn-xs" onclick="location.href='@Url.Action("Index", "InvoiceItem", new { id = item.InvoiceID })'"><span class="glyphicon glyphicon-eye-open" style="vertical-align:middle;margin-top: -5px"></span> Details</button>
            <button type="button" class="btn btn-danger btn-xs" data-toggle="modal" data-target="#myModal" data-id=@item.InvoiceID><span class="glyphicon glyphicon-trash" style="vertical-align:middle;margin-top: -5px"></span> Delete</button>
            <div id="myModal" class="modal fade" role="dialog">
                <div class="modal-dialog">
                    <!-- Modal content-->
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal">&times;</button>
                            <h4 class="modal-title">Confirm Delete</h4>
                        </div>
                        <div class="modal-body">
                            <!-- The problem seems to be here:--> 
                            <p>Are you sure you want to delete invoice number: <b>@item.InvoiceID</b></p>
                        </div>
                        <div class="modal-footer">
                            <form asp-controller="Billing" asp-action="Delete" asp-route-id=@item.InvoiceID method="post" class="form-inline" role="form">
                                <button type="submit" class="btn btn-danger"><span class="glyphicon glyphicon-trash" style="vertical-align:middle;margin-top: -5px"></span> Delete</button>
                                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                            </form>
                        </div>
                    </div>
                </div>
            </div>               
        </td>
    </tr>
}

The above view is loaded via script to avoid a page refresh with the below code when a dropdown is changed:

<script type="text/javascript">     


    $(document).ready(function () {
        loadPartial();
        $("#ddlCategory").change(loadPartial);
    });

    function loadPartial() {
        var companyID = $("#ddlCategory").val();
        var displayPaid = $("#chkDisplayPaid").is(':checked');
        var url = '@(Url.Action("InvoiceList", "Billing",null, null ))?companyID=' + companyID + '&displayPaid=' + displayPaid;
        $("#InvoiceList").load(url);
    }
</script> 

Answer 1

You are repeating the same modal with same id in the loop which is wrong, a html page can't have duplicate id's, either change your modal id="myModal" to id="@(i + 1)" and data-target="#(i +1 )" and foreach loop to for loop as @for(var i = 0; i > model.count() ; i++).

But this approach is wrong as you are repeating the modal for every row.

Instead of this, keep the modal outside to table and do it as below:

@foreach (var item in Model)
{      
  ......rest same code                     
   <button type="button" class="btn btn-danger btn-xs" data-toggle="modal" data-target="#myModal" data-id=@item.InvoiceID><span class="glyphicon glyphicon-trash" style="vertical-align:middle;margin-top: -5px"></span> Delete</button>
  ....... rest same code     
 }

Put your modal out of the table and add input hidden field with id inside its form.

<div id="myModal" class="modal fade" role="dialog">
                <div class="modal-dialog">
                    <!-- Modal content-->
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal">&times;</button>
                            <h4 class="modal-title">Confirm Delete</h4>
                        </div>
                        <div class="modal-body">
                            <!-- The problem seems to be here:--> 
                            <p>Are you sure you want to delete invoice number: <b id="InvoiceID"></b></p>
                        </div>
                        <div class="modal-footer">
                            <form asp-controller="Billing" asp-action="Delete" method="post" class="form-inline" role="form">
<input type="hidden" id="id">
                                <button type="submit" class="btn btn-danger"><span class="glyphicon glyphicon-trash" style="vertical-align:middle;margin-top: -5px"></span> Delete</button>
                                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                            </form>
                        </div>
                    </div>
                </div>
            </div> 

show.bs.modal event fires on opening the modal.

 $(document).ready(function () {
        $('#myModal').on('show.bs.modal', function (event) {
            var button = $(event.relatedTarget);//Button which is clicked
            var clickedButtonId= button.data('Id');//Get id of the button
// set id to the hidden input field in the form.
           $("#InvoiceID").text(clickedButtonId);
           $("input #id").val(clickedButtonId);
    });    

*If you like, for Edit and Detail you can open the same or different modal in the same page.