How do I post form data with a list of list?

Question

I'm trying to save a list of lists, where I have a checkbox containing some options where are multiple choices. I'm getting the first list just fine, but the "children" prop always comes back as null.

Most solutions on the internet says that the index must be set in the list, but I have not been successful with it.

I saw someone had a similar issue: Post Form MVC with List of List

But have not been able to make use of it, so I'm hoping you guys can help me out.

ViewModel

 public class Input
    {
        public string title { get; set; }
        public int id { get; set; }
        public bool value { get; set; }
        public List<Input> children { get; set; }


        public Input()
        {
            children = new List<Input>();
        }
    }

Controller

[HttpGet]
        public IActionResult Services()
        {
            var Inputs = new List<Input>() {
                    new Input(){title="test",id=1 },
                    new Input(){title="test2",id=2,
                        children =new List<Input>(){
                        new Input(){title="test3",id=3 },
                        new Input(){title="test4",id=4 }
                    } },
                };

            return View(Inputs);
        }
 [HttpPost]
        public IActionResult Services(List<Input> model)
        {
            return Redirect("/");

        }

View

@model List<Input>;
 <form asp-controller="Home" asp-action="Services" method="post">
                    @for (int i = 0; i < Model.Count; i++)
                    {
                        @Html.HiddenFor(m => m[i].title)
                        @Html.HiddenFor(m => m[i].id)
                        @Html.HiddenFor(m => m[i].children)
                         <div class="checkbox">
                             <label class="form-check-label">
                                 @Html.CheckBoxFor(m => m[i].value, new { @class = "form-check-input collapser" })
                                 @Model[i].title
                                 <span class="form-check-sign">
                                     <span class="check"></span>
                                 </span>
                             </label>
                         </div>
                        if(Model[i].children != null){
                            string containerName = "["+i+"].value" + "Container";
                            <div name="@containerName">
                                <div class="checkbox">
                                @for (int c = 0; c < Model[i].children.Count; c++){
                                    @Html.HiddenFor(m => m[i].children[c].title)
                                    @Html.HiddenFor(m => m[i].children[c].id)
                                    @Html.HiddenFor(m => m[i].children[c].children)
                                     <label class="form-check-label">
                                         @Html.CheckBoxFor(m => m[i].children[c].value, new { @class = "form-check-input" })
                                         @Model[i].children[c].title
                                         <span class="form-check-sign">
                                             <span class="check"></span>
                                         </span>
                                     </label>
                                }
                                </div>
                            </div>
                        }
                    }
                    <button type="submit">Save</button>
                </form>

Xueli Chen · Accepted Answer · 2019-06-18 05:35:49Z

1

Use the browser's developer tools(press F12) to check the Form Data of the Request Headers in Network , the problem arises in the consistency of model bindings , try to comment out the below code lines:

@Html.HiddenFor(m => m[i].children)

@Html.HiddenFor(m => m[i].children[c].children)

answered Jun 18, 2019 at 5:35

Xueli Chen

12.7k3 gold badges28 silver badges39 bronze badges

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

1 Comment

Emil Klausen Over a year ago

That was exactly the problem! Thank you very much :D

Collectives™ on Stack Overflow

How do I post form data with a list of list?

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related