How to change class active for a menu which is partial ASP.NET MVC

Question

I have a partial view which I used it for all my views as a menu

I import this menue above all of the views with this line code

@Html.Partial("_MainMenu")

mainly i want to change class:"active" between views but i don't know how it is possible in this structure.

my problem is that I want when user opens a link in menu, first omit class:"active" from all of the tags and then add class active for that same link which user opens. for example when user is in home-index then its tag has class active so Home text in menu has a lighter color and then when user is for example in contact_us view I want the contact us text in menu has a lighter color by giving active class.

Appreciate any help. thanks

this is my partial menu view if needed , default is for home index

<div id="mainnav" class="">
<nav class="navbar navbar-default" role="navigation">
    <div id="topmenu" class="fixsaz">

    </div>


    <div class="row">
        <div class="navbar-header col-md-4 col-sm-6">


            <a class="" id="titlename" href="Home">
                <img class="" src="~/Content/img/logo/iranjourney.png" alt="iranholiday.com" />
            </a>
        </div>
        <div class="col-md-8 col-sm-10 collapse navbar-collapse overflowshow" id="example-navbar-collapse">

            <ul id="mainul" class="nav navbar-nav  overflowshow">
                <li class="active">// default is for home index 
                    @Html.ActionLink("HOME", "index", "Home")

                </li>


                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                        OUR TOURS
                        <b class="caret"></b>
                    </a>

                    <ul class="dropdown-menu">
                        <li>
                            <a href="#">Scheduled Group Tours</a>
                        </li>
                        <li><a href="/Tours_By_Category/index">Tours By Category</a></li>


                    </ul>

                </li>

                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">

                        <b class="caret"></b>
                    </a>



                </li>


                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                        OUR SERVICES
                        <b class="caret"></b>
                    </a>



                </li>



                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                        ABOUT US
                        <b class="caret"></b>
                    </a>

                    <ul class="dropdown-menu">
                        <li>
                            <a href="/Home/About_US">
                                <p>Team work</p>
                                <p>Certificates</p>
                                <p>Statistics</p>
                                <p>Our agents</p>
                            </a>
                        </li>


                    </ul>

                </li>

                <li>
                    @Html.ActionLink("CONTACT US", "index", "Contact_US")


                </li>

            </ul>

        </div>
    </div>





</nav>

Answer 1

You can use javascript/jquery to set the active class.

Remove the initial class="active" for your 'default' <li> element and give each <li> element a unique id attribute (something that relates to the name of the controller and/or action method), for example

<li id="Index">...</li>
<li id="Tours">...</li>

to allow them to be selected. Then in each view add a script to select the associated element and set the class name, for example in Index.cshtml

$('#Index').addClass('active');

Alternatively, have a single script in your layout file that sets the class name based on a value passed to the view from the controller method, for example

$('#' + '@ViewBag.ActiveMenu').addClass('active');

and the in each controller method, pass the associated id to the view, for example in the Index() method

ViewBag.ActiveMenu = "Index";
return View(..);