bootstrap modal for delete confirmation mvc
Solution 1
Warning, its not safe to delete items via GET request!
Finally I found a way to use bootstrap modal dialog to confirm delete list item:
<tbody>
@foreach (var item in Model)
{
<tr>
<td>
<a id="deleteItem" class="deleteItem" data-target="#basic"
data-toggle="modal"
data-path="@Url.Action("Delete", "MyController", new { id = @item.id })">Delete</a>
</td>
<td>@Html.DisplayFor(modelItem => item.name)</td>
</tr>
}
</tbody>
This is my modal html
<div class="modal fade" id="basic" tabindex="-1" role="basic" aria-hidden="true" style="display: none;">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
<h4 class="modal-title">Delete Confirmation</h4>
</div>
<div class="modal-body">
Are you sure you want to delete this item?
</div>
<div class="modal-footer">
<button data-dismiss="modal" type="button" class="btn btn-default">Cancel</button>
<button id="btnContinueDelete" type="button" class="btn btn-primary">Delete</button>
</div>
</div>
</div>
And the javascript part
<script>
var path_to_delete;
$(".deleteItem").click(function(e) {
path_to_delete = $(this).data('path');
});
$('#btnContinueDelete').click(function () {
window.location = path_to_delete;
});
</script>
Here it is controller action
// GET: MyController/Delete
[HttpGet]
public ActionResult Delete(int id)
{
var model = Context.my_models.Where(x => x.id == id).FirstOrDefault();
if (model != null)
{
Context.my_models.DeleteOnSubmit(model);
Context.SubmitChanges();
return RedirectToAction("List");
}
return new HttpNotFoundResult();
}
Solution 2
I have a different take on doing this. Not that the previous ones were bad, but I think this approach is better, and very easy.
<script>
var path_to_delete;
var root = location.protocol + "//" + location.host;
$("#deleteItem").click(function (e) {
path_to_delete = $(this).data('path');
$('#myform').attr('action', root + path_to_delete);
});
</script>
<table class="table table-hover" id="list">
<thead class="bg-dark text-white">
<tr>
<th>
Edit
</th>
<th>
Employee
</th>
<th>
Effective Date
</th>
<th>
ST/OT/DT
</th>
<th>
Other Pay
</th>
<th>
Job
</th>
<th>
Pending?
</th>
<th>
Delete
</th>
</tr>
</thead>
<tbody>
@foreach (var item in Model)
{
<tr>
<td>
<a class="btn btn-sm" href="~/Employees/TerminationEdit/@item.Employee_Termination_Info_Id">
<i class="fa fa-lg fa-pencil-alt text-dark"></i>
</a>
</td>
<td>
@Html.DisplayFor(modelItem => item.Employee_Name_Number)
</td>
<td>
@Html.DisplayFor(modelItem => item.Effective_Date)
</td>
<td>
@Html.DisplayFor(modelItem => item.Employee_Time)
</td>
<td>
@Html.DisplayFor(modelItem => item.Employee_Other_Pay)
</td>
<td>
@Html.DisplayFor(modelItem => item.Job_Name)
</td>
<td>
@Html.DisplayFor(modelItem => item.Pending)
</td>
<td>
<a id="deleteItem" class="btn btn-sm" data-toggle="modal" data-target="#deleteModal"
data-path="/Employees/TerminationDelete/@item.Employee_Termination_Info_Id">
<i class="fa fa-lg fa-trash-alt text-danger"></i>
</a>
</td>
</tr>
}
</tbody>
</table>
<!-- Logout Modal-->
<div class="modal fade" id="deleteModal" 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">Are you sure?</h5>
<button class="close" type="button" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">Are you sure you want to delete this termination record? <br /><span class="text-danger">This cannot be undone.</span></div>
<div class="modal-footer">
<button class="btn btn-secondary" type="button" data-dismiss="modal">Cancel</button>
@using (Html.BeginForm("TerminationDelete", "Employees", FormMethod.Post, new { id = "myform", @class = "" }))
{
@Html.AntiForgeryToken()
<input type="submit" value="Delete" id="submitButton" class="btn btn-danger" />
}
</div>
</div>
</div>
</div>
So what happens here, is that the page will cycle through the model and draw the delete button (using font awesome). Note that here is is setting the data-path attribute for later use. When the button is clicked, it sets the form action for the button on the modal popup immediately. This is important, since it has a form around the delete button, it will send it to a POST and not a GET, as Rasika and Vasil Valchev pointed out. Plus, it has the benefit of the anti-forgery token.
vebs
Updated on July 05, 2022Comments
-
vebs almost 2 years
I'm developing an MVC 5 web application. Within one of my Razor Views I have a table which spits outs several rows of data.Beside each row of data is a Delete button. When the user clicks the delete button I want to have the Bootstrap Modal popup and ask the user to confirm their deletion.
add line before foreach loop
@Html.Hidden("item-to-delete", "", new {@id = "item-to-delete"}) @foreach (var item in Model) { <td> <button type="" class="btn btn-sm blue deleteLead" data-target="#basic" data-toggle="modal" data-id="@item.bookid">delete</button> </td> }
2.and my modal
<div class="modal fade" id="basic" tabindex="-1" role="basic" aria-hidden="true" style="display: none;"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button> <h4 class="modal-title">book Delete Confirmation</h4> </div> <div class="modal-body"> Are you Sure!!! You want to delete this Ad? </div> <div class="modal-footer"> <button type="button" class="btn blue" id="btnContinueDelete">Continue</button> <button type="button" class="btn default" data-dismiss="modal">Cancel</button> </div> </div> </div> </div>
script
<script> $(".deletebook").click(function(e) { e.preventDefault(); var id = $(this).data('id'); $('#item-to-delete').val(id); }); $('#btnContinueDelete').click(function() { var id = $('#item-to-delete').val(); $.post(@Url.Action("Deletebook", "book"), { id: id }, function(data) { alert("data deleted"); }); }); </script>
in console i get => Empty string passed to getElementById().