Create a form from a recursive model

asp.net-mvc, asp.net-mvc-3, razor, recursion

Solution

You could use editor templates which respect the current navigational context instead of such `@helper`.

So define a custom editor template for the `Node` type ( `~/Views/Shared/EditorTemplates/Node.cshtml`):

@model Node
<li>
    @Html.LabelFor(x => x.Text)
    @Html.EditorFor(x => x.Text)
    @if (Model.Childs.Any())
    {
        <ul>
            @Html.EditorFor(x => x.Childs)
        </ul>
    }
</li>

and then inside some main view:

@model MyViewModel
<ul>
    @Html.EditorFor(x => x.Menu)
</ul>

where the `Menu` property is obviously of type `Node`.

Problem

I have a recursive model like this: ``` public class Node { public int Id { get; set; } public string Text { get; set; } public IList<Node> Childs { get; set; } public Node() { Childs = new List<Node>(); } } ``` I am building a tree with it withing a razor view by using this code: ``` <ul> @DisplayNode(Model) </ul> @helper DisplayNode(Node node) { <li> @node.Text @if(node.Childs.Any()) { <ul> @foreach(var child in node.Childs) { @DisplayNode(child) } </ul> } </li> } ``` Everything works fine, my tree renders, but I need to add a textbox on each row of the tree and I want to have to input names like this: ``` Childs[0].Childs[1].Childs[2].Text ``` So my model binding will work as expected. Is there any way by using EditorTemplates or anything else to achieve this? I want to avoid building input names in javascript on the form submit.

Original source