MVC Actionlink and Bootstrap Modal Submit

Question

I am developing an MVC 5 web application. In one of my Razor views, I have a table that spits out several rows of data. Next to each row of data is the "Delete" button. When the user clicks the delete button, I want to get the Bootstrap Modal popup and ask the user to confirm their removal.

@foreach (var item in Model.Data) { <tr> <td>...</td> <td>@Html.ActionLink("Delete", "Delete", new { id = item.ID }, new { @class = "btn btn-danger btn-xs", data_toggle = "modal", data_target = "#myModal" })</td> </tr> } 

As soon as the user clicks the “Delete” button, the modal pops up normally, but I can’t get the identifier in the Actionlink parameter to go to the “Confirm” button in my module so that it is sent to the delete action in my controller.

 <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> <h4 class="modal-title" id="myModalLabel">Delete Nomination</h4> </div> <div class="modal-body"> Are you sure you wish to delete this nomination? </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button> <button type="button" id="mySubmit" class="btn btn-primary">Confirm</button> </div> </div> </div> </div> 

Can anybody help?

Thanks.

Answer 1

 <script type="text/javascript"> //Everytime we press delete in the table row $('.delete').click(function(e) { e.preventDefault(); //Update the item to delete id so our model knows which one to delete var id = $(this).data('id'); $('#item-to-delete').val(id); }); //Everytime we press sumbit on the modal form... $('#mySubmit').click(function() { //Get the id to delete from the hidden field var id = $('#item-to-delete').val(); //Call our delete actionresult and pass over this id $.post(@Url.Action("Delete", "Delete"), { id : id } , function (data) { alert("Deleted"); }); }); </script> 

and your html ...

 @Html.Hidden("item-to-delete", "", new { @id = "item-to-delete"}) @foreach (var item in Model.Data) { <tr> <td>...</td> <td><a href="" class="btn btn-danger btn-xs delete" data-toggle= "modal" data-target="#myModal" data-id="@item.id">Delete</a></td> </tr> } 

Actions of your controller, I assume something like this ...

 public ActionResult Delete(Guid id) { } 

Answer 2

You need to put a zero after the second deletion, but it will work, but you will still have a problem with it, because what he is going to try is to open a page inside your modal in order to best achieve what you want to do this is to make an ajax call to the server and successfully return the data to this div that is around your modal