ASP.NET MVC : removing a specific row from a table with model.state

Question

I'm new to ASP.NET MVC; I'm trying to create a dynamic table with buttons that add/remove rows when clicked using model states and not jQuery, so right now my page words but I was only able to create a button that removes the last added row and I really want a way to remove a specific row from my table by adding the "remove" option to table data.

Here's the code I have right now that is working and removing the last added row.

View

@{ for (int i = 0; i < Model.ValueModel.Count; i++)
{
        <div>
            <table>
                <tr id="Row">
                    <td>
                        @Html.DropDownListFor(m => m.ValueModel[i].id, new SelectList(Model.ReplaceModel, "id", "Name"))
                    </td>
                    <td>
                        @Html.EditorFor(m => m.ValueModel[i].value)
                    </td>
                </tr>
            </table>
        </div>
       }
}

<button name="submit" value="AddLine"> Add Line </button>
<button name="submit" value="RemLine"> Remove Line </button>

Controller

[HttpPost]
public ActionResult Test(TestModel model, string submit)
{       
        switch (submit)
        {
            case "AddLine":
                model.ValueModel.Add(new ValueModel());
                break;

            case "RemLine":
                if (model.ValueModel.Count > 0)
                {
                    model.ValueModel.RemoveAt(model.ValueModel.Count - 1);
                }
        }             
        return View(model);
}

The code works with my models which are not important for the question what I want to learn is a way to remove the line by adding it to a third <td> in the view and using a similar action to

model.ValueModel.RemoveAt(model.ValueModel.Count - 1);

from the switch case "RemLine".

Something like this

@{ for (int i = 0; i < Model.ValueModel.Count; i++)
{
        <div>
            <table>
                <tr id="Row">
                    <td>
                        @Html.DropDownListFor(m => m.ValueModel[i].id, new SelectList(Model.ReplaceModel, "id", "Name"))
                    </td>
                    <td>
                        @Html.EditorFor(m => m.ValueModel[i].value)
                    </td>
                    <td>
                        <button name="submit" value="RemLine"> Remove Line </button>
                    </td>
                </tr>
            </table>
        </div>
       }
}

<button name="submit" value="AddLine"> Add Line </button>

Controller

[HttpPost]
public ActionResult Test(TestModel model, string submit)
{       
        switch (submit)
        {
            case "AddLine":
                model.ValueModel.Add(new ValueModel());
                break;

            case "RemLine":
                if (model.ValueModel.Count > 0)
                {
                    model.ValueModel.**BegoneLine**(The line in which the button is);
                }
        }             

        return View(model);
}

Thanks in advance!

Answer 1

You need to send a row id with your 'remove' button and then read it in your controller. You can add buttons like this (per row):

<button name="submit" value="@(i)">Remove row</button>
...
<button name="submit" value="@(i)">Remove row</button>

Controller:

 public ActionResult Test(TestModel model, string submit)
 {
     switch (submit)
    {
        case "AddLine":
            model.ValueModel.Add(new ValueModel());
            break;

        case "RemLine":
            if (model.ValueModel.Count > 0)
            {
                model.ValueModel.RemoveAt(model.ValueModel.Count - 1);
            }
            break;

        case string number when int.TryParse(number,out var index):
            if (model.ValueModel.Count > 0)
            {
                model.ValueModel.RemoveAt(index);
            }

            break;
    }