dropdown navigation

René Andersen 238 posts 684 karma points

Mar 11, 2015 @ 12:54

Dropdown navigation

Hi everybody

I have some problems with my code and the HTML output it generates.

I use this code:

@foreach (var childPage in home.Children)
{
  if (childPage.Children.Any())
  {
    <li class="dropdown @(childPage.IsAncestorOrSelf(CurrentPage) ? "active" : null)">
      @if (childPage.DocumentTypeAlias == "LandingPage")
      {
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">@childPage.Name</a>
        <ul class="dropdown-menu">
          <li>@childPages(childPage.Children)</li>
        </ul>
      }
      else
      {
        <a href="@childPage.Url">@childPage.Name</a>
      }
    </li>
  }
  else
  {
    <li class="@(childPage.IsAncestorOrSelf(CurrentPage) ? "active" : null)">
      <a href="@childPage.Url">@childPage.Name</a>
    </li>
  }
}

And the HTML output looks like this:

<ul class="nav navbar-nav navbar-right">
  <li class="dropdown">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Produkter</a>
    <ul class="dropdown-menu">
      <li>
        <a href="#">Link 1</a>
        <a href="#">Link 2</a>
      </li>
    </ul>
  </li>
</ul>

But I need it to look like this:

<ul class="nav navbar-nav navbar-right">
  <li class="dropdown">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Produkter</a>
    <ul class="dropdown-menu">
      <li>
        <a href="#">Link 1</a>
      </li>
      <li>
        <a href="#">Link 2</a>
      </li>
    </ul>
  </li>
</ul>

Does anyone know what I am doing wrong?

// René

Copy Link

Sören Deger 726 posts 2833 karma points c-trib

Mar 11, 2015 @ 13:18

Hi René,

where you define childPages() ? Can you show the code of this method? I think you should look at this part.

Best,

Sören

Copy Link

Sören Deger 726 posts 2833 karma points c-trib

Mar 11, 2015 @ 13:25

Or is your code above the entire code of the method childPages() and you call it recursively?

Best,

Sören

Copy Link

René Andersen 238 posts 684 karma points

Mar 11, 2015 @ 13:33

Hi Sören

Below you can see the whole code:

@if (home.Children.Any())
{
  @* Get the first page in the children *@
  var naviLevel = home.Children.First().Level;

  @* Add in level for a CSS hook *@
  <ul class="nav navbar-nav navbar-right">

    @* For each child page under the home node *@
    @foreach (var childPage in home.Children)
    {
      if (childPage.Children.Any())
      {
        <li class="dropdown @(childPage.IsAncestorOrSelf(CurrentPage) ? "active" : null)">
          @if (childPage.DocumentTypeAlias == "LandingPage")
          {
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">@childPage.Name</a>
            <ul class="dropdown-menu">
              <li>@childPages(childPage.Children)</li>
            </ul>
          }
          else
          {
            <a href="@childPage.Url">@childPage.Name</a>
          }
        </li>
      }
      else
      {
        <li class="@(childPage.IsAncestorOrSelf(CurrentPage) ? "active" : null)">
          <a href="@childPage.Url">@childPage.Name</a>
        </li>
      }
    }
  </ul>
}

@helper childPages(dynamic pages)
{
  @* Ensure that we have a collection of pages *@
  if (pages.Any())
  {
    @* Get the first page in pages and get the level *@
    var naviLevel = pages.First().Level;

    @* Add in level for a CSS hook *@
    foreach (var page in pages)
    {
      <a href="@page.Url">@page.Name</a>
      @* if the current page has any children *@
      if (page.Children.Any())
      {
        @* Call our helper to display the children *@
        @childPages(page.Children)
      }
    }
  }
}

// René

Copy Link

Sören Deger 726 posts 2833 karma points c-trib

Mar 11, 2015 @ 13:40

Hi René,

remove the <li></li> elements in this line:

<li>@childPages(childPage.Children)</li>

to

@childPages(childPage.Children)

and insert the <li> elements instead in your childPages() helper method like this:

foreach(var page in pages)
{
<li>
<a href="@page.Url">@page.Name</a>
@*if the current page has any children *@
if(page.Children.Any())
      {
         @*Callour helper to display the children *@
        @childPages(page.Children)
      }
</li> 
}

And I think after this you get another issue with your code.

Change the same code to this:

foreach(var page in pages){

<li>
<a href="@page.Url">@page.Name</a>
@*if the current page has any children *@
if(page.Children.Any())
      {
<ul>
         @*Callour helper to display the children *@
        @childPages(page.Children)
</ul>
      }
</li> 
}

Hope this helps?

Best,
Sören

Copy Link

René Andersen 238 posts 684 karma points

Mar 11, 2015 @ 13:59

Hi Sören

That solved the problem and it worked with and without the last part in your solution. (The part after: "And I think after this you get another issue with your code.").

Thanks I really appreciate it.

// René

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?

Dropdown navigation