MVC Sidebar don't stay active after click

Question

I'm using MVC.net, having difficulty to get through bootstrap sidebar li stay active after click and continue to refresh the page all the time i click.

However i have try to use the example provide below still, it still can't be active after click.

i have try through several answer from the link Click option1 here and Click option2 here

Below is my code:

CurrentControllerActiveClassName:

 public string CurrentControllerActiveClassName(string targetController)
    {
        var controller = ViewContext.RouteData.Values["controller"];
        return controller.Equals(targetController) ? "active" : string.Empty;
    }

Html layout:

<ul class="sub-menu" style="display: block;">
    <li class="dropdown @CurrentControllerActiveClassName("Option")">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">@Manager.Resource.Value("ABC000") </a>
        <ul class="sub-menu">
            <li>@Html.ActionLink(Manager.Resource.Value("ABC001"), "Import", "Others Country")</li>  
            <li>@Html.ActionLink(Manager.Resource.Value("ABC002"), "Apply", "Accept")</li>
            <li>@Html.ActionLink(Manager.Resource.Value("ABC003"), "Terminate", "Stop Purchasing")</li>
        </ul>
    </li>
</ul>

Jquery:

$('li:has(ul)', '#sidebar-content ul').each(function() {    
 if ($(this).hasClass('current') || $(this).hasClass('open-default')) {
     $('>a', this).append("<i class='arrow " + arrow_class_open + "'></i>");
 } else {
     $('>a', this).append("<i class='arrow " + arrow_class_closed + "'></i>");
 }
});

if ($('#sidebar').hasClass('sidebar-fixed')) {
    $('#sidebar-content').append('<div class="fill-nav-space"></div>');
}

$('#sidebar-content ul > li > a').on('click', function (e) {
    var navItem = $(this);    //add to try
    if (navItem.find("a").attr("href") == location.pathname) {  //add to try
        navItem.addClass("active");  //add to try
    }
    if ($(this).next().hasClass('sub-menu') == false) {
        return;
    }

The result should be stay active while sidebar is click.

We can't see what _@CurrentControllerActiveClassName("Option")_ renders. — Mackan, Jan 07 '19 at 08:23
ok, it's not easy to follow the jquery when the classes and structure of the html is not shown. My guess is that only the last three lines matter, but I can't be sure. — Mackan, Jan 07 '19 at 08:33
@Mackan the classes inside the structure is only matter with the content it won't involve with the sidebar — Comsphere, Jan 07 '19 at 08:38
@Mackan the varitem inside the jquery is code i try, but adding those into the code also will not work also — Comsphere, Jan 07 '19 at 08:44
Have you tried with using _e.preventDefault();_, as to stop the "refreshing" and then handling the click-events manually? — Mackan, Jan 07 '19 at 08:50
@Mackan yes i have try that, if i add e.preventDefault(); the other page will not be in functioning anymore, looks like if set

MVC Sidebar don't stay active after click

0 Answers0