Asp.net core MVC (Razor Pages) - Bind nested list of objects on post

Question

I have an edit page which edits an object. This object has a nested list of another object.

EditModel:

public class EditModel : BasePageModel
{
    [BindProperty]
    public Update.Command Command { get; set; }

    public async Task<IActionResult> OnGetAsync(Update.Query query)
    {
        Command = await Mediator.Send(query);

        return Page();
    }

    public async Task<IActionResult> OnPostAsync()
    {
        await Mediator.Send(Command); // Command.ListA is null here. ???

        return RedirectToPage("Index");
    }
}

Edit.cshtml:

<form method="post">
    <div asp-validation-summary="ModelOnly" class="text-danger"></div>

    <div class="form-group">
        <label asp-for="Command.Id"></label>
        <input asp-for="Command.Id" readonly class="form-control"/>
    </div>

  // other non-relevant properties...

  <table class="table">
         <thead>
            <tr>
                <th>
                    <label asp-for="Command.ListA[0].Date"></label>
                </th>
                <th>
                    <label asp-for="Command.ListA[0].Value"></label>
                </th>
            </tr>
         </thead>
         <tbody>

            @foreach (var item in Model.Command.ListA)
            {
                <tr>
                    <td>
                        <input type="date" asp-for="@item.Date"/>
                    </td>
                    <td>
                        <input type="number" asp-for="@item.Value"/>
                    </td>
                </tr>
            }

            </tbody>
        </table>

        <div class="form-group">
            <input type="submit" value="Save" class="btn btn-primary"/>
        </div>

When I post back using the submit button. My listA is null. Could somebody help me understand why my command doesn't bind?

Many thanks for your help!

Củ Su Hào · Accepted Answer · 2020-03-30 04:16:59Z

4

It's expected from MVC model binding. The @ sign is to get the data out, not to bind it in. You have to target the asp-for to the actual property.

Instead of using foreach, change it to:

@for (int i = 0; i < Model.Command.ListA.Count; i++)
{
    <tr>
        <td>
            <input type="date" asp-for="Command.ListA[i].Date"/>
        </td>
        <td>
            <input type="number" asp-for="Command.ListA[i].Value"/>
        </td>
    </tr>
}

Make sure that your ListA is an actual list, not an IEnumerable

edited Mar 30, 2020 at 4:16

answered Mar 27, 2020 at 13:37

Củ Su Hào

4006 silver badges18 bronze badges

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

1 Comment

Rena Over a year ago

It should be Command.ListA[i].Date instead of Model.Command.ListA[i].Date.

Collectives™ on Stack Overflow

Asp.net core MVC (Razor Pages) - Bind nested list of objects on post

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related