List in form is null when doing a post mvc

Question

When posting this form, the ProjectCategories list is null, while it's inside the form.

Here is the html, i really don't know why it stays null, so any help is usefull.

@model Domain.Project

@{
ViewBag.Title = "MaakProject";
}
<h2>MaakProject</h2>

<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>@ViewBag.Title - My ASP.NET Application</title>
@Styles.Render("~/Content/Site.css")
@Scripts.Render("~/bundles/modernizr")
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")
</head>

@using (Html.BeginForm("MaakProject", "Begroting", FormMethod.Post, new {     @class = "form-horizontal", role = "form" }))
{
@Html.AntiForgeryToken()

<div class="form-horizontal">
    <h4>Project</h4>
    <hr/>
    @Html.ValidationSummary(true, "", new {@class = "text-danger"})
    <div class="form-group">
        @Html.LabelFor(model => model.Titel, htmlAttributes: new {@class = "control-label col-md-2"})
        <div class="col-md-10">
            @Html.EditorFor(model => model.Titel, new {htmlAttributes = new {@class = "form-control"}})
            @Html.ValidationMessageFor(model => model.Titel, "", new {@class = "text-danger"})
        </div>
    </div>
    <div class="form-group">
        @Html.LabelFor(model => model.Bedrag, htmlAttributes: new {@class = "control-label col-md-2"})
        <div class="col-md-10">
            @Html.EditorFor(model => model.Bedrag, new {htmlAttributes = new {@class = "form-control"}})
            @Html.ValidationMessageFor(model => model.Bedrag, "", new {@class = "text-danger"})
        </div>
    </div>

    <div class="form-group">
        @Html.LabelFor(model => model.InformatieVraag, htmlAttributes: new {@class = "control-label col-md-2"})
        <div class="col-md-10">
            @Html.EditorFor(model => model.InformatieVraag, new {htmlAttributes = new {@class = "form-control"}})
            @Html.ValidationMessageFor(model => model.InformatieVraag, "", new {@class = "text-danger"})
        </div>
    </div>

    <div class="form-group">
        @Html.LabelFor(model => model.BeginPeriode, htmlAttributes: new {@class = "control-label col-md-2"})
        <div class="col-md-10">
            @Html.EditorFor(model => model.BeginPeriode, new {htmlAttributes = new {@class = "form-control"}})
            @Html.ValidationMessageFor(model => model.BeginPeriode, "", new {@class = "text-danger"})
        </div>
    </div>

    <div class="form-group">
        @Html.LabelFor(model => model.EindPeriode, htmlAttributes: new {@class = "control-label col-md-2"})
        <div class="col-md-10">
            @Html.EditorFor(model => model.EindPeriode, new {htmlAttributes = new {@class = "form-control"}})
            @Html.ValidationMessageFor(model => model.EindPeriode, "", new {@class = "text-danger"})
        </div>
    </div>

    <div id="accordion" class="form-group">
        <ul id="acc">
            <li>
                @foreach (var item in Model.ProjectCategories)
                {
                    <div>
                        <span id="accordionspan">
                            @Html.DisplayFor(modelItem => item.Categorie.Naam, new {@class = "maakProjectLabel"})
                        </span>
                        @Html.CheckBoxFor(modelItem => item.Aanpasbaar, new {id = "checkbox" + Model.ProjectCategories.IndexOf(item), htmlAttributes = new {@class = "form-control"}})
                        <span class="maakProject" id="maakproject_@Model.ProjectCategories.IndexOf(item)">                                
                            @Html.TextBoxFor(modelItem => item.MaxBedrag, new {htmlAttributes = new {@class = "form-control"}, @Value = item.Categorie.Bedrag})
                            @Html.TextBoxFor(modelItem => item.MinBedrag, new {htmlAttributes = new {@class = "form-control"}})
                            @Html.CheckBoxFor(modelItem => item.AutoAanpasbaar, new {id = "autocheckbox", title="Indien aangevinkt wordt het bedrag automatisch mee aangepast bij beweging slider van een andere gerelateerde categorie", htmlAttributes = new {@class = "form-control masterTooltip" } })
                        </span>
                    </div>

                    <ul>
                        @foreach (var item2 in item.Sub)
                        {
                            <li>
                                <a href="#">
                                    <span id="accordionspan">
                                        @Html.DisplayFor(modelItem => item2.Categorie.Naam, new {@class = "maakProjectLabel"})
                                    </span>
                                    @Html.CheckBoxFor(modelItem => item2.Aanpasbaar, new {id = "subcheckbox" + Model.ProjectCategories.IndexOf(item), htmlAttributes = new {@class = "form-control"}})
                                    <span class="maakProject" id="submaakproject_@Model.ProjectCategories.IndexOf(item)">
                                        @Html.TextBoxFor(modelItem => item2.MaxBedrag, new {htmlAttributes = new {@class = "form-control"}, @Value = item2.Categorie.Bedrag})
                                        @Html.TextBoxFor(modelItem => item2.MinBedrag, new {htmlAttributes = new {@class = "form-control"}})
                                        @Html.CheckBoxFor(modelItem => item2.AutoAanpasbaar, new {id = "autocheckbox", title = "Indien aangevinkt wordt het bedrag automatisch mee aangepast bij beweging slider van een andere gerelateerde categorie", htmlAttributes = new {@class = "form-control masterTooltip" } })


                                    </span>
                                </a>

                                <ul>
                                    @foreach (var item3 in item2.Sub)
                                    {
                                        <li>
                                            <span id="accordionspan">
                                                @Html.DisplayFor(modelItem => item3.Categorie.Naam, new {@class = "maakProjectLabel"})
                                            </span>
                                            @Html.CheckBoxFor(modelItem => item3.Aanpasbaar, new {id = "subsubcheckbox" + Model.ProjectCategories.IndexOf(item), htmlAttributes = new {@class = "form-control"}})
                                            <span class="maakProject" id="subsubmaakproject_@Model.ProjectCategories.IndexOf(item)">
                                                @Html.TextBoxFor(modelItem => item3.MaxBedrag, new {htmlAttributes = new {@class = "form-control"}, @Value = item3.Categorie.Bedrag})
                                                @Html.TextBoxFor(modelItem => item3.MinBedrag, new {htmlAttributes = new {@class = "form-control"}})
                                                @Html.CheckBoxFor(modelItem => item3.AutoAanpasbaar, new {id = "autocheckbox", title = "Indien aangevinkt wordt het bedrag automatisch mee aangepast bij beweging slider van een andere gerelateerde categorie", htmlAttributes = new {@class = "form-control masterTooltip" }})


                                            </span>
                                        </li>
                                    }
                                </ul>
                            </li>
                        }
                    </ul>
                }
            </li>
        </ul>
    </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>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script>
    $(document).ready(function () {
        $('.masterTooltip').hover(function () {
            // Hover over code
            var title = $(this).attr('title');
            $(this).data('tipText', title).removeAttr('title');
            $('<p class="tooltip"></p>')
            .text(title)
            .appendTo('body')
            .fadeIn('slow');
        }, function () {
            // Hover out code
            $(this).attr('title', $(this).data('tipText'));
            $('.tooltip').remove();
        }).mousemove(function (e) {
            var mousex = e.pageX + 20; //Get X coordinates
            var mousey = e.pageY + 10; //Get Y coordinates
            $('.tooltip')
            .css({ top: mousey, left: mousex })
        });
        $("#accordion #accordionspan").click(function () {
            $(this).parent().next().slideToggle();
        });            
        $(function () {                
            $('input[id^="checkbox"]').change(function () {                    
                var checkboxIndex = $(this).attr('id').replace('checkbox', '');
                if ($(this).is(':checked')) {
                    $('#maakproject_' + checkboxIndex).show();
                }
                else {
                    $('#maakproject_' + checkboxIndex).hide();
                }
            });
        });

    })
</script>
}

Controllers are fairly basic, but maybe the fault is in here. Using the post to debug the project

public ActionResult MaakProject(int begrotingsId)
    {
        Project project = bmgr.MaakProjectCategories(begrotingsId);
        return View(project);
    }

    [HttpPost]
    public ActionResult MaakProject(Project p)
    {
        //pmgr.CreateParticipatieProject(p);
        return null;
    }

Edit: Here is the for loop like suggested, now i have ProjectCategories, with the subs and in these the subs. But now the properties of these subs stay false or 0

@for (var i = 0; i < Model.ProjectCategories.Count; i++)
{
    <div>
        <span id="accordionspan">
            @Html.DisplayFor(modelItem => Model.ProjectCategories[i].Categorie.Naam, new { @class = "maakProjectLabel" })
        </span>
        @Html.CheckBoxFor(modelItem => Model.ProjectCategories[i].Aanpasbaar, new { Name = "ProjectCategories[" + i + "].Aanpasbaar", id = "checkbox" + i, htmlAttributes = new { @class = "form-control" } })
        <span class="maakProject" id="maakproject_@i">
            @Html.TextBoxFor(modelItem => Model.ProjectCategories[i].MaxBedrag, new { Name = "ProjectCategories[" + i + "].MaxBedrag", htmlAttributes = new { @class = "form-control" }, @Value = Model.ProjectCategories[i].Categorie.Bedrag })
            @Html.TextBoxFor(modelItem => Model.ProjectCategories[i].MinBedrag, new { Name = "ProjectCategories[" + i + "].MinBedrag", htmlAttributes = new { @class = "form-control" } })
            @Html.CheckBoxFor(modelItem => Model.ProjectCategories[i].AutoAanpasbaar, new { Name = "ProjectCategories[" + i + "].AutoAanpasbaar", id = "autocheckbox", title = "Indien aangevinkt wordt het bedrag automatisch mee aangepast bij beweging slider van een andere gerelateerde categorie", htmlAttributes = new { @class = "form-control masterTooltip" } })
        </span>
    </div>

    <ul>
        @for (var j = 0; j < Model.ProjectCategories[i].Sub.Count; j++)
        {
            <li>
                <a href="#">
                    <span id="accordionspan">
                        @Html.DisplayFor(modelItem => Model.ProjectCategories[i].Sub[j].Categorie.Naam, new { @class = "maakProjectLabel" })
                    </span>
                    @Html.CheckBoxFor(modelItem => Model.ProjectCategories[i].Sub[j].Aanpasbaar, new { Name = "ProjectCategories.[" + i + "].Sub[" + j + "].Aanpasbaar", id = "subcheckbox" + i, htmlAttributes = new { @class = "form-control" } })
                    <span class="maakProject" id="submaakproject_@i">
                        @Html.TextBoxFor(modelItem => Model.ProjectCategories[i].Sub[j].MaxBedrag, new { Name = "ProjectCategories.[" + i + "].Sub[" + j + "].MaxBedrag", htmlAttributes = new { @class = "form-control" }, @Value = Model.ProjectCategories[i].Sub[j].Categorie.Bedrag })
                        @Html.TextBoxFor(modelItem => Model.ProjectCategories[i].Sub[j].MinBedrag, new { Name = "ProjectCategories.[" + i + "].Sub[" + j + "].MinBedrag", htmlAttributes = new { @class = "form-control" } })
                        @Html.CheckBoxFor(modelItem => Model.ProjectCategories[i].Sub[j].AutoAanpasbaar, new { Name = "ProjectCategories.[" + i + "].Sub[" + j + "].AutoAanpasbaar", id = "autocheckbox", title = "Indien aangevinkt wordt het bedrag automatisch mee aangepast bij beweging slider van een andere gerelateerde categorie", htmlAttributes = new { @class = "form-control masterTooltip" } })


                    </span>
                </a>

                <ul>
                    @for (var k = 0; k < Model.ProjectCategories[i].Sub[j].Sub.Count; k++)
                    {
                        <li>
                            <span id="accordionspan">
                                @Html.DisplayFor(modelItem => Model.ProjectCategories[i].Sub[j].Sub[k].Categorie.Naam, new { @class = "maakProjectLabel" })
                            </span>
                            @Html.CheckBoxFor(modelItem => Model.ProjectCategories[i].Sub[j].Sub[k].Aanpasbaar, new { Name = "ProjectCategories.[" + i + "].Sub[" + j + "].Sub[" + k + "].Aanpasbaar", id = "subsubcheckbox" + i, htmlAttributes = new { @class = "form-control" } })
                            <span class="maakProject" id="subsubmaakproject_@i">
                                @Html.TextBoxFor(modelItem => Model.ProjectCategories[i].Sub[j].Sub[k].MaxBedrag, new { Name = "ProjectCategories.[" + i + "].Sub[" + j + "].Sub[" + k + "].MaxBedrag", htmlAttributes = new { @class = "form-control" }, @Value = Model.ProjectCategories[i].Sub[j].Sub[k].Categorie.Bedrag })
                                @Html.TextBoxFor(modelItem => Model.ProjectCategories[i].Sub[j].Sub[k].MinBedrag, new { Name = "ProjectCategories.[" + i + "].Sub[" + j + "].Sub[" + k + "].MinBedrag", htmlAttributes = new { @class = "form-control" } })
                                @Html.CheckBoxFor(modelItem => Model.ProjectCategories[i].Sub[j].Sub[k].AutoAanpasbaar, new { Name = "ProjectCategories.[" + i + "].Sub[" + j + "].Sub[" + k + "].AutoAanpasbaar", id = "autocheckbox", title = "Indien aangevinkt wordt het bedrag automatisch mee aangepast bij beweging slider van een andere gerelateerde categorie", htmlAttributes = new { @class = "form-control masterTooltip" } })


                            </span>
                        </li>
                    }
                </ul>
            </li>
        }
    </ul>
}

i don't see how to fix my problem from that solution, i'm sorry — Michiel, Apr 19 '16 at 12:30
If you want bind your list from html to C# object all input with list fields have to has `name` attribute set like this `` — Sousuke, Apr 19 '16 at 12:44
You can change @Html syntax to change name, like this `@Html.TextBoxFor(m => m.MaxBedrag, new { Name = "ProjectCategories[" + i +"].MaxBedrag"})` you can change `forech` to `for` and get the index `i` to `TextBoxFor` — Sousuke, Apr 19 '16 at 13:11
i tried this for 1 box so far but stays the list stays null, 1 box should be enough to check this i think — Michiel, Apr 19 '16 at 13:15
okay so an update: i tried your code and it works, but when i try to implement it for the subs it doesn't work. I implemented it using the for and list.indexof(item), maybe i should try using a for. But since i'm only a student i'm gonna do that tomorrow :p — Michiel, Apr 19 '16 at 15:26

List in form is null when doing a post mvc

0 Answers0