Update list from Razor View using Entity Framework Core

Question

I'm having a challenge updating from Razor View table and not sure if my approach is right. Instead of displaying the data (to be edited) in DIV, I'm displaying in a TABLE. I can understand how the hidden property is used to update the row. In my case I am displaying multiple rows on the Edit page, but unable to update the database for only rows that have updates.

My view page is like this

<form method="post">
    <div asp-validation-summary="ModelOnly" class="text-danger"></div>        
    <table class="table">
        <thead>
            <tr>
                <th> @Html.DisplayNameFor(model => model.Fields[0].Name) </th>
                <th> @Html.DisplayNameFor(model => model.Fields[0].Value) </th>
                <th></th>
            </tr>
        </thead>
        <tbody>
            @foreach (var item in Model.Fields)
            {
                <tr>
                    <td> <input type="hidden" asp-for=@item.ID /> </td>
                    <td> @Html.DisplayFor(modelItem => item.Name) </td>
                    <td contenteditable='true'> @Html.DisplayFor(modelItem => item.Value) </td>
                </tr>
            }
        </tbody>
    </table>
    <div class="form-group">
        <input type="submit" value="Save" class="btn btn-primary" />
    </div>
</form>

And the code behind is this. The Fields is showing 0 in the OnPostAsync method.

[BindProperty]
    public IList<FieldInfo> Fields { get; set; }
    public async Task<IActionResult> OnGetAsync(string id)
    {
        Fields = await _context.FieldInfo.Where(m => m.GUID == id).ToListAsync();
        return Page();
    }

    public async Task<IActionResult> OnPostAsync()
    {
        foreach (var p in Fields) // In this approach Fields shows as count=0
        {
            _context.Attach(p.Value).State = EntityState.Modified;
        }

        _context.Attach(Fields).State = EntityState.Modified; // In this approach Exception: The entity type 'List<FieldInfo>' was not found.

        await _context.SaveChangesAsync();            
        return RedirectToPage("./Index");
    }

Answer 1

If you want to work with a List or collection, you must use an index to identify individual elements. https://www.learnrazorpages.com/razor-pages/model-binding#binding-complex-collections

In your case, I would use an explicit index:

@foreach (var item in Model.Fields)
{
    <tr>
        <td> <input type="hidden" asp-for="Fields[item.ID].ID" />  <input type="hidden" name="Fields.Index" value="Fields[item.ID].ID" /></td>
        <td> @item.Name</td>
        <td><textarea asp-for="Fields[item.ID].Value">@Fields[item.ID].Value">@Fields[item.ID].Value</textarea> </td>
    </tr>
}

Note that the value assigned to a td designated as contenteditable is not posted as part of a form. You should use a suitable form control like an input or textarea instead.

Answer 2

I got it working after changing the type as below, from IList to List

[BindProperty]
public List<FieldInfo> Fields { get; set; }