Cấp bậc tác giả:

TRAINING

Hướng dẫn thực hiện chức xoá - thông báo thông qua Modal Popup(Bootstrap)

Được viết bởi webmaster ngày 18/09/2023 lúc 06:33 PM
Hướng dẫn thực hiện chức xoá - thông báo thông qua Modal Popup(Bootstrap)
  • 0
  • 2042

Hướng dẫn thực hiện chức xoá - thông báo thông qua Modal Popup(Bootstrap)

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">&times;</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 });
            }
        }

Nguồn bài viết: DOTNET.VN

BÌNH LUẬN BÀI VIẾT

Bài viết mới nhất

LIKE BOX

Bài viết được xem nhiều nhất

HỌC HTML