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.
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
.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With