How can I have a table with cells as inputs to update data in NET 5 MVC

Viewed 190

I have a View with a table with this structure:

<form asp-action="Index">
    <div asp-validation-summary="ModelOnly" class="text-danger"></div>
    <table class="table table-hover table-responsive-sm display">
        <thead>
            <tr>
                <th>
                    @Html.DisplayNameFor(model => model.Descripcion)
                </th>
                <th>
                    @Html.DisplayNameFor(model => model.Activa)
                </th>
                <th></th>
            </tr>
        </thead>
        <tbody>
            @foreach (var item in Model)
            {
                <tr>
                    <td>
                        <input  value="@Html.DisplayFor(modelitem => item.AreaClave)"/>
                    </td>
                    <td>
                        <input id="desc" name="desc" value="@Html.DisplayFor(modelItem => item.Descripcion)" />
                    </td>
                    <td>
                        <input value="@Html.DisplayFor(modelItem => item.Activa)" />
                    </td>
                    <td>
                        <div class="form-group">
                            <button asp-route-id="@item.AreaClave" type="submit" name="action">Update</button>
                        </div>
                    </td>
                </tr>
            }
        </tbody>
    </table>

I want to have multiple rows with an open input for "item.Descripcion", this is because I want to be able to update every row individually by its row ID. This approach works just as fine for the first row, but for the following it doesn't work. I think this is because the name tag is repeated and its only considering the first one. Is there a way to make my table with an update input in each row?

1 Answers

You can try to generate <form> and <table> for each item like below:

@model IEnumerable<Test>
<div asp-validation-summary="ModelOnly" class="text-danger"></div>
<table class="table table-hover table-responsive-sm display">
    <thead>
        <tr>
            <th>
                @Html.DisplayNameFor(model => model.Descripcion)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.Activa)
            </th>
            <th></th>
        </tr>
    </thead>
</table>
@foreach (var item in Model)
{
    <form asp-action="Index">
        <table class="table table-hover table-responsive-sm display">
            <tbody>
                <tr>
                    <td>
                        <input value="@Html.DisplayFor(modelitem => item.AreaClave)" />
                    </td>
                    <td>
                        <input id="desc" name="desc" value="@Html.DisplayFor(modelItem => item.Descripcion)" />
                    </td>
                    <td>
                        <input value="@Html.DisplayFor(modelItem => item.Activa)" />
                    </td>
                    <td>
                        <div class="form-group">
                            <button asp-route-id="@item.AreaClave" type="submit" name="action">Update</button>
                        </div>
                    </td>
                </tr>
            </tbody>
        </table>
    </form>
}

Backend code:

[HttpPost]
public IActionResult Index(string id,string desc) 
{
    //do your stufff...
}
Related