Copied to clipboard

Flag this post as spam?

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


  • Steve 472 posts 1216 karma points
    Apr 16, 2014 @ 22:56
    Steve
    0

    Testing for Node Being Current Page and Assigning CSS class

    Is there a way to test a node to see if it is the current page? I thought it would have been something like:

    item.Model ? "class=active" : null; 

    this doesn't work so I was experiementing with item.IsDescendantOrSelf(Model), but of course this will assign the class to all the children of the current page. What can I do to only select the current node? Here is my navigation:

    @{
    var page = Model.AncestorOrSelf(3).Children;
    
    <ul>
    @foreach (var subPage in page) {
          var style = subPage.IsDescendantOrSelf(Model) ? "class=active" : "";
          var targetParent = subPage.externalUrl ? "target=_blank" : "";
          var linkParent = subPage.HasValue("externalUrl") ? subPage.url : subPage.Url;
          <li @style ><a href="@linkParent" @targetParent>@subPage.Name</a>
    
    @if(subPage.Children.Any() && subPage.IsAncestorOrSelf(Model)){ 
        <ul class="academics-items">
            @foreach (var item in subPage.Children.Where("Visible")) {
        var childActive = item.IsDescendantOrSelf(Model) ? "class=activeChild" : "";
        var target = item.externalUrl ? "target=_blank" : "";
        var link = item.HasValue("externalUrl") ? item.url : item.Url;
            <li @childActive ><a href="@link" @target>@item.Name</a>
    
    @if(item.Children.Any() && item.IsAncestorOrSelf(Model)){ 
        <ul class="academics-items">
            @foreach (var child in item.Children.Where("Visible")) {
        var subChildActive = child.IsDescendantOrSelf(Model) ? "class=subActive" : "";
        var subTarget = child.externalUrl ? "target=_blank" : "";
        var subLink = child.HasValue("externalUrl") ? child.url : child.Url;
            <li @subChildActive ><a href="@subLink" @subTarget>@child.Name</a>
    
    @if(child.Children.Any() && child.IsAncestorOrSelf(Model)){ 
        <ul class="academics-items">
            @foreach (var lastChild in child.Children.Where("Visible")) {
        var lastChildActive = lastChild.IsDescendantOrSelf(Model) ? "class=lastActive" : "";
        var lastChildTarget = lastChild.externalUrl ? "target=_blank" : "";
        var lastChildLink = lastChild.HasValue("externalUrl") ? lastChild.url : lastChild.Url;
            <li @lastChildActive ><a href="@lastChildLink" @lastChildTarget>@lastChild.Name</a></li>
            }
        </ul>
                }
                </li>
            }
                        </ul>
                    }
    
            </li>
            }
        </ul>
       } 
        </li>
  • Fuji Kusaka 2203 posts 4220 karma points
    Apr 17, 2014 @ 06:15
    Fuji Kusaka
    0

    Hi Steve,

    Change this 
    var subChildActive = child.IsDescendantOrSelf(Model)?"class=subActive":"";
    to
    var subChildActive = child.IsAncestorOrSelf(Model)?"class=subActive":""; 
  • Steve 472 posts 1216 karma points
    Apr 17, 2014 @ 14:58
    Steve
    0

    Fuji, this still applies my css to any ancestors of the current page I would like to have it only affect the current node of the navigation. You can see my navigation here

    https://edit-wwwprep.rose-hulman.edu/offices-and-services/global-programs/current-students.aspx

  • Steve 472 posts 1216 karma points
    Apr 17, 2014 @ 17:23
    Steve
    100

    Got it. Apparently there is a IsHelper "IsEqual" that I can use to compair the node in the foreach to Model.

  • Steve 472 posts 1216 karma points
    Apr 17, 2014 @ 17:56
    Steve
    0

    Sorry, but I still have a question. What if I wanted the parent node of the children to be styled specifically when any of the children are active or IsEqual(Model), to show that they are part of the parents group?

  • Steve 472 posts 1216 karma points
    Apr 17, 2014 @ 19:45
    Steve
    0

    If I can't do it with ternary operators, how would I do it with an "if" statement?

    This method doesn't seem to be the right syntax?:

    @if(subPage.Children.Any() && subPage.IsAncestorOrSelf(Model)){ 
        <ul class="academics-items">
            @foreach (var item in subPage.Children.Where("Visible")) {
                if(item.IsFirst){
                    var style2 = "class=activeParent";
                } else if(item.IsEqual(Model)) {
                    var style2 = "class=activeChild";
                }
                var target = item.externalUrl ? "target=_blank" : "";
                var link = item.HasValue("externalUrl") ? item.url : item.Url;
                <li @style2 ><a href="@link" @target>@item.Name</a>
Please Sign in or register to post replies

Write your reply to:

Draft