Bước 1: Đưa thẻ a để click xoá
<a href="#" temp_href="#" class="delete-link" data-id="@item.MaKhachHang" data-confirm="Bạn có thật sự muốn xoá?" data-toggle="modal" data-target="#confirmModal">Xoá</a>
Trong đó, item.MaKhachHang là Khoá, #confirmModal chính là Modal Popup
Bước 2: Chuẩn bị Template Modal Popup
<div class="modal fade" id="confirmModal" tabindex="-1" role="dialog" aria-labelledby="confirmModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="confirmModalLabel">Xác nhận xóa</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p id="confirmMessage"></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Hủy</button>
<button type="button" class="btn btn-danger" id="confirmDelete">Xóa</button>
</div>
</div>
</div>
</div>
Bước 3: Truyền giá trị từ thẻ a sang modal
$(document).on("click", ".delete-link", function (e) {
e.preventDefault();
var id = $(this).data("id");
var confirmMessage = $(this).data("confirm");
$("#confirmMessage").text(confirmMessage);
$("#confirmDelete").data("id", id); // Lưu trữ ID để sử dụng trong xử lý xóa
$("#confirmModal").modal("show");
});
Bước 4: Thực hiện gọi Action xoá trong Controller - sử dụng Ajax
$(document).on("click", "#confirmDelete", function (e) {
e.preventDefault();
var id = $(this).data("id");
//if (confirm($(this).data("confirm"))) {
$.ajax({
url: "/Admin/Customer/DeleteId/" + id,
dataType: "json",
type: "POST",
contentType: "application/json;charset=UTF-8",
success: function (res) {
if (res.status == true) {
window.location.href = '/Admin/Customer';
//$("#getCodeModal").modal("toggle");
}
},
error: function (errormessage) {
alert(errormessage.responseText);
}
});
//}
});
Bước 5: Thực hiện xoá
[HttpPost]
public JsonResult DeleteId(int id)
{
try
{
var record = khachHangRepository.GetKhachHangByID(id);
if (record == null)
{
return Json(new { success = false, message = "Không tìm thấy bản ghi" });
}
khachHangRepository.DeleteKhachHang(id);
SetAlert("Xoá thành công", "error");
/*return Json(new { success = true, id = id});*/
return Json(new
{
status = true
});
}
catch (Exception ex)
{
return Json(new { success = false, message = ex.Message });
}
}