ASP.NET Core 6 MVC : HTML table to view model collection

Question

Starting up with ASP.NET Core 6 MVC and in my case I have one view which lists few properties of one object and then some other for their children in a editable table (user can edit the values)

View model has the properties and an IEnumerable of the children:

public class MyObjectViewModel
{
    public String Id { get; set; }
    public String Descr { get; set; }

    public IEnumerable<ChildrenObject> Children { get; set; }

    public MyObjectViewModel()
    {
        Children = Enumerable.Empty<ChildrenObject>();
    }

    public class ChildrenObject
    {
        public String? Id { get; set; }
        public String? Name { get; set; }
    }
}

All under the same form:

 @using (Html.BeginForm("Save", "Controller", FormMethod.Post))
 {

    <input type="submit" value="SAVE"/>
    <br />
    @Html.LabelFor(model => model.Id)
    @Html.TextBoxFor(model => model.Id, new { @readonly = "readonly" })
    <br />
    @Html.LabelFor(model => model.Descr)
    @Html.EditorFor(model => model.Descr)
    <br />
    <table>
        <tbody>
            <tr>
            <th>Id</th>
            <th>Name</th>
            </tr>

            @foreach (var child in Model.Children)
                {
                <tr>
                    <td>@child.Id</td>
                    <td><input class="ef-select" type="text" value="@child.Name"></td>    
                </tr>
                }
        </tbody>
    </table>

 }

So when the button is pressed the data is dumped back to the model to perform the SAVE action in the controller.

All ok for the simple fields (I can get the data in the controller as the view model), but not sure how to accomplish it with the table / children property...

Any simple way without needing to use JS to serialise or pick up the data from the table?

Thanks

Yiyi You · Accepted Answer · 2022-08-01 02:45:45Z

1

If you want to pass id and name of ChildrenObject in table,you can try to add hidden inputs for the Id,and set name attribute for name inputs:

@{var count = 0; }
@foreach (var child in Model.Children)
{
    <tr>
        <td>
        @child.Id
            <input value="@child.Id" name="Children[@count].Id" />
        </td>
        <td><input class="ef-select" type="text" value="@child.Name" name="Children[@count].Name"></td>
    </tr>
    count++;
}

answered Aug 1, 2022 at 2:45

Yiyi You

18.4k1 gold badge19 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

byle.05 Over a year ago

Unfortunately this is giving a NullReferenceException on Microsoft.AspNetCore.Mvc.ModelBinding.Binders.CollectionModelBinder<TElement>.CopyToModel . I guess because of unable to intiialize the children list?

byle.05 Over a year ago

Ok, just changed the Children from IEnumerable<ChildrenObject> to ChildrenObject[] and it did the trick. Will play a bit more to understand better the possibilities but looks like doing what I needed. Thanks a lot for it! :)

Collectives™ on Stack Overflow

ASP.NET Core 6 MVC : HTML table to view model collection

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related