First of all, I put a button on my HTML table's row to click on it.You can place it wherever you want.Also, I bind a javascript function which is ShowDeleteModal to call confirmation module.
<div class='btn-group'>
<button type='button' class='btn btn-danger btn-sm' onclick="ShowDeleteModal('Log', 'Delete', '@Model.Id' )">
<span class='glyphicon glyphicon-remove'></span> Delete
</button>
</div>
The following image shows how the source HTML code looks in browser(F12)
And here is the ShowDeleteModal function,
function ShowDeleteModal(controller, action, id) {
$("#deleteModal").modal("show");
$("#controllerToDelete").val(controller);
$("#actionToDelete").val(action);
$("#deletedObject").val(id);
}
When the user clicked the button a deleting confirmation message will display to ask will you continue or not?
This message will be inside a bootstrap modal which has three inputs field those are hidden.Those inputs are stored in order of Controller Name(controllerToDelete), Action Name(actionToDelete), and GUID id(deletedObject) is relevant to which object will be deleted. You can see the following code.
<div class="modal fade" id="deleteModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Deleting Operation</h4>
</div>
<div class="modal-body">
<p>The data temporarily will be deleted, Will you continue?</p>
@{
var deleteRequestVerificationToken = Guid.NewGuid();
TempData["DeleteRequestVerificationToken"] = deleteRequestVerificationToken;
}
<input hidden="hidden" id="DeleteRequestVerificationToken" value="@deleteRequestVerificationToken" />
<input hidden="hidden" id="deletedObject" value="" />
<input hidden="hidden" id="controllerToDelete" value="" />
<input hidden="hidden" id="actionToDelete" value="" />
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" onclick="ConfirmDelete()" data-dismiss="modal">Continue</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
</div>
</div>
</div>
</div>
We will post them inside AJAX data.But here I want to be sure that if a post request is coming from somewhere it must be coming from my page or my delete button on the table. It requires a validation system such as MVC's @Html.AntiForgeryToken. We can create our own key on the inside of modal of the deleting to validate the token in Action method after submitting. Place the following code on the page,
@{
var deleteRequestVerificationToken = Guid.NewGuid();
TempData["DeleteRequestVerificationToken"] = deleteRequestVerificationToken;
}
When the page is loaded it sets up a value named 'deleteRequestVerificationToken ' with new GUID.
We store it inside TempData to reach it on the Controller's Action.
Posting process using JQuery with AJAX functionality inside 'ConfirmDelete' function,
function ConfirmDelete() {
var securityToken = $("#DeleteRequestVerificationToken").val();
var controllerToDelete = $("#controllerToDelete").val();
var actionToDelete = $("#actionToDelete").val();
var deletedObject = $("#deletedObject").val();
$.ajax({
type: "POST",
url: "/" + controllerToDelete + "/" + actionToDelete + "?id=" + deletedObject + "&securityToken=" + securityToken,
success: function (response) {
if (response.success == true) {
window.location.href = response.urlToRedirect;
}
}
});
}
In this sample, we assume that we have a Log table and are trying to delete a row from the table.
If you prepare your Action's parameter like the following code you can find out whether we created this ticket or not. If the coming token(securityToken) is equal to the token inside TempData(DeleteRequestVerificationToken) we can keep going on deleting operation.
// POST: Log/Delete/5
[HttpPost]
// [ValidateAntiForgeryToken]
public ActionResult Delete(Guid? id,Guid? securityToken)
{
if (id == null || securityToken == null || TempData.Keys.Any(k => k == "DeleteRequestVerificationToken") || securityToken.ToString() != TempData["DeleteRequestVerificationToken"].ToString())
return Json(new { success = false, message = "Bad Request" }, JsonRequestBehavior.AllowGet);
var model = Get<Log>(id);
if (model != null)
{
model.IsActive = false;
//EditEntity<Log>(model);
//return DeleteEntity<Log>(model, new Route() { Controller = "Log", Action = "Index" });
return Json(new { success = true, urlToRedirect = string.Format("{0}", Url.Action("Index","Log")) } , JsonRequestBehavior.AllowGet);
}
else
{
ModelStateIsNotValid();
return Json(new { success = false , urlToRedirect = string.Format("{0}", Url.Action("Index", "Log")) }, JsonRequestBehavior.AllowGet);
}
}
As you see above, the values that the two keys carry are matched so we can continue on our way.
