Copied to clipboard

Flag this post as spam?

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


  • Mads Sørensen 188 posts 433 karma points
    Feb 07, 2014 @ 14:13
    Mads Sørensen
    0

    If CurrentPage add active class

    Hi Guys
    I'm trying to make my first Razor navigation.

    My problem right now is I really don't know how to add an class to my active node.

    Can anyone help me with this - and maybe try to make me understand?

    @inherits Umbraco.Web.Mvc.UmbracoTemplatePage
    
    
    @{
    
    
    
        if (Model.Content.AncestorOrSelf(1).Children.Count() > 0) 
        {
            <ul id="navigationBar" class="nav navbar-nav">
                @foreach (var mainNodes in Model.Content.AncestorOrSelf(1).Children.Where("TemplateId != 0 && Visible"))
                {
    
                    if (mainNodes.Children.Where("TemplateId != 0 && Visible").Count() > 0)
                    {
                        <li class="@(mainNodes.IsAncestorOrSelf(CurrentPage) ? "active" : null)">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">@mainNodes.Name<b class="caret"></b></a>
    
                            <ul class="dropdown-menu">
    
                                @foreach(var subNodes in mainNodes.Children.Where("TemplateId !=0 && Visible"))
    
                                {
                                    <li><a href="@subNodes.Url">@subNodes.Name</a></li>
                                }
    
                            </ul>
    
                        </li>
    
                    }else{
                        <li>
                            <a href="@mainNodes.Url">@mainNodes.Name</a>
                            @if(CurrentPage.AncestorOrSelf.Id == mainNodes.Id ){
                                <span>juhu</span>
                            }
                        </li>
                    }
                }
            </ul>
         }  
     }
  • Fuji Kusaka 2203 posts 4220 karma points
    Feb 07, 2014 @ 14:27
    Fuji Kusaka
    0

    Hi Mads

    This should get you working 

     <li class="@Library.If(mainNodes.IsAncestorOrSelf(Model), "current", " ")"><href=""@mainNodes.Name</a></li>

     

  • mikkel 143 posts 365 karma points
    Mar 14, 2019 @ 10:20
    mikkel
    0

    i found out that if i was using bootstrap 4 i didt not work but if i used bootstra 3 it works i dont no if it help you but it workt for me

    https://our.umbraco.com/forum/templates-partial-views-and-macros/96035-how-do-i-add-the-bootstrap-css-class-active-to-the-menu-when-clicked

  • Fuji Kusaka 2203 posts 4220 karma points
    Feb 07, 2014 @ 14:41
    Fuji Kusaka
    0

    Sorry you want the span tag to display right

      @if(mainNodes.IsAncestorOrSelf(Model)){
                                <span>juhu</
    span>
                           
    }
  • Mads Sørensen 188 posts 433 karma points
    Feb 07, 2014 @ 15:01
    Mads Sørensen
    0

    Hi Fuji
    Sorry the Span was just for testing :D

    But the first one

     <li class="@Library.If(mainNodes.IsAncestorOrSelf(Model), "current", " ")"><a href=""> @mainNodes.Name</a></li>

    Gives me an error: CS0103: The name 'Library' does not exist in the current context

     

    And can you maybe explan what you are doing?

  • Jeavon Leopold 3010 posts 13225 karma points MVP 8x admin c-trib
    Feb 07, 2014 @ 15:13
    Jeavon Leopold
    0

    Intriguing approach Fuji!

    This would be equivalent in MVC @Umbraco.If(mainNodes.IsAncestorOrSelf(Model.Content),"current", " ")

  • Sebastiaan Janssen 4901 posts 14657 karma points MVP admin hq
    Feb 07, 2014 @ 16:25
    Sebastiaan Janssen
    0

    And even better:

    <li class="@(mainNodes.IsAncestorOrSelf(Model) ? "current" : null)"><a href=""> @mainNodes.Name</a></li>
    

    This will produce either <li class="current"><a href="">Name</a></li> or <li><a href="">Name</a></li>. No more empty class attributes!

    This will probably work as well but I haven't tested:

     <li class="@Umbraco.If(mainNodes.IsAncestorOrSelf(Model.Content), "current", null)"><a href=""> @mainNodes.Name</a></li>
    
  • Sebastiaan Janssen 4901 posts 14657 karma points MVP admin hq
    Feb 07, 2014 @ 16:28
    Sebastiaan Janssen
    0

    Guess I didn't ready very well, I see the ternary operator and the null trick is used in the opening post already. My bad, carry on! ;)

  • Jeavon Leopold 3010 posts 13225 karma points MVP 8x admin c-trib
    Feb 07, 2014 @ 16:30
    Jeavon Leopold
    0

    @Seb, Also, I don't think your second one will work, @Library doesn't exist in Mvc :-)

  • Sebastiaan Janssen 4901 posts 14657 karma points MVP admin hq
    Feb 07, 2014 @ 16:30
    Sebastiaan Janssen
    0

    @Jeavon I saw.. :) Updated to use your sample instead!

  • Fuji Kusaka 2203 posts 4220 karma points
    Feb 07, 2014 @ 16:38
    Fuji Kusaka
    0

    Ah really need to get my hands on mvc. Damn it.

    Sorry guys

  • Jeavon Leopold 3010 posts 13225 karma points MVP 8x admin c-trib
    Feb 07, 2014 @ 16:43
    Jeavon Leopold
    1

    This one does leave a empty class attribute

    <li class="@Umbraco.If(mainNodes.IsAncestorOrSelf(Model.Content), "current", null)"><a href=""> @mainNodes.Name</a></li>
    

    So, as @Seb mentioned this is the best method as no empty class attribute (through some magic), mini correction on @Sebs post above as Model should be Model.Content

    <li class="@(mainNodes.IsAncestorOrSelf(Model.Content) ? "current" : null)"><a href=""> @mainNodes.Name</a></li>
    
  • Sebastiaan Janssen 4901 posts 14657 karma points MVP admin hq
    Feb 07, 2014 @ 17:06
    Sebastiaan Janssen
    0

    @Jeavon Guess it only works with "Native" MVC then! Thanks for the test, good to know! :)

  • Jeavon Leopold 3010 posts 13225 karma points MVP 8x admin c-trib
    Feb 07, 2014 @ 17:09
    Jeavon Leopold
    0

    Yeah, I think it's because @Umbraco.If returns HtmlString instead of bool. Not having the empty attributes is a cool Razor feature to know about though!

  • Mads Sørensen 188 posts 433 karma points
    Feb 07, 2014 @ 19:36
    Mads Sørensen
    0

    Hi guys 

    Thanks for all your posts.

    But I'm really sorry to said that none of your solutions didn't work

    <li class="@Umbraco.If(mainNodes.IsAncestorOrSelf(Model.Content), "current", null)">

    This line just throws me an empty <li> no class added????

  • Jeavon Leopold 3010 posts 13225 karma points MVP 8x admin c-trib
    Feb 07, 2014 @ 19:46
    Jeavon Leopold
    0

    Hi Mads,

    Strange, this is the "best" solution:

    <li class="@(mainNodes.IsAncestorOrSelf(Model.Content) ? "current" : null)"><a href=""> @mainNodes.Name</a></li>
    

    Jeavon

  • Jeavon Leopold 3010 posts 13225 karma points MVP 8x admin c-trib
    Feb 07, 2014 @ 19:59
    Jeavon Leopold
    0

    I've made a few further optimizations and tested with the v7 txt start kit and it seems to work fine:

    @{
        if (Model.Content.AncestorOrSelf(1).Children.Any())
        {
            <ul id="navigationBar" class="nav navbar-nav">
                @foreach (var mainNodes in Model.Content.AncestorOrSelf(1).Children.Where(x => x.TemplateId != 0 && x.IsVisible()))
                {
                    if (mainNodes.Children.Any(x => x.TemplateId != 0 && x.IsVisible()))
                    {
                        <li class="@(mainNodes.IsAncestorOrSelf(Model.Content) ? "active" : null)">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">@mainNodes.Name<b class="caret"></b></a>
                            <ul class="dropdown-menu">
                                @foreach(var subNodes in mainNodes.Children.Where(x => x.TemplateId != 0 && x.IsVisible()))
                                {
                                    <li><a href="@subNodes.Url">@subNodes.Name</a></li>
                                }
                            </ul>
                        </li>
                    }else{
                        <li>
                            <a href="@mainNodes.Url">@mainNodes.Name</a>
                            @if(Model.Content.AncestorOrSelf().Id == mainNodes.Id ){
                                <span>juhu</span>
                            }
                        </li>
                    }
                }
            </ul>
         }
    }
    
  • Mads Sørensen 188 posts 433 karma points
    Feb 07, 2014 @ 20:23
    Mads Sørensen
    0

    Hi Jeavon

    Thanks for your hugh work, but i'm still sorry to tell you that it just still gives me an <li> and nothing else.

    I'm really new to this Razor language.

    the script is in an Partial view and i got this part in the top  of the fil

    @inherits Umbraco.Web.Mvc.UmbracoTemplatePage

    Maybe i'm doing something wrong?

  • Jeavon Leopold 3010 posts 13225 karma points MVP 8x admin c-trib
    Feb 07, 2014 @ 20:29
    Jeavon Leopold
    0

    Hi Mads, it's all fine.

    To clarify one thing, this will add class="active" to only the level 2 node that is a child of the root node.

    For instance on the txt starter kit, when viewing a level 3 node, a news article only the level 2 node, "news" has the class="active" not the article itself.

    Does that make sense?

    Jeavon

  • Mads Sørensen 188 posts 433 karma points
    Feb 07, 2014 @ 20:42
    Mads Sørensen
    0

    Jeavon, Jeavon I'm such an idiot :D

    My html output looked like this:

    <ul>
    <li><a href="#">Frontpage</a></li>
    <li><a href="#">Subpage</a></li>
    </ul> 

    So no subpages and the class is only added to <li>'s with subpages :D

    So my code now looks like this:

    @{
    
    
    
        if (Model.Content.AncestorOrSelf(1).Children.Count() > 0) 
        {
            <ul id="navigationBar" class="nav navbar-nav">
                @foreach (var mainNodes in Model.Content.AncestorOrSelf(1).Children.Where("TemplateId != 0 && Visible"))
                {
    
                    if (mainNodes.Children.Where("TemplateId != 0 && Visible").Count() > 0)
                    {
                        <li class="@Umbraco.If(mainNodes.IsAncestorOrSelf(Model.Content), "active", null)">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">@mainNodes.Name<b class="caret"></b></a>
    
                            <ul class="dropdown-menu">
    
                                @foreach(var subNodes in mainNodes.Children.Where("TemplateId !=0 && Visible"))
    
                                {
                                    <li><a href="@subNodes.Url">@subNodes.Name</a></li>
                                }
    
                            </ul>
    
                        </li>
    
                    }else{
                        <li class="@Umbraco.If(mainNodes.IsAncestorOrSelf(Model.Content), "active", null)">
                            <a href="@mainNodes.Url">@mainNodes.Name</a>
                            @if(CurrentPage.AncestorOrSelf.Id == mainNodes.Id ){
                                <span>juhu</span>
                            }
                        </li>
                    }
                }
            </ul>
         }  
     }

    and everything works fine

  • Jeavon Leopold 3010 posts 13225 karma points MVP 8x admin c-trib
    Feb 07, 2014 @ 20:58
    Jeavon Leopold
    2

    Awesome!

    While it could do with an update (it wrote it when MVC was first introduced in v4.10), you might find this navigation code I wrote interesting. There are some instructions on how to use it here.

  • Mads Sørensen 188 posts 433 karma points
    Feb 07, 2014 @ 21:05
    Mads Sørensen
    0

    Great, thanks a lot :D
    - I'll look at it 

  • Mads Sørensen 188 posts 433 karma points
    Feb 07, 2014 @ 22:00
    Mads Sørensen
    1

    Wow Jeavon, that looks crazy :D
    But you my problem is that I don't understand more than 10% of that script - and it's very important for to understand what I'm doing :D

  • Jeavon Leopold 3010 posts 13225 karma points MVP 8x admin c-trib
    Feb 07, 2014 @ 22:15
    Jeavon Leopold
    0

    Absolutely understand, learning is the most fun part!

Please Sign in or register to post replies

Write your reply to:

Draft