In this post i will explain in detail how to use bootstrap modal box as confirm dialog for delete or update action.
Windows confirm
The confirm () method displays a
dialog box with a specified message, along with an OK and a Cancel button.
Problem with windows
confirm
What if you want some nice design for windows confirm and want to apply CSS?
Windows confirm () alerts cannot be
styled, they are generic to the browser.
What if someone wants
to apply CSS to confirm box or nice design?
Answer is, use bootstrap model popup
box.
How to use
bootstrap confirm box for following .net MVC action?
@Html.ActionLink("Delete", "Delete", new { id= item.id }, new { id = "btnDelete",
@class = "btn btn-sm", onclick = "return confirm('Are you sure you wish to delete?');" })
OR
<a href="@Url.Action("Update", "Products", new { ud= item.id })" id="btnUpdate" class="btn
btn-sm" onclick="return confirm('Are you sure you wish to update?');" />
Bootstrap model box
solution for windows confirm
Add following bootstrap model html
code in shared layout or in same view
<!-- Modal -->
<div class="modal fade" id="sampleModal" tabindex="-1" role="dialog" aria-labelledby="sampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Confirm</h5>
<button type="button" id="btnClose" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div id="confirmMsg" class="modal-body">
</div>
<div class="modal-footer">
<button type="button" id="btnCancel" class="btn
btn-warning" data dismiss="modal">Cancel</button>
<button type="button" id="btnOk" class="btn btn-success">Ok</button>
</div>
</div>
</div>
</div>
Remove windows confirm onclick call
@Html.ActionLink("Delete", "Delete", new { id= item.id }, new { id = "btnDelete", @class = "btn btn-sm"})
OR
<a href="@Url.Action("Update", "Products", new { ud= item.id })" id="btnUpdate" class="btn btn-sm" />
Add
bootstrap popup code in jQuery delete button Click event, same call you can
create for edit action also
$("#btnDelete").click(function (event)
{
var delhref = $(this).attr('href');
var isOk = false;
event.preventDefault();
$("#confirmMsg").text("Are you sure you wish to delete?");
$('#sampleModel').modal({
backdrop: 'static',
keyboard: false
});
$("#sampleModel").off("click").on("click", "#btnOk", function (e) {
e.preventDefault();
$('#sampleModel').modal("hide");
$('#sampleModel').data("modal", null);
isOk = true;
});
$("#btnCancel").off("click").on("click", function (e) {
e.preventDefault();
$("#sampleModel").modal("hide");
$("#sampleModel").data("modal", null);
isOk = false;
});
$("#btnClose").off("click").on("click", function (e) {
e.preventDefault();
$("#sampleModel").modal("hide");
$('#sampleModel').data("modal", null);
isOk = false;
});
$("#sampleModel").off("hidden.bs.modal").on("hidden.bs.modal", function (e) {
e.preventDefault();
if (isOk) {
//here you require some customization in URl, change according to your requirement
window.location.href = window.location.href + delhref;
}
})
return isOk;
});