Sign in Register
Copied to clipboard

Flag this post as spam?

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


  • Craig100 1078 posts 2366 karma points c-trib
    Jun 22, 2013 @ 19:14
    Craig100
    0

    MVC Razor nav conundrum in V6.1.1

    Doing my first navigation partial view and am having trouble setting the active class on news and case study items.

    page.Name == Model.Name is working for pages on the same level, but not when say viewing a news item and I want the news lising menu tab highlighted.  Can't seem to find a way to do this.

                <div class="navbar-inner">                  
                    <ul class="nav">                    
                        @{
                            string homeClassName = "";
                            if(Model.Name == "Home"){
                                homeClassName = " class=active";
                           }
                        <li@(homeClassName)><a href="/home">Home</a></li>
                        var root = Model.AncestorOrSelf();
                                        
                        foreach(var page in root.Children.Where("Visible")){
                            var className = "";
                            if(page.Name == Model.Name){
                                className = " class=active";
                            }
                            <li@(className)><a href="@page.Url">@page.Name</a></li@()>                        
                            }
                        }
                    </ul>                               
                </div>

    I guess it must be possible.

    Cheers,

    Craig

    Copy Link
  • Moran 277 posts 885 karma points
    Jun 22, 2013 @ 21:24
    Moran
    0

    use this:

    var selected = Array.IndexOf(Model.Path.Split(','), node.Id.ToString()) >= 0 ? " class = current" : "";
    Copy Link
  • Craig100 1078 posts 2366 karma points c-trib
    Jun 22, 2013 @ 21:27
    Craig100
    0

    Looks good but I get a "The name 'node' does not exist in the current context" error.

    Craig

    Copy Link
  • Jeavon Leopold 3008 posts 13221 karma points MVP 7x admin c-trib
    Jun 22, 2013 @ 21:36
    Jeavon Leopold
    100

    Hi Craig, I would probably go with this:

                 <div class="navbar-inner">                  
                <ul class="nav">                    
                    @{
                        string homeClassName = "";
                        if(Model.Name == "Home"){
                            homeClassName = " class=active";
                       }
                    <li@(homeClassName)><a href="/home">Home</a></li>
                    var root = Model.AncestorOrSelf();

                    foreach(var page in root.Children.Where("Visible")){
                        var className = "";
                        if (page.DescendantsOrSelf().Any(x => x.Id == Model.Id))
                        {
                            className = " class=active";
                        }
                        <li@(className)><a href="@page.Url">@page.Name</a></li@()>                        
                        }
                    }
                </ul>                               
            </div>

     Let me know if that solves it for you?

    Cheers,

    Jeavon

    Copy Link
  • Craig100 1078 posts 2366 karma points c-trib
    Jun 22, 2013 @ 21:49
    Craig100
    0

    Thanks Jeavon,

    That works perfectly.

    Cheers,

    Craig

    Copy Link
  • Jeavon Leopold 3008 posts 13221 karma points MVP 7x admin c-trib
    Jun 22, 2013 @ 22:36
    Jeavon Leopold
    0

    No worries, glad it works for you.

    Copy Link
  • Jeavon Leopold 3008 posts 13221 karma points MVP 7x admin c-trib
    Jun 24, 2013 @ 21:23
    Jeavon Leopold
    1

    Hey Craig, you might be interested in this little package I made http://our.umbraco.org//projects/starter-kits/navit-mvc  Your questions among others inspired me to create it :-) Hope you might find it useful.

    Cheers,

    Jeavon

    Copy Link

  • 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