Удалите каждую строку, нажав кнопку удаления с помощью Jquery-Ajax в ASP.NET MVC 5

Question

Мой код удаляет всю таблицу из-за использования каждой функции.Я хочу удалить несколько строк, щелкая каждую ссылку удаления изображения в ячейке, которая упоминается в моем представлении.

Если я не использую каждую функцию, она удаляет только первую строку, по которой я щелкнула, и после этого, если яхочу удалить еще одну строку, мне нужно обновить страницу.

мой контроллер

[HttpPost]

    public ActionResult Delete(int? id)
    {
        using (var db = new DAL.InventoryDBEntities())
        {

            DAL.DetailsTable personalDetail = db.DetailsTable.Find(id);
            db.DetailsTable.Remove(personalDetail);
            db.SaveChanges();
            return Json(true ,JsonRequestBehavior.AllowGet);    
        }

    }

мой скрипт

function Delete() {


    $("a.deleteimage").each(function () {
        var Id = $(this).data("model-id");
        var url = "/Home/Delete/" + Id;
        $.ajax({
            url: url,
            type: "POST",

            success: function () {

                $("#tblDetails").load(window.location + " #tblDetails");
            },

            error: function () {
                alert("Fails");
            }

        });

    });

};

мой вид бритвы

 <table id="tblDetails" class=" table-bordered table-striped table-condensed">
    <thead>
        <tr>
            <th>Name</th>
            <th>City</th>
            <th>Country</th>
            <th>Options</th>
        </tr>
    </thead>
    <tbody>
        @foreach (var item in Model)
        {
        <tr>
            <td>@item.Name</td>
            <td>@item.City</td>
            <td>@item.Country</td>
            <td>
            <a id="editimage" href="javascript:;">
                     <img id="image" src="/UserImages/edit.png" />
            </a><a class="deleteimage" data-model-id="@item.Id">
                     <img src="/UserImages/delete.png" />
            </a>
            </td>

        </tr>
        }
    </tbody>

</table>

Answer 1

Из ваших слов я заключил, что вы хотите удалить каждую строку без обновления вашей страницы, она довольно проста, не требует каждой функции, и я сделал это без ее использования.

Ваш контроллер выглядит нормально ивам не нужно менять его.Что я предлагаю вам обновить ваш скрипт и ваш Razor View.

Прежде всего вы должны обновить свой скрипт, если у вас есть функция удаления внутри DOM, ставьте ее вне всякий раз, когда вы вызываете функцию отдельно с помощью события jqueryЭтот метод считается хорошей практикой для размещения всей вашей функции вне DOM и внесения следующих изменений в ваш код.

Обновленный скрипт:

function Delete(obj) {
var ele = $(obj);
var Id = ele.data("model-id");
var url = "/Home/Delete/" + Id;
$.ajax({
    url: url,
    type: "POST",

    success: function () {

        ele.closest("tr").remove();
       },

    error: function () {
        alert("Fails");
    }

});

};

Обновите эту кнопку в вашем Razor View:

<a class="delete" data-model-id="@item.Id" onclick="Delete(this)" >.........</a>

Я надеюсь, что это решит вашу проблему

С уважением;

Ибрагим Инам