Delete confirmation using SweetAlert in ASP.Net Core MVC - model-view-controller

Question

How to use sweetalert confirm deleting in my project
i am using asp.net MVC core 5.0
I'm trying to make delete confirmation for category. When user click this button in Index.cshtml it will show delete confirmation for delete data or not, but delete confirmation just appear for while after that data deleted without the confirmation.
Index.cshtml side =
<tr>
<th>ID</th>
<th>Kategori</th>
<th>Sil</th>
<th>Düzenle</th>
</tr>
#foreach (var item in Model)
{
<tr>
<td>#item.Id</td>
<td>#item.CategoryName</td>
<td>
<a asp-action="Delete" asp-controller="Category" asp-route-id="#item.Id" class="btn btn-danger" id="delete">Sil</a>
</td>
<td><a asp-action="Edit" asp-controller="Category" asp-route-id="#item.Id" class="btn btn-primary">Güncelle</a></td>
</tr>
}
Controller side =
public IActionResult Delete(int id)
{
var category = _unitOfWork.categoryRepo.Get(x => x.Id == id);
_unitOfWork.categoryRepo.Delete(category);
_unitOfWork.Save();
return RedirectToAction("Index");
}
js side =
<script src="/adminlte/vendor/jquery/jquery.min.js"></script>
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
sweetalert =
<script>
function confirm() {
swal({
title: "Are you sure?",
text: "Once deleted, you will not be able to recover",
icon: "warning",
buttons: true,
dangerMode: true,
})
.then((willDelete) => {
if (willDelete) {
swal("deleted!", {
icon: "success",
});
} else {
swal("category is safe!");
}
});
return false;
}

Answer 1

Merhaba/Hi İbrahim,
Change your code like below;
<td><div><form asp-action="Delete" method="post" asp-controller="Category" asp-route-id="#item.Id"><button type="button" class="btn btn-danger" onclick="return functionConfirm(this)">Delete</button></form>
</div>
</td>
and
#section Scripts{
<script>
function functionConfirm(event) {
const swalWithBootstrapButtons = Swal.mixin({
customClass: {
confirmButton: 'btn btn-success',
cancelButton: 'btn btn-danger'
},
buttonsStyling: false
})
swalWithBootstrapButtons.fire({
title: 'Emin misiniz?',
text: "Bu işlem geri alınamaz!",
icon: 'warning',
showCancelButton: true,
confirmButtonText: 'Evet, sil!',
cancelButtonText: 'Hayır, iptal',
reverseButtons: true,
timer: 3000
}).then((result) => {
if (result.isConfirmed) {
$("form").submit();
swalWithBootstrapButtons.fire({
title: 'Silindi!',
text :'Kategori silindi.',
icon: 'success',
timer:'2000'
}
)
} else if (
/* Read more about handling dismissals below */
result.dismiss === Swal.DismissReason.cancel
) {
swalWithBootstrapButtons.fire(
'İptal edildi',
'',
'error'
)
}
})
}
</script>
}