Jquery Функция удаления продолжает пытаться удалить один и тот же объект из таблицы данных даже после закрытия и повторного открытия модального окна.

Question

Удаление первого объекта из датируемых произведений. Я получаю сообщение об успешном удалении, но когда я пытаюсь удалить другой объект из таблицы данных, я получаю нулевую ошибку в контроллере, поскольку он пытается удалить тот же объект снова, а не тот, который я щелкнул во второй раз. Любая помощь приветствуется.

Контроллер

      [HttpPost]
        public ActionResult Delete(int id)
        {
            using (ApplicationDbContext db = new ApplicationDbContext())
            {
                Car car = db.Cars.Where(x => x.Id == id).FirstOrDefault();
                db.Cars.Remove(car); // get null value here
                db.SaveChanges();
                return Json(new { success = true, message = "Deleted Successfully" }, JsonRequestBehavior.AllowGet);
            }
        }   

BS Modal

div class="modal fade" id="delete" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Delete?</h5>
                <button class="close" type="button" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</span>
                </button>
            </div>
            <div class="modal-body">Are you sure you would like to delete this record?</div>
            <div class="modal-footer">
                <button class="btn btn-secondary" type="button" data-dismiss="modal">Cancel</button>
                <button id="del" class="btn btn-primary" type="button" data-dismiss="modal">Delete</button>

            </div>
        </div>
    </div>
</div>

JQuery

Функция удаления

function Delete(url, titleText) {
    $('#delete').modal('show');
    $("#del").click(function () {
        $.ajax({
            type: "POST",
            url: url,
            success: function (data) {
                if (data.success) {
                    dataTable.ajax.reload();
                    $.notify(data.message, {
                        globalPosition: "top-center",
                        className: "success"
                    })

                }
            }
        });
        $('#delete').modal('toggle');
        $('#delete').data('modal', null);

    })
    return false;
}

DataTable - с вызов функции удаления

$(document).ready(function () {
    dataTable = $("#carsTable").DataTable({
        "responsive": true,
        'columnDefs': [
            {
                "targets": 7, 
                "className": "text-center",
                "width": "4%"
            }],
        "autoWidth": false,
        "ajax": {
            "url": "/Cars/GetData",
            "type": "GET",
            "datatype": "json"

        },

        "columns": [
            { "data": "LicensePlate"},
            { "data":  "Make"},
            { "data":  "Model"},
            { "data":  "SeatingCapacity"},
            { "data":  "BagCapacity"},
            {
                "data": "HasAutomaticTransmission", "render": AddCheckbox 
            },
            {
                "data": "IsAvailable", "render": AddCheckbox 
            },
            {
                "data": "Id", "render": function (data) {

                    return "<a class='btn btn-primary btn-xs' onclick = \"Edit("+ data +")\" > <i class='fa fa-edit'></i> Edit</a><a class='btn btn-primary btn-xs' onclick = \"Delete('/Cars/Delete/" + data + "', 'Delete Car Confirmation')\" > <i class='fa fa-trash'></i> Delete</a><a class='btn btn-primary btn-xs' onclick = Details('/Cars/Details/" + data + "') > <i class='fa fa-edit'></i> Details</a>"

                }

            }

        ],

        "language": {
            "emptyTable": "No data found, please click the <Add Button </b> to add a new record"
        }


        });

});

Answer 1

Проблема была в JQuery методе удаления.

function Delete(url, titleText) {
    console.log(url);
    $('#delete').modal('show');
    $("#del").click(function () {
        $.ajax({
            type: "POST",
            url: url,
            success: function (data) {
                if (data.success) {
                    dataTable.ajax.reload();
                    $.notify(data.message, {
                        globalPosition: "top-center",
                        className: "success"
                    })

                }
            }
        });
        $('#delete').modal('toggle');
        $("#del").off("click");

    })

Мне пришлось удалить событие щелчка после того, как первый объект был удален, иначе кнопка будет отображаться как уже нажатая при повторном щелчке для удаления второго объекта

Answer 2

На вашем контроллере добавьте:

[HttpPost]
        public ActionResult Delete(int id)
        {
            using (ApplicationDbContext db = new ApplicationDbContext())
            {
                Car car = db.Cars.Where(x => x.Id == id).FirstOrDefault();
                db.Cars.Remove(car); // get null value here
                db.SaveChanges();
                return Json(new { success = true, message = "Deleted Successfully" }, JsonRequestBehavior.AllowGet);
            }
           return RedirectToAction("action where it starts");
        }   

Я полагаю, что это позволит странице обновить sh после удаления