Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Twitter bootstrap + asp.net masterpages, how to set navbar item as active when user selects it?

We are in se same situation as question Make Twitter Bootstrap navbar link active, but in our case we are using ASP.net and MasterPages...

The thing is the navbar is defined at the masterpage and when you click a menuitem you are redirected to the corresponding child page so how would you do to change the navbar active item consecuently without replicating the logic in each child page? (Preferably without session variables and javascript only at master page)

like image 878
VSP Avatar asked Sep 10 '12 15:09

VSP


People also ask

How do I make my navbar link active on click?

To make the clicked tab active in the navigation bar, the <li> corresponding to the clicked href in index. html introduces the css of 'active' class and removes the 'active' class from the previous <li> on click.

How set navbar active class in bootstrap?

To set an active class in your bootstrap navbar, you can use ng-controller(NavigationController) to set bootstrap navbar active class with AngularJS. To run a single controller outside ng-view. You can set class= “active” when the angular route is clicked.


4 Answers

We solved it with the following function at Master Page:

 <script type="text/javascript">
        $(document).ready(function () {
            var url = window.location.pathname;
            var substr = url.split('/');
            var urlaspx = substr[substr.length-1];
            $('.nav').find('.active').removeClass('active');
            $('.nav li a').each(function () {
                if (this.href.indexOf(urlaspx) >= 0) {
                    $(this).parent().addClass('active');
                }
            });
        });
    </script>
like image 86
VSP Avatar answered Sep 27 '22 07:09

VSP


Here is what I have used in Razor:

<li class="@(Model.PageName == "DataEntryForms" ? "active" : "")">
  <a href="DataEntryForms">     
    Data Entry Forms
  </a>
</li>
<li class="@(Model.PageName == "UserAdmin" ? "active" : "")">
  <a href="UserAdmin">      
    User Administration
  </a>
</li>

Just define the name of the page as property in the model, then complete the test for each li that you have.

like image 32
David Robbins Avatar answered Sep 24 '22 07:09

David Robbins


 <script type="text/javascript">
     $(document).ready(function () {
         var url = window.location;
         $('ul.nav li a').each(function () {
             if (this.href == url) {
                 $("ul.nav li").each(function () {
                     if ($(this).hasClass("active")) {
                         $(this).removeClass("active");
                     }
                 });
                 $(this).parent().parent().parent().addClass('active');
                 $(this).parent().addClass('active');                     
             }
         });
     });
</script>
like image 42
sujit kinage Avatar answered Sep 28 '22 07:09

sujit kinage


Assuming that the active class is set correctly by ASP.net, I would recommend an easier solution:

// Add the class to the parent li element of the active a element:
$('#NavigationMenu ul li a.active').parent().addClass('active');

// Remove the active class from the a element:
$('#NavigationMenu ul li a.active').removeClass('active');

Using ASP.net routing, this solution works smoothly in my current project.

And if you want to manipulate the active item of the menu, I would recommend to use the MenuItemDataBound of the menu control in code behind instead. But in my case, this was not necessary.

like image 22
Tillito Avatar answered Sep 28 '22 07:09

Tillito