triple level navigation in razor

Press Ctrl / CMD + C to copy this to your clipboard.

Copied to clipboard

Flag this post as spam?

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

Carlos 338 posts 472 karma points

Feb 02, 2012 @ 00:05

0

Triple Level Navigation in Razor

I am a bit new to Razor. I found a code snoppen that lets me get 2 levels of navigation. How would I spit out a third level?

This is what I have. I have a feeling it is either my third 'if' statement or my third 'foreach' or both.

Any help is appreciated.

@using umbraco.MacroEngines
@inherits umbraco.MacroEngines.DynamicNodeContext
@{
var homeNode = @Model.NodeById(1089);
<ul id="mainNav">
  <li><a href="/">Home</a> </li>
  @foreach (dynamic page in @Model.AncestorOrSelf(1).Children.Where("Visible"))
  {
  string style = "";
  if (Model.Id == page.Id) { style = "class=\"selected\""; }
  <li>
  <a href="@page.Url" @Html.Raw(style)>@page.Name</a>

  @if (page.Childen != null && page.Children.Count() > 0)
  {
  <ul class="subNavFirst">
  @foreach (dynamic secondPage in page.Children.Where("Visible"))
{
  <li>
<a href="@secondPage.Url">@secondPage.Name</a>

  @if (page.Childen != null && page.Children.Count() > 0)
  {
  <ul class="subNavSecond">
  @foreach (dynamic thirdPage in page.Children.Where("Visible"))
{
  <li>
<a href="@thirdPage.Url">@thirdPage.Name</a>
  </li>
  }
  </ul>
  }

  </li>
  }
<li class="subNavBottom">
  <img src="/media/1944/MenuBgShadowBottom.png" alt=""/>
</li>
  </ul>
  }
  </li>
  }
</ul>

}

Copy Link

Owen 123 posts 246 karma points

Feb 02, 2012 @ 02:42

There is a bug in your code:

 @if (page.Childen != null && page.Children.Count() > 0)
            {
                <ul class="subNavFirst">
                @foreach (dynamic secondPage in page.Children.Where("Visible"))
                 {
                    <li>
                         <a href="@secondPage.Url">@secondPage.Name</a>
                  
                              @if (page.Childen != null && page.Children.Count() > 0)
                                {
                                    <ul class="subNavSecond">
                                    @foreach (dynamic thirdPage in page.Children.Where("Visible"))
                                     {
                                        <li>
                                             <a href="@thirdPage.Url">@thirdPage.Name</a>
                                        </li>
                                    }
                                    </ul>
                                }
                 
                    </li>
                }

The code marked as bold shoud be secondPage, not page.

And furthermore you can move the same code into a helper code block, something like below:

@helper render_nav(dynamic page, string subNavClass, bool rendSubNav){

<li>

<a href="@page.Url">@page.Name</a>

if(rendSubNav && page.Children != null && page.Children.Count()>0){

<ul class="@subNavClass">

foreach(dynamic subPage in page.Children){

@render_nav(subPage, "newClass", rendSubNav);

</ul>

<li>

Copy Link

Rodion Novoselov 694 posts 859 karma points

Feb 02, 2012 @ 15:47

Hi. The version of mine :-)

@inherits umbraco.MacroEngines.DynamicNodeContext

@helper nav(dynamic node, int level) {
  if(level > 0) {
    if(node.Children.Any()) {
      <ul>
        @foreach(var child in node.Children.Where("Visible")) {
          <li>
            <a href="@child.Url">@child.Name</a>
            @nav(child, level - 1)
          </li>
        }
      </ul>
    }
  }
}

@nav(Model, Convert.ToInt32(Parameter.Levels))

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.

Please Sign in or register to post replies

Flag this post as spam?

Triple Level Navigation in Razor