mvc razor nav conundrum in v611 - Razor

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

Craig100 1136 posts 2523 karma points c-trib

Jun 22, 2013 @ 19:14

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 285 posts 934 karma points

Jun 22, 2013 @ 21:24

use this:

var selected = Array.IndexOf(Model.Path.Split(','), node.Id.ToString()) >= 0 ? " class = current" : "";

Copy Link

Craig100 1136 posts 2523 karma points c-trib

Jun 22, 2013 @ 21:27

0

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

Craig

Copy Link

Jeavon Leopold 3074 posts 13631 karma points MVP 11x admin c-trib

Jun 22, 2013 @ 21:36

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 1136 posts 2523 karma points c-trib

Jun 22, 2013 @ 21:49

0

Thanks Jeavon,

That works perfectly.

Cheers,

Craig

Copy Link
Jeavon Leopold 3074 posts 13631 karma points MVP 11x admin c-trib

Jun 22, 2013 @ 22:36

0

No worries, glad it works for you.

Copy Link
Jeavon Leopold 3074 posts 13631 karma points MVP 11x admin c-trib

Jun 24, 2013 @ 21:23

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
is working on a reply...

Please Sign in or register to post replies