Twitter bootstrap + pages maîtres asp.net, comment définir l'élément de la barre de navigation comme actif lorsque l'utilisateur le sélectionne?

Nous sommes dans se même situation que la question Faire Twitter Bootstrap barre de navigation de lien actifmais dans notre cas, nous utilisons ASP.net et MasterPages...

Le truc, c'est la barre de navigation est définie à la masterpage et lorsque vous cliquez sur un menuitem vous êtes redirigé vers le correspondant de l'enfant page alors, comment voulez-vous faire pour changer la barre de navigation élément actif consecuently, sans les reproduire la logique de chaque page enfant? (De préférence sans les variables de session et javascript uniquement à la page principale)

source d'informationauteur VSP

  1. 18

    Nous l'avons résolu avec la fonction suivante à la Page principale:

     <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>
  2. 3

    Voici ce que j'ai utilisé de Rasoir:

    <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>

    Suffit de définir le nom de la page, aussi bien dans le modèle, puis de faire le test pour chaque li que vous avez.

  3. 3
     <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>
  4. 1

    En supposant que la classe active est correctement définie par ASP.net, je vous recommande une solution plus facile:

    //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');

    À l'aide de ASP.net de routage, cette solution fonctionne parfaitement dans mon projet en cours.

    Et si vous voulez manipuler l'élément actif du menu, je vous recommande d'utiliser le MenuItemDataBound de la commande du menu dans le code-behind de la place. Mais dans mon cas, ce n'était pas nécessaire.

  5. 0

    Solution par "sujit kinage" qui a le mieux fonctionné pour moi, mais j'ai dû changer une ligne:

    var url = window.location.origin + window.location.pathname;