ASP.NET Core MVC post model with IEnumerable or List fields are null

Question

I need help to find out the next error. I'm trying to post model with List parameters. But, when I receive the list this has a null value.

Model class:

public class DiagModel{
    public List<Component> components { get; set; }
    public List<Question> questions { get; set; }
    public List<Answer> answers { get; set; }
    public List<Questionnaire> forms { get; set; } //it populates after instatiate object from the questions 
    //forms->(The propierties are idQuestion and idAnswer)
}

The view is shown below (@Html.hiddenFor() for each property from objects in fors were omitted):

@using Test.Models.compounds;
@model DiagModel;

@{
    Layout = "~/Views/Shared/_LayoutCommon.cshtml";
}

@if (!string.IsNullOrEmpty(ViewBag.Message))
{
    <script type="text/javascript">
        alert("@ViewBag.Message");
    </script>
}

@using (Html.BeginForm(new { @id = "requestForm" }))
{
    @for (int i = 0; i < Model.components.Count(); i++)
    {
        //The hidden components with razor helper was deleted to make short the code [Component]        
        <div class="row text-center">
            <div class="col-md-10 offset-md-1 text-start" style="background-color: #dddddd">
                <span class="text-start">@Model.components[i].name</span>
            </div>
        </div>
        <div class="row">&nbsp;</div>
        
        List<Question> _questions = Model.questions.Where(p => p.Idcomponent == Model.components[i].Idcomponent).ToList();
        for (int j = 0; j < _questions.Count; j++)
        {
            //The hidden components with razor helper was deleted to make short the code [Question]
            <div class="row p-1">
                <div class="col-md-10 offset-md-1 text-start">
                    <label class="form-label fw-bold">@_questions[j].Idquestion @_questions[j].Textopregunta</label>
                    @Html.DropDownListFor(model => model.forms.Where(c => c.Idquestion == @_questions[j].Idquestion).First().Idanswer, new SelectList(Model.answers.Where(r => r.Idquestion == @_questions.ElementAt(j).Idquestion), "Idquestion", "Text"), "Select an option", new { @class = "form-control" })
                </div>
            </div>
            <div class="row">&nbsp;</div>
            }


    }
    <div class="row p-1 text-center">
        <div class="col-md-12">
            <button name="submit" type="submit" class="btn btn-danger" formaction="Question" value=@Model>Enviar</button>
        </div><!--end col -->
    </div>


}
<div class="row p-2">&nbsp;</div>

The controller gets the value but the collection is received as null.

[HttpPost]
public ActionResult Question(DiagModel model){
    //ViewBag.Message($"Q #1: {model.forms.First().IdQuestion} , R #1: {model.forms.First().IdAnswer}"); 
    ViewBag.Message = $"count: {model.forms.Count}";//Breakpoint
    if (ModelState.IsValid) {
        return View(model);
    }
    return View("Index");
}

Answer 1

You can only send input elements with form, or you can send them as parameters with javascript xhr request.

Most important thing about razor is input element [name] properties need to match the model field.

<input type="text" name="questions[1].Id" class="form-label fw-bold" value="@Model.questions[1].Id" />

If you working on nested objects, it has to be reflected on Model that you try to bind on the server side as well.