Passing a List of objects from Razor View to Controller only passes one item instead of the whole list

Question

I want to pass a List of VoedingBindingModel to my controller by using an Editor Template, however I only receive the first entry of the List in the Controller, never all the entries.

The Controller:

public ActionResult Create()
    {
        ViewBag.fk_customVoedingId = new SelectList(customvoeding.GetAllCustomvoeding(), "customVoedingId", "customVoedingNaam");
        ViewBag.fk_standaardVoedingId = new SelectList(standaardvoeding.GetAllStandaardvoeding(), "standaardVoedingId", "standaardVoedingNaam");

        return View();
    }

    [HttpPost]
    [ValidateAntiForgeryToken]
    public ActionResult Create([Bind(Include = "Id,Datum,Tijd,VoedingCollection")]AgendaBindingModel agendaBindingModel)
    { 
        //Do something
    }

The Model:

public class AgendaBindingModel
    {
      [Required]
       public List<VoedingBindingModel> VoedingCollection { get; set; }
       //More properties
    }

The View:

@using Website.Models
@model AgendaBindingModel

@using (Html.BeginForm())
{
@Html.AntiForgeryToken()

<div class="form-horizontal">
    <h4>agenda</h4>
    <hr />
    @Html.ValidationSummary(true, "", new { @class = "text-danger" })
    <div class="form-group">
        @Html.LabelFor(model => model.Datum, htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.TextBoxFor(m => m.Datum, "{0:dd-MM-yyyy}", new { @class = "form-control-datepicker", placeholder = "DD-MM-YYYY", maxlength = "10" })

            @Html.ValidationMessageFor(model => model.Datum, "", new { @class = "text-danger" })
        </div>
    </div>

    <div class="form-group">
        @Html.LabelFor(model => model.Tijd, htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.EditorFor(model => model.Tijd, "{0:hh:mm}", new { htmlAttributes = new { @class = "form-control-timepicker", placeholder = "hh:mm", maxlength = "5" } })
            @Html.ValidationMessageFor(model => model.Tijd, "", new { @class = "text-danger" })
        </div>
    </div>
    <div id="CreateVoedingDiv0">
        @Html.EditorFor(x => x.VoedingCollection[0])
    </div>
    <div id="CreateVoedingDiv1"hidden>
        @Html.EditorFor(x => x.VoedingCollection[1])
    </div>
    <div id="CreateVoedingDiv2"hidden>
        @Html.EditorFor(x => x.VoedingCollection[2])
    </div>

    <div class="form-group">
        <div class="col-md-offset-2 col-md-10">
            <input value="Add" class="btn btn-default" onclick="ShowVoeding()" /> <input value="Remove" class="btn btn-default" onclick="HideVoeding()" />
        </div>
    </div>

    <div class="form-group">
        <div class="col-md-offset-2 col-md-10">
            <input type="submit" value="Create" class="btn btn-default" />
        </div>
    </div>
</div>
}

<div>
@Html.ActionLink("Back to List", "Index")
</div>

<script>
var count = 1;

function ShowVoeding()
{
    if (document.getElementById("CreateVoedingDiv" + count).hidden == true)
    {
        document.getElementById("CreateVoedingDiv" + count).hidden = false;
        count++;
    }
}
function HideVoeding()
{
    count = count - 1;
    if (document.getElementById("CreateVoedingDiv" + count).hidden == false)    {
        document.getElementById("CreateVoedingDiv" + count).hidden = true;            
    }
}
</script>

Partial class:

(customvoeding and standaardvoeding do the same thing, only customvoeding returns a collection of customvoeding and standaardvoeding returns a collection of standaardvoeding.

public partial class customvoeding
{
    private static foodtrackerEntities1 db = new foodtrackerEntities1();

    public static List<customvoeding> GetAllCustomvoeding()
    {
        db.Configuration.LazyLoadingEnabled = false;
        return db.customvoeding.ToList();
    }
}

Answer 1

Your second and third html are broken.

<div id="CreateVoedingDiv2"hidden>

remove hidden

Answer 2

You don't seem to be initializing the model and passing it to the view. In the action methods of your controller try adding:

var viewModel = new AgendaBindingModel();
viewModel.VoedingCollection = // TODO: Fill the list from your data source

return View(viewModel );

Answer 3

Try like this. I could not test, but if you like we can advance is this way:

To show all items:

<div id="group">
@for(int i = 0; i < AgendaBindingModel.VoedingCollection.Count; i++)
{
    @Html.EditorFor(x => x.VoedingCollection[i])
}
To add new item:
<button onclick=newItem() >+</button>
</div>


<script>
function newItem(){
    var div = document.createElement('div');
    div.id = CreateNewItem;
    div.innerHTML = '@Html.EditorFor(x => x.VoedingCollection[i])';
    document.body.appendChild(div);
}
</script>

Answer 4

I found out what was preventing me from receiving more than one result:

You can NOT use @Html.EditorFor template for more than 1 value when you specify a template. It does not matter if you use different models or different templates, it just simply does not work.

To fix it, you have to use 'Html.BeginCollectionItem' library, which can be found here.