display child links submenu - Templates, (partial) views and macros

Daniel 9 posts 100 karma points

Jan 18, 2017 @ 22:26

Display child links (submenu)

Umbraco 7

Hi guys!

I currently have a Navigation macro that looks like this:

<ul class="nav navbar-nav navbar-right">
@foreach (var item in selection)
{
    <li class="@(item.IsAncestorOrSelf(CurrentPage) ? "current" : null)">
        <a href="@item.Url">@item.Name</a>
    </li>
}

Works great, however some items have another sublevel. How could I call the children of these links?

Thank you guys! Sorry if its too basic, I have 2 days working with Umbraco :)

Copy Link

Vishmay 19 posts 100 karma points

Jan 19, 2017 @ 10:30

@DisplayChildrensInList(Masteritem,true)

    @helper DisplayChildrensInList(dynamic Masteritem,bool firsttime)
    {
        var Items = Masteritem.Children;
        var ItemCount =Items.Count();
        if (ItemCount > 0)
        {
            <ul @(firsttime?"class=lisitng":"")>
                @foreach (var mitem in Items)
                {
                        <li>
                            <a href="@mitem.Url">
                                @mitem.Name
                            </a>
                           @DisplayChildrensInList(mitem,false)
                        </li>
                }
            </ul>
        }      
    }

Works for Infinite level

Masteritem is simple to use

 var Masteritem= CurrentPage.Site();
Some times
 var Masteritem= CurrentPage;

Update

if you want custom root location. Take a content picker StartNode in Master DataType and set contentpicker to link to your custom root enter image description here

 var home = CurrentPage.Site();
var nodecommalist = home.GetPropertyValue<string>("StartNode").ToString();
var Masteritem = Umbraco.Content(nodecommalist);

Hope this helps

Copy Link

Daniel 9 posts 100 karma points

Jan 20, 2017 @ 16:50

Thank you very Vishmay!

When I use your code I get this error in the front-end:

Error loading Partial View script (file: ~/Views/MacroPartials/MainNav.cshtml)

Something Im missing?

Copy Link

Dirk De Grave 4541 posts 6021 karma points MVP 3x admin c-trib

Jan 20, 2017 @ 18:36

Daniel,

Depends on what you've got so far, we can't really guess what's wrong unless you provide some more info (Code...)

Alternatively, you could have a look at the ~/App_Data/Logs directory and find most recent logging file, which may give a clue on what's going on.

--Dirk

Copy Link

Daniel 9 posts 100 karma points

Jan 20, 2017 @ 19:21

Thanks Dirk! Basically I have the code provided by Vishmay. I took look at the logs and find out this:

WARN  umbraco.macro - Error loading Partial View (file: ~/Views/MacroPartials/MainNav.cshtml). Exception: System.Web.HttpCompileException (0x80004005): c:\inetpub\wwwroot\Views\MacroPartials\MainNav.cshtml(1): error CS0103: The name 'Masteritem' does not exist in the current context

Copy Link

Dirk De Grave 4541 posts 6021 karma points MVP 3x admin c-trib

Jan 20, 2017 @ 19:32

Hi Daniel,

Still didn't provide any context, if you just paste in Vishmay's code, it'll probably not work as intended...

In your case, it doesn't recognize Masteritem which is used in the

@DisplayChildrensInList(Masteritem, true)

Above statement calls the helper function DisplayChildrensInList(), but if you haven't declared Masteritem, it will never work.

So, ... you'd be better off pasting your complete code so we know what context you're working in. Again, without this knowledge, really hard to tell where you're going wrong (In fact, we know where you're going wrong based on exception message, but you really need to provide the big picture so we can pinpoint why and help you more efficiently)

--Dirk

Copy Link

Daniel 9 posts 100 karma points

Jan 20, 2017 @ 20:08

Understood. I currently have around 5 pages. Each page has around 6-7 subpages. Now I need to show this as the navigation of my website. I was watching a video tutorial on Umbraco.tv and found out about Partial View Macro Files. As you know in there I can create snippets to display a child page list of the current page, ordered by name, etc...however I need to show all of my parent pages AND their childs. I tried this code but it only shows the first level:

@inherits Umbraco.Web.Macros.PartialViewMacroPage @* This snippet displays a list of links of the pages immediately under the top-most page in the content tree. This is the home page for a standard website. It also highlights the current active page/section in the navigation with the css class "current". *@ @{ var selection = CurrentPage.Site().Children.Where("Visible"); } <ul class="nav navbar-nav navbar-right"> @foreach (var item in selection) { <li class="@(item.IsAncestorOrSelf(CurrentPage) ? "current" : null)"> <a href="@item.Url">@item.Name</a> </li> } </ul>

Currently that code its working great, however I have that issue. Please let me know if that is enough info. Thanks again!

Copy Link

Nik 1597 posts 7156 karma points MVP 6x c-trib

Jan 20, 2017 @ 20:22

Hi Daniel,

Dirk is right, you are missing context with your error description however the one thing I did notice is that you refer to this being in a Macro.

Making the assumption that you are trying to generate site wide navigation and the site is using some sort of tree layout with regards to the content nodes in the back office you could do something like this:

var siteNode = Model.Content.Site();

<ul class="nav navbar-nav navbar-right">
       <li class="@(Model.Content.Id == Model.Content.Site().Id ? "current" : string.Empty)"><a href="/">Home</a></li>
       @foreach(var levelOneChild in siteNode.Children)
        {
            <li class="@(Model.Content.Id == Model.Content.Site().Id ? "current" : string.Empty)">
                <a href="@levelOneChild.Url">@levelOneChild.Name</a>
                @DisplaySubMenu(levelOneChild)
            </li>

        }
</ul>

 @DisplaySubMenu(siteNode)

@helper DisplaySubMenu(IPublishedContent Masteritem)
{
    if (MasterItems.Children.Any())
    {
        <ul>
            @foreach (var mitem in MasterItems.Children)
            {
                <li>
                   <a href="@mitem.Url">
                      @mitem.Name
                   </a>
                       @DisplaySubMenu(mitem)
                    </li>
            }
        </ul>
    }      
}

The first part of this creates your top level nav, Home, and all the immediate children. During this it then calls display children for each child node which checks if there are children and displays them.

A word of caution with this though, it is recursive, meaning that it will keep working down the tree for all pages in your site. If you want to exclude things from the menu, it would worth adding a true false property that you can check if it is set then filter based on that.

Nik

Copy Link

Dirk De Grave 4541 posts 6021 karma points MVP 3x admin c-trib

Jan 20, 2017 @ 22:04

Just a quick follow up, before we get more syntactical errors...

if (MasterItems.Children.Any())

should be

if (Masteritem.Children.Any())

as that's the param you're passing in into helper function

Same goes for

@foreach (var mitem in Masteritem.Children)

which should be

@foreach (var mitem in Masteritem.Children)

--Dirk

Copy Link

Nik 1597 posts 7156 karma points MVP 6x c-trib

Jan 20, 2017 @ 23:34

Cheers for the spots Dirk :-)

Copy Link

Vishmay 19 posts 100 karma points

Jan 23, 2017 @ 09:37

Masteritem is simple to use

 var Masteritem= CurrentPage.Site();
Some times
 var Masteritem= CurrentPage;

Update

if you want custom root location. Take a content picker StartNode in Master DataType and set contentpicker to link to your custom root enter image description here

 var home = CurrentPage.Site();
var nodecommalist = home.GetPropertyValue<string>("StartNode").ToString();
var Masteritem = Umbraco.Content(nodecommalist);

Hope this helps

Copy Link

Daniel 9 posts 100 karma points

Jan 30, 2017 @ 20:21

Hi guys! I finally did it, thanks for the help in everyone involved my nav is now working :) loving Umbraco and the community!

Copy Link

is working on a reply...

Flag this post as spam?

Display child links (submenu)