Question

我想我需要一点帮助，使用Razor viewengine在Umbraco中渲染af递归树菜单结构。

我需要渲染以下树形菜单结构：

Page 1
     Page 2
         Page 3
         Page 4
              Page 5
     Page 6
     Page 7

所以当我在Page 5时，我需要在父节点上使用CSS类"open"：Page 4，Page 2和Page 1以及CSS类我站在的节点上"active"。

我在单击菜单中的链接时得到了正确节点的结构，但我根本无法弄清楚如何应用正确的类： - （

我的代码如下：

@{
        DynamicNode current = Model;
        var nodes = Model.AncestorOrSelf(2).Children.Where("Visible");        
        if(nodes.Any())
        {
            <ul class="side-nav-list">
                @foreach(var node in nodes)
                {
                    bool isDescendantOrSelf = current.IsDescendantOrSelf(node);
                    <li>
                        <a href="@node.Url">@node.Name</a>
                        @if(isDescendantOrSelf)
                        {
                            @RenderSubMenuRecursive(node)
                        }
                    </li>
                }
            </ul>
        }
    }

@helper RenderSubMenuRecursive(DynamicNode node)
{
    if(node.Children.Any(x => x.GetPropertyValue("umbracoNaviHide").Equals("0") && Model.IsDescendantOrSelf(node)))
    {        
         var childNodes = node.Children.Where(x => x.GetPropertyValue("umbracoNaviHide").Equals("0"));
         string css = node.IsAncestor(Model) ? "open" : "";
         <ul>

            @foreach(var childNode in childNodes)
            {
                <li class="@css">                    
                    <a href="@childNode.Url">@childNode.Name</a>
                    @if (childNode.IsDescendantOrSelf(node))
                    {
                        @RenderSubMenuRecursive(childNode)
                    }
                </li>
            }
        </ul>
    }
}

非常感谢任何帮助/暗示！ :-)提前致谢！

Answer 1

通过移动一些代码等解决了这个问题。最终解决方案：

 @{
        DynamicNode current = Model;
        var nodes = Model.AncestorOrSelf(2).Children.Where("Visible");        
        if(nodes.Any())
        {
            <ul class="side-nav-list">
                @foreach(var node in nodes)
                {                        
                    @RenderSubMenuRecursive(node)                                           
                }
            </ul>
        }
    }

@helper RenderSubMenuRecursive(DynamicNode node)
{    
    var childNodes = node.Children.Where(x => x.GetPropertyValue("umbracoNaviHide").Equals("0"));
string css = node.IsAncestor(Model) ? "open" : "";

if(node.Id == Model.Id)
{
    css = "active";
}

<li class="@css">
    <a href="@node.Url">@node.Name</a>

    <ul>            
        @foreach (var childNode in childNodes.Where(childNode => Model.IsDescendantOrSelf(node)))
        {
            @RenderSubMenuRecursive(childNode)
        }
    </ul>
</li>    
}

Razor递归树菜单结构

1 个答案: