Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • Mangirish Wagle 34 posts 106 karma points
    Aug 06, 2016 @ 18:14
    Mangirish Wagle
    0

    Bootstrap Navigation Menu using Vorto

    Hello All,

    I am c;reating multilingual site using Vorto. I have already created a Bootstrap Navigation Menu Using Vorto I have created a property pageTitle and wanted to assign the value of pageTitle onto Navigation Menu as per the pages available. As far as now, my code is ...

    @inherits Umbraco.Web.Mvc.UmbracoTemplatePage
    @using Our.Umbraco.Vorto.Extensions
    
    <ul class="nav navbar-nav">
    
        @{
            var maxLevelForNav = 4;            
            var home = CurrentPage.AncestorsOrSelf(1).First();
    
            @RenderNavForNode(home, 1)
    
            foreach (var page in home.Children.Where("NodeTypeAlias != \"register\"").Where("Visible"))
            {
    
                @RenderNavForNode(page, maxLevelForNav);
    
    
             }
        }
    </ul>
    
    
    @helper RenderNavForNode(dynamic page, int maxLevel)
    {
    var current = CurrentPage.Id == page.Id ? "active" : null;
    
    if (page.Children.Where("Visible").Any() && page.Level == 2)
    {
        @:<li class="dropdown @current"><a href="@page.Url" class="dropdown-toggle disabled" data-toggle="dropdown">@page.Name<span class="caret"></span></a>
    }
    
    else if (page.Children.Where("Visible").Any() && page.Level > 2)
    {
        @:<li class="dropdown-submenu @current"><a class="@current" href="@page.Url">@page.Name</a>
    }
    else
    {
        @:<li><a class="@current" href="@page.Url">@page.Name</a></li>
    }
    
    
    if (page.Children.Where("Visible").Any() && page.Level < maxLevel)
    {
    
        <ul class="dropdown-menu" role="menu">
            @foreach (var subPage in page.Children.Where("Visible"))
            {
                @RenderNavForNode(subPage, maxLevel)
            }
        </ul>
    }
    }
    

    Instead of @page.Name, I have used @Model.Content.GetVortoValue("pageTitle") but that returns only the pageTitle of the current page not other pages which is supposed to display.

    Can anyone help me in this case.

    Regards.

  • Marc Goodson 2155 posts 14408 karma points MVP 9x c-trib
    Aug 07, 2016 @ 00:19
    Marc Goodson
    2

    Hi Mangirish

    There are several ways to work with Umbraco nodes in templates, one is to use the dynamic approach, as you have here, eg using CurrentPage and pulling back your list of children as dynamic page objects

    and another is a

    a more 'strongly typed' approach using 'IPublishedContent' , ie using @Model.Content instead of CurrentPage to access and navigate the Umbraco content tree.

    GetVortoValue is an extension to IPublishedContent, and so if you try to use it from your dynamic object, eg

    page.GetVortoValue("pageTitle") it won't work.

    You could either cast the dynamic object into IPublishedContent in your foreach loop

    eg:

    @foreach (var page in home.Children.Where("NodeTypeAlias != \"register\"").Where("Visible"))
            {
    IPublishedContent superPage = (IPublishedContent) page;
    
    <li>@superPage.GetVortoValue("pageTitle")</li>
    }
    

    or maybe if your site is working alot with Vorto, you might consider using the IPublishedContent approach throughout your site, when retrieving nodes eg:

    @{
        var home = Model.Content.AncestorsOrSelf(1).FirstOrDefault();
        foreach (var page in home.Children().Where(f=>f.IsVisible() && f.DocumentTypeAlias == "register"))
        {
    <li>@page.GetVortoValue("pageTitle")</li>
    }
    }
    

    Theres a great article here about the differences between dynamic and strongly typed content: http://24days.in/umbraco/2015/strongly-typed-vs-dynamic-content-access/

  • Mangirish Wagle 34 posts 106 karma points
    Aug 08, 2016 @ 08:28
    Mangirish Wagle
    0

    Hello Marc,

    Very much thanks for your suggestion.

    I finally casted the dynamic object into IPublishedContent in your foreach loop and got this final code.

    @inherits Umbraco.Web.Mvc.UmbracoTemplatePage
    @using Our.Umbraco.Vorto.Extensions
    
    
    <ul class="nav navbar-nav">
    
    @{
        var maxLevelForNav = 4;
        var home = CurrentPage.AncestorsOrSelf(1).First();
    
        @RenderNavForNode(home, 1)
    
        foreach (var page in home.Children.Where("NodeTypeAlias != \"register\"").Where("Visible"))
        {
    
            @RenderNavForNode(page, maxLevelForNav);
    
    
        }
    }
    </ul>
    
    
    
    
    @helper RenderNavForNode(dynamic page, int maxLevel)
    {
    var current = CurrentPage.Id == page.Id ? "active" : null;
    IPublishedContent superPage = (IPublishedContent)page;
    if (page.Children.Where("Visible").Any() && page.Level == 2)
    {
        @:<li class="dropdown @current">
            @:<a href="@page.Url" class="dropdown-toggle disabled" data-toggle="dropdown">
            @superPage.GetVortoValue("pageTitle")<span class="caret">    </span>
            @:</a>
    }
    
    else if (page.Children.Where("Visible").Any() && page.Level > 2)
    {
        @:<li class="dropdown-submenu @current"><a class="@current" href="@page.Url">@superPage.GetVortoValue("pageTitle")</a>
    }
    else
    {
        @:<li><a class="@current" href="@page.Url">@superPage.GetVortoValue("pageTitle")</a></li>
    }
    
    
    if (page.Children.Where("Visible").Any() && page.Level < maxLevel)
    {
    
        <ul class="dropdown-menu" role="menu">
            @foreach (var subPage in page.Children.Where("Visible"))
            {
                @RenderNavForNode(subPage, maxLevel)
            }
        </ul>
    }
    
    
    }
    

    Thanks very much for your valuable suggestion. But, can you please provide the whole code if I intend to convert the above code in IPublishedContent approach

    Regards. :)

  • Marc Goodson 2155 posts 14408 karma points MVP 9x c-trib
    Aug 15, 2016 @ 22:55
    Marc Goodson
    1

    Something like this:

     @inherits Umbraco.Web.Mvc.UmbracoTemplatePage
        @using Our.Umbraco.Vorto.Extensions
    
    
    <ul class="nav navbar-nav">
    
        @{
            var maxLevelForNav = 4;
            var home = Model.Content.AncestorOrSelf(1);
    
            @RenderNavForNode(home, 1)
    
            foreach (var page in home.Children().Where(f => f.IsVisible() && f.DocumentTypeAlias == "register"))
            {
    
                @RenderNavForNode(page, maxLevelForNav);
    
    
            }
        }
    </ul>
    
    
    
    
    @helper RenderNavForNode(IPublishedContent page, int maxLevel)
    {
        var current = Model.Content.Id == page.Id ? "active" : null;
        var hasChildren = page.Children().Any(f=>f.IsVisible());
    
        if (page.Level == 2 && hasChildren)
        {
            @:<li class="dropdown @current">
                @:<a href="@page.Url" class="dropdown-toggle disabled" data-toggle="dropdown">
                    @page.GetVortoValue("pageTitle")<span class="caret">    </span>
                    @:</a>
    }
    
        else if (page.Level > 2 && hasChildren)
        {
            @:<li class="dropdown-submenu @current"><a class="@current" href="@page.Url">@page.GetVortoValue("pageTitle")</a>
    }
        else
        {
            @:<li><a class="@current" href="@page.Url">@page.GetVortoValue("pageTitle")</a></li>
    }
    
    
        if (page.Level < maxLevel && hasChildren)
        {
    
            <ul class="dropdown-menu" role="menu">
                @foreach (var subPage in page.Children().Where(f=>f.IsVisible()))
                {
                    @RenderNavForNode(subPage, maxLevel)
                }
            </ul>
        }
    
    
    }
    
  • Mangirish Wagle 34 posts 106 karma points
    Aug 17, 2016 @ 05:31
    Mangirish Wagle
    0

    Thank you Marc very Much. Will try it definitely.

Please Sign in or register to post replies

Write your reply to:

Draft