在MVC剃刀视图中迭代树节点?

时间:2013-02-01 01:02:11

标签: c# asp.net-mvc-4 tree

有没有办法对循环有向图的节点进行编码?

我对ASP.NET MVC有点新,我所处的模式是尝试使用包含的逻辑片段在视图模型中呈现数据。

也就是说,如果没有非递归的方式来做这个,那么递归“MVC风格”的最佳方法是什么?

这是我到目前为止所得到的。

型号:

namespace AaronWeb.Models
{
    public class Node
    {
        public Node()
        {
            Nodes = new List<Node>();
            Data = string.Empty;
        }

        public ICollection<Node> Nodes { get; set; }

        public string Data { get; set; }

        public override string ToString()
        {
            if (Data != null)
            {
                return Data.ToString();
            }
            else
            {
                return string.Empty;
            }
        }
    }
}

查看

@model AaronWeb.Models.Node

@{
    var q = new Queue<AaronWeb.Models.Node>();
    q.Enqueue(Model);
}
<h1>Graph Partial View</h1>

@while (q.Count > 0)
{
    var node = q.Dequeue();
    <ul>
        <li>@node.ToString()
            @if (node.Nodes.Count > 0)
            {
                <ul>
                    @foreach (var child in node.Nodes)
                    {
                        <li>
                            @child.ToString()
                        </li>
                        q.Enqueue(child);
                    }
                </ul>
            }
        </li>
    </ul>
}

行动方法

public ActionResult Graph()
{
    var model = new Node
    {
        Data = "Foo",
        Nodes = new[] {
             new Node
             {
                 Data = "Bar",
                 Nodes = new [] {
                     new Node
                     {
                         Data = "Bing"
                     },
                     new Node
                     {
                         Data = "Bang"
                     }
                 }
             },
             new Node
             {
                 Data = "Bat"
             },
         },
    };
    return View(model);
}

结果(错误)

enter image description here

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Graph</title>
</head>
<body>
    <div>

<h1>Graph Partial View</h1>

    <ul>
        <li>Foo
                <ul>
                        <li>
                            Bar
                        </li>
                        <li>
                            Bat
                        </li>
                </ul>
        </li>
    </ul>
    <ul>
        <li>Bar
                <ul>
                        <li>
                            Bing
                        </li>
                        <li>
                            Bang
                        </li>
                </ul>
        </li>
    </ul>
    <ul>
        <li>Bat
        </li>
    </ul>
    <ul>
        <li>Bing
        </li>
    </ul>
    <ul>
        <li>Bang
        </li>
    </ul>

    </div>
</body>
</html>

1 个答案:

答案 0 :(得分:7)

我自己想出来了。

关键是要意识到我可以递归地调用局部视图!

@model AaronWeb.Models.Node
<ul>
    <li>@Model.ToString()
        @foreach (var child in Model.Nodes)
        {
            Html.RenderPartial("_GraphPartial", child);
        }
    </li>
</ul>