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

Question

I am developing a application where I need display details like ID, name and address of customers. And one should be able to edit or delete each customer details. For that I have added Edit and delete action links as buttons for reach row. In my controller I have added switch case to perform edit or delete actions.

My question is how to use action link as submit button. Or is there any better way to perform edit and delete records

View :

 <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> 

Controller :

[HttpPost]

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

        switch (submitButton)
        {
            case "Delete":


            break;



            case "Edit" :



            break;

        }

        return View ("MyTableView");
    }

Answer 1

This is a method I often use since you asked if there is any different/better method. FYI This example is using FontAwesome Icons and Bootstrap 4 styling for the buttons.

I like to use Ajax and then update the frontend in one way or another depending on response.

Then if a user wants to edit a record I take them to a different page to edit that specific entry where I just use a standard viewmodel and razor form / @Html.EditorFor() stuffs

You'll notice the HTML has an @Item.Id which would be from an iteration of the viewmodel list data in a @foreach(var item in list) That's where the Id value in javascript is coming from.

Controller

    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

Have a row in the table like

<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

As @CodingYoshi suggested I did like this.

view :

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

When the use click on any link going to that action controller

 public ActionResult  Delete(int id)

{

//code to delete

}