如何使用ActionLink作为提交按钮来删除表中的每一行？

Question

我正在开发一个需要显示详细信息（例如ID，客户名称和地址）的应用程序。并且应该能够编辑或删除每个客户的详细信息。为此，我添加了“编辑”和“删除操作”链接作为到达范围按钮。在我的控制器中，我添加了开关盒以执行编辑或删除操作。

我的问题是如何使用操作链接作为提交按钮。还是有更好的方法来执行编辑和删除记录

查看：

<table class="table">
                    <tr>
                        <th>
                            @Html.DisplayNameFor(model => model.id)
                        </th>
                        <th>
                            @Html.DisplayNameFor(model => model.name)
                        </th>
                        <th>
                            @Html.DisplayNameFor(model => model.address)
                        </th>
                        <th></th>
                    </tr>
 
                    @foreach (var item in Model)
                    {
                        <tr>
                            <td>
                                @Html.DisplayFor(modelItem => item.id)
                          </td>
                            <td>
                                @Html.DisplayFor(modelItem => item.name)
                            </td>
                            <td>
                                @Html.DisplayFor(modelItem => item.address)
                            </td>
                            <td>
                                @Html.ActionLink("Edit", "", new { id = item.id }) |
                                @Html.ActionLink("Delete", "", new { id = item.id })
                            </td>
                        </tr>
                    }
                </table>

控制器：

[HttpPost]

    public ActionResult MyTableView(int id, List<MyList> list)
    {

        switch (submitButton)
        {
            case "Delete":


            break;



            case "Edit" :



            break;

        }

        return View ("MyTableView");
    }

Answer 1

这是我经常使用的方法，因为您询问是否有其他/更好的方法。仅供参考，此示例对按钮使用FontAwesome Icons和Bootstrap 4样式。

我喜欢使用Ajax，然后根据响应以一种或另一种方式更新前端。

然后，如果用户想要编辑一条记录，我会将其带到另一个页面以编辑该特定条目，而我只使用标准的viewmodel和剃刀形式/ @Html.EditorFor()填充

您会注意到HTML有一个@Item.Id，它来自@foreach(var item in list)中的视图模型列表数据的迭代。这就是javascript中的Id值的来源。

控制器

    public JsonResult Delete(int? id)
    {
        if (id == null)
        {
            return Json(-1);
        }
        var document = CommonService.GetDocument(id);
        if (document == null)
        {
            return Json(-1);
        }
        if (0 == AdminService.DeleteDocument((int)id))
        {
            return Json(1);
        }
        return Json(-1);
    }

HTML

在表格中有一行

<td class="text-nowrap"><a class="btn btn-primary text-white" href="@Url.Action("Edit", "Controller", new { id = item.Id })"><i class="fa fa-pencil-square-o"></i>&nbsp;Edit</a>  &nbsp;&nbsp; <button value="@item.Id" class="btn btn-primary text-white delete"><i class="fa fa-trash-o"></i>&nbsp;Delete</button></td>

Javascript

$(".delete").unbind().click(function () {
        var entryId = $(this).val();
        if (confirm("Are you sure you want to delete?"))
        {
            var selected = $(this).parents("tr").addClass("selected");
            $.ajax(
            {
                url: '@Url.Action("Delete", "Controller")',
                type: "POST",
                dataType: "json",
                data: { id: entryId }
            })
            .done(function (data) {
                if (data == 1) {
                    table.row(".selected").remove().draw(false); // Delete row from view
                }
                else {
                    Alert("Something went wrong...")
                }
            });
        }
    });

Answer 2

正如@CodingYoshi所建议的那样，我这样做了。

视图：

 <td>
     @Html.ActionLink("Edit", "EditDetails", new { id = item.id }) |
     @Html.ActionLink("Delete", "Delete", new { id = item.id })
 </td>

使用时，单击指向该动作控制器的任何链接

 public ActionResult  Delete(int id)

{

//要删除的代码

}