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视图。

首先，您必须更新脚本如果每次通过jquery事件方法分别调用函数时，都在DOM内放置了删除函数，则将整个函数放置在DOM之外是一种很好的做法并在代码中进行以下更改。

更新的脚本：

seaborn.diverging_palette(220, 10, as_cmap=True)

};

在“剃刀”视图中更新此按钮：

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

});

我希望这能解决您的问题

最诚挚的问候；

易卜拉欣·伊纳姆

通过在ASP.NET MVC 5中使用Jquery-Ajax单击删除按钮来删除每一行

1 个答案: