umbraco 7 build navigation from multinode tree picker

Carlos Mosqueda 185 posts 277 karma points

Nov 17, 2014 @ 20:54

Umbraco 7, build navigation from MultiNode Tree Picker?

How do use the MultiNode Tree Picker in Umbraco 7 to build a navigation. I am trying to use a PartialView. We used to do a MacroScript but wanted to try my hand at the MVC and Partial views.

My code is below but it just keeps not rendering. I have the MultiNode Tree picker set up on a Node as a property but I keep getting a customError page via MVC. I don't quite understand where it is breaking. I even try to just print out the name of my var 'mainNavi' (below) and that gives me nothing. Any ideas?

My current code is:

@{
var mainNavi = Umbraco.Content(1544);
    }

<div id="mainNavTop">
<nav class="left">
<ul id="mainNav">


@foreach (var x in @mainNavi.mainNavigationPicker)
{

var page = Umbraco.Content(x.InnerText);
var firstSubLevel = page.Children.Where("template!=0").Where("Visible");
var selected = Array.IndexOf(CurrentPage.Path.Split(','), page.Id.ToString()) >= 0 ? " class=\"selected\"" : "";

<li>@page.Name
        @*
        @if (firstSubLevel.Count() > 0)
        {
            <ul class="subNavFirst">
            @foreach (var secondPage in firstSubLevel)
            {
            var subSelect = Array.IndexOf(Model.Path.Split(','), secondPage.Id.ToString()) >= 0 ? " class=\"selected\"" : "";
            <[email protected](subSelect)>@NavLevel(@secondPage)</li>
            }
            </ul>  
        }*@
</li>
    }
</ul>
</nav>
</div>
<!-- END MAIN NAV -->







@*HELPERS*@

@helper NavLevel(dynamic page)
{

   if(page.NodeTypeAlias == "Redirect")
   {
      if (page.HasValue("alternateNavigationName"))
      {
          if(page.openInNewWindow){
            <a href="@page.redirectURL" target="_blank">@page.alternateNavigationName</a>
          }else{
             <a href="@page.redirectURL">@page.alternateNavigationName</a>

          }
      }
      else
      {
          if(page.openInNewWindow){
            <a href="@page.redirectURL" target="_blank">@page.Name</a>
          }else{
             <a href="@page.redirectURL">@page.Name</a>

          }


      }
   }
   else
   {
      if (page.HasValue("alternateNavigationName"))
      {
        <a href="@page.Url">@page.alternateNavigationName</a>
       }
       else
       {
         <a href="@page.Url">@page.Name</a>
       }
    }

}

Copy Link

Steve Morgan 1278 posts 4216 karma points c-trib

Nov 18, 2014 @ 09:50

Am I right in thinking that you've found the solution here?

http://our.umbraco.org/projects/backoffice-extensions/ucomponents/questionssuggestions/26638-Multi-Node-Tree-Picker-help-with-example-code-(in-Razor)?p=1#comment198660

Copy Link

Carlos Mosqueda 185 posts 277 karma points

Nov 18, 2014 @ 17:37

@Steve,

You would be correct in your thinking. I just had to clean up some code and I was going to post my code here. But your find lead me to the right direction.

My solution for our implementation.

@inherits Umbraco.Web.Mvc.UmbracoTemplatePage

@*Top level navigation new structure*@


@{  
var naviList = Umbraco.Content(1544).mainNavigationPicker.ToString().Split(new string[] { "," }, StringSplitOptions.RemoveEmptyEntries);
var naviCollection = Umbraco.Content(naviList);
<div id="mainNavTop">
<nav class="left">
<ul id="mainNav">
    @foreach (var item in naviCollection)
    {
        var firstSubLevel = @item.Children.Where("Visible");
        <li class="@(item.IsAncestorOrSelf(CurrentPage) ? "selected" : null)">
            @NavLevel(@item)
                @if (firstSubLevel.Count() > 0)
                    {
                        <ul class="subNavFirst">
                        @foreach (var secondPage in firstSubLevel)
                        {                   
                           <li class="@(secondPage.IsAncestorOrSelf(CurrentPage) ? "subSelected" : null)">
                               @NavLevel(@secondPage)
                               </li>
                        }
                        </ul>  

                    }
        </li>
    }
</ul>
</nav>
</div>
}

@*HELPERS*@

@helper NavLevel(dynamic item)
{

   if(item.NodeTypeAlias == "Redirect")
   {
      if (item.HasValue("alternateNavigationName"))
      {
          if(item.openInNewWindow){
            <a href="@item.redirectURL" target="_blank">@item.alternateNavigationName</a>
          }else{
             <a href="@item.redirectURL">@item.alternateNavigationName</a>

          }
      }
      else
      {
          if(item.openInNewWindow){
            <a href="@item.redirectURL" target="_blank">@item.Name</a>
          }else{
             <a href="@item.redirectURL">@item.Name</a>

          }


      }
   }
   else
   {
      if (item.HasValue("alternateNavigationName"))
      {
        <a href="@item.Url">@item.alternateNavigationName</a>
       }
       else
       {
         <a href="@item.Url">@item.Name</a>
       }
    }

}

Copy Link

is working on a reply...

This forum is in read-only mode while we transition to the new forum.

You can continue this topic on the new forum by tapping the "Continue discussion" link below.

Flag this post as spam?

Umbraco 7, build navigation from MultiNode Tree Picker?