Sposób podświetlania aktywnego elementu menu w pasku nawigacyjnym po ponownym wczytaniu strony

Question

Menu paska menu Bootstrap 3 definiowane jest za pomocą poniższego kodu. Jeśli element zostanie wybrany z menu, nowa strona zostanie załadowana z serwera. To samo menu bootstrap pojawia się na każdej stronie. Jednak menu rozwijane, które nie jest używane do wybierania menu, nie jest podświetlone.

Jak wymusić bootstrat, aby automatycznie dopasować ostatnio wybrany element menu, jeśli lokalna pamięć jest dozwolona: zapisać ostatnio wybrany element w pamięci lokalnej. Jeśli załadowana jest nowa strona, pobierz nazwę ostatnio klikniętego elementu menu i zaznacz ją, dodając do niej klasę active.

Doin to w żądaniach serwerów zmieniających wygenerowane menu poprzez dynamiczne dodawanie klasy active do właściwego elementu. Jak wdrożyć to bez takich zmian? ASP.NET MVC4 jest używany po stronie serwera. Może jquery + localstorage w przeglądarce lub jakieś proste rozwiązanie ASP.NET MVC4 jest dostępne.

<nav class="navbar navbar-default"> 
    <div class="container-fluid"> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> 
     <span class="sr-only">Toggle navigation</span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     </button> 
    </div> 

    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
     <ul class="nav navbar-nav"> 
     <li class="dropdown"> 
      <a href='#' class="dropdown-toggle" data-toggle="dropdown">Dropdown 1</a> 
      <ul class="dropdown-menu" role="menu"> 
      <li><a href='somepage'>Action11</a></li> 
      <li><a href='somepage'>Action12</a></li> 
      <li><a href='somepage'>Action13</a></li> 
      </ul> 
     </li> 

     <li class="dropdown"> 
      <a class="dropdown-toggle" data-toggle="dropdown">Dropdown 2</a> 
      <ul class="dropdown-menu" role="menu"> 
      <li><a href='somepage'>Action121</a></li> 
      <li><a href='somepage'>Action122</a></li> 
      <li><a href='somepage'>Action123</a></li> 
      </ul> 
     </li> 
     </ul> 
    </div><!-- /.navbar-collapse --> 
    </div><!-- /.container-fluid --> 
</nav> 

Aktualizacja

Menu zawiera listy rozwijanej z parametrami zapytania jak pokazano poniżej. W tym przypadku w kodzie w Alexander Solonik odpowiedź _str wartość jest # zawsze i urlpath jest zawsze DoklstlG Nic nie jest podświetlone. Jak naprawić ?

<nav class="navbar navbar-default navbar-static-top"> 
    <div class="container-fluid"> 
     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> 
       <span class="sr-only">Toggle</span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
      </button> 
     </div> 
     <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
      <ul class="nav navbar-nav" id="menu"> 
       <li class='dropdown'> 
<a href='#' class='dropdown-toggle' data-toggle='dropdown' role='button'>Pad1 
</a> 
<ul class='dropdown-menu' role='menu'> 

<li><a href='/admin/?_user=admin&_company=1'>Bar1</a></li><li><a id='menu_DoklstlG' tabindex='-1' entity='DoklstlG' href='/admin/Grid/Index/DoklstlG?_user=admin&_company=1' title='Ctrl+E'>Option1</a></li> 

<li><a id='menu_DoklstlO' tabindex='-1' entity='DoklstlO' href='/admin/Grid/Index/DoklstlO?_user=admin&_company=1'>Ostuarve</a> 

... 

Answer 1

Co można zrobić, to ustawić wartość worka widoku w żądanej akcji. Po, wykonaj logikę, aby poprosić o tę wartość podczas konstruowania menu.

Używam tego mechanizmu, ale przy użyciu actionfilter i używanie go do działania lub kontrolera adnotacji

Answer 2

dobrze miałem podobny problem i napisał następujący skrypt:

var _urlpath = $(location).attr('pathname').split('/').pop(); 

    $('#menu > li').each(function(){ 
     var _this = $(this); 
     var _str = _this.find('a').attr('href'); 
     _str !== _urlpath ? _this.removeClass('active') : _this.addClass('active'); 
    }); 

jej dość proste, filtrowania URL nazwa ścieżki, przechowuj ją w zmiennej, a co najważniejsze, po załadowaniu nowej strony przeprowadź pętlę przez wszystkie li i spróbuj dopasować adres URL url (nie znam dokładnej terminologii ... przepraszam) do hash w li> a.

Mam nadzieję, że ta pomoc. niestety, może być lepszy sposób na zrobienie tego.

P.S. być może trzeba trochę zmodyfikować kod.