How to receive multiple fields from a view in the controller

Question

I need to create a multi-field Insert at the same time! My system has several tables and relationships and I am struggling at this point. I have this registration screen: With that code:

@using (Html.BeginForm()){
<div style="width: 100%; float: left;">
        <table class="table table-bordered table-hover">
           <thead>
                <tr>
                    <th style="width:200px; text-align:center; vertical-align:middle;">Alunos</th>
                    <th style="width:150px; text-align:center; vertical-align:middle;">Atribuir Nota</th>
               </tr>
             </thead>
             <tbody>         
                    @{                   
                    for (int i = 0; i < Model.ListaMatriculas.Count(); i++)
                    {
                    <tr>
                    <td>@Model.ListaMatriculas[i].Aluno.Nome</td>

                        <td style="text-align:center;">
                                <input type="hidden" name="Matricula.IdMatricula" value="@Model.ListaMatriculas[i].IdMatricula" />
                                <input type="text" name="Nota" value="0" style="width: 30px;" /> 
                                 @Html.DropDownList("UnidadeCurricular.IdUnidadeCurricular", ViewBag.unidadecurricular_idunidadecurricular as SelectList, "")
                        </td>
                    </tr>
                    }
                    }

                </tbody>  
        </table>

        <div class="alert alert-success">
            <b>Obs: Notas devem possuir valores de 0 a 100.</b>        
        </div>
</div>     
<div style="width: 100%;">
    <button class="btn btn-sucsess " type="submit">Salvar</button>
</div>
}

However when I click on send my controller does not receive the values of the fields, someone can give me a Help, how can I do something like that? An example link or something...

Answer 1

This is another classic case of using the package Begincollectionitem.

First, install the package via Nuget with the following command:

Install-Package Begincollectionitem

After that, change your view to this:

@using (Html.BeginForm()){
<div style="width: 100%; float: left;">
        <table class="table table-bordered table-hover">
           <thead>
                <tr>
                    <th style="width:200px; text-align:center; vertical-align:middle;">Alunos</th>
                    <th style="width:150px; text-align:center; vertical-align:middle;">Atribuir Nota</th>
               </tr>
             </thead>
             <tbody>     
                  @foreach(var matricula in Model.ListaMatriculas)
                  {
                    Html.RenderPartial("_Matriculas",matricula);
                  }   
                </tbody>  
        </table>

        <div class="alert alert-success">
            <b>Obs: Notas devem possuir valores de 0 a 100.</b>        
        </div>
</div>     
<div style="width: 100%;">
    <button class="btn btn-sucsess " type="submit">Salvar</button>
</div>
}

Your view is now calling a partial that contains the data you need.

And your partialView _Enrollment will look like this:

@model ModelMatriculaAqui

@using (Html.BeginCollectionItem("ListaMatriculas"))
{
  <tr>
  <td>@Model.ListaMatriculas[i].Aluno.Nome</td>
    <td style="text-align:center;">
             @Html.HiddenFor(model => model.IdMatricula)
              @Html.EditorFor(model => model.Nota)
             @Html.DropDownList("UnidadeCurricular.IdUnidadeCurricular", ViewBag.unidadecurricular_idunidadecurricular as SelectList, "")//Sugiro alterar para um dropDownListFor(), caso sua viewModel possua essa propriedade
    </td>
  </tr>
}

Otherwise, just keep doing the same.

Any doubt, this problem already has several answers in this survey.

Answer 2

In case you want to keep the system with html pure or razor, modify the attribute name of their inputs and receive them in list form in your actions, as an example below.

Html

<tbody>         
   @{                   
   for (int i = 0; i < Model.ListaMatriculas.Count(); i++)
   {
     <tr>
        <td>@Model.ListaMatriculas[i].Aluno.Nome</td>    
        <td style="text-align:center;">
            <input type="hidden" name="Matriculas" value="@Model.ListaMatriculas[i].IdMatricula" />
            <input type="text" name="Notas" value="0" style="width: 30px;" /> 
            @Html.DropDownList("UnidadesCurriculares", ViewBag.unidadecurricular_idunidadecurricular as SelectList, "")
        </td>
     </tr>
  }
  }   
</tbody>

Razor

<tbody>         
   @{                   
   for (int i = 0; i < Model.ListaMatriculas.Count(); i++)
   {
     <tr>
        <td>@Model.ListaMatriculas[i].Aluno.Nome</td>    
        <td style="text-align:center;">
            @Html.Hidden("Matriculas",Model.ListaMatriculas[i].IdMatricula)
            @Html.TextBox("Notas")
            @Html.DropDownList("UnidadesCurriculares", ViewBag.unidadecurricular_idunidadecurricular as SelectList, "")
        </td>
     </tr>
  }
  }   
</tbody>

Controller

[HttpPost]
public ActionResult Foo(IList<int> Matriculas, IList<string> Notas, IList<int> UnidadesCurriculares)
{
     return View();
}

This way, you will receive three lists of parameters according to what is in your View. Note, however, that the way the three lists are implemented is not related to each other. This requires a different approach.