How to use ActionLink as submit button to Delete each row in a table?

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

what about actually creating forms for each of the actions and routing them to the appropriate controller action instead of your switch statement? and styling you [button](https://stackoverflow.com/questions/1367409/how-to-make-button-look-like-a-link) instead of trying to use an anchor tag — Fran, Jul 24 '18 at 19:55
You mean something like this @using (Html.BeginForm("Delete", "YourControllerName")) { } — Hob, Jul 24 '18 at 20:04
That will not work. Go ahead and click the Delete and Edit link and see what happens: it will not go to `MyTableView` action. The coreect way is to have an action named `Delete(int id)` and `Edit(int id)`. When the user clicks the link, it will go to one of those actions. That action will return the form to either delete or edit the item. The user will fill that form, submit it to a third action which will process it and then send a redirect to the user to request another page. There are tons of examples online so no sure why you are asking this question. — CodingYoshi, Jul 24 '18 at 20:13
Yes, but a CodingYoshi said, the preferreed way is that link sends you to a get action that will return the item you are looking to delete/edit and then you submit those changes to the delete/edit post actions. — Fran, Jul 24 '18 at 20:16
@CodingYoshi Sorry, yeah he's have to go to a edit get action first, but he could wrap the delete in a form that will delete that item. — Fran, Jul 24 '18 at 20:17
@fran yes the delete can be done in a form but then it should not be a link. Furthermore, a confirmation should be asked in case the user clicked it by accident. That approach is harder I think. — CodingYoshi, Jul 24 '18 at 21:47
@CodingYoshi as you suggested I did like this @Html.ActionLink("Edit", "EditDetails", new { id = item.id }) | @Html.ActionLink("Delete", "Delete", new { id = item.id }) — Hob, Jul 25 '18 at 18:31
In terms of editing a record.. I would do exactly what the comments suggest.. but in terms of deleting.. in my opinion, a user shouldn't have to be redirected to a page that contains the information that they want to delete.. that should just be done by clicking on the delete link in the table using ajax.. You can also show a dialog box so the user can confirm if they want the record deleted in case if they accidentally clicked that link — Grizzly, Jul 25 '18 at 18:44

lloyd · Accepted Answer · 2018-07-24T20:22:32.643

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

Why aren't you using ActionResults that return the correct Http status code instead of JsonResult? — Fran, Jul 24 '18 at 20:46
@Fran This is the way I learned it and it works. I'm open to references to another resource to improve my answer however. — lloyd, Jul 24 '18 at 20:57
Returning magic numbers (codes) is not a good idea. Returning HTTP status codes is the preferred way since this is an HTTP app. — CodingYoshi, Jul 24 '18 at 21:52

score 0 · Answer 2 · answered Jul 25 '18 at 18:36

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

}

How to use ActionLink as submit button to Delete each row in a table?

2 Answers2

Controller

Html

Javascript