从递归模型创建表单(Create a form from a recursive model)

2019-06-25 20:30发布

我有这样一个递归模型:

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>();
    }
}

我建立它通过使用此代码withing剃刀视图树:

<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>
}

一切正常,我的树渲染,但我需要在树的每一行添加一个文本框,我想有这样的输入名字:

Childs[0].Childs[1].Childs[2].Text

所以我的模型绑定会按预期工作。

有没有办法通过使用EditorTemplates或其他任何东西来实现这一目标?

我想避免的形式提交一份关于JavaScript的建设投入名称。

Answer 1:

你可以使用它尊重当前的导航方面,而不是这样的编辑模板@helper

因此,定义了一个自定义编辑模板Node类型( ~/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>

然后里面的一些主视图:

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

Menu属性明显类型的Node



文章来源: Create a form from a recursive model