dropdown navigation

Go to solution

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

René Andersen 238 posts 684 karma points

Mar 11, 2015 @ 12:54

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 733 posts 2844 karma points c-trib

Mar 11, 2015 @ 13:18

0

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 733 posts 2844 karma points c-trib

Mar 11, 2015 @ 13:25

0

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 733 posts 2844 karma points c-trib

Mar 11, 2015 @ 13:40

Hi René,

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

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

@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

0

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...

Please Sign in or register to post replies