élément de menu actif – asp.net mvc3 master page

J’ai essayé de trouver une solution appropriée pour atsortingbuer une classe “active / actuelle” aux éléments de menu de la page maître. La ligne est scindée en deux pour ce qui est de savoir si ce client ou serveur doit être utilisé.

En vérité, je suis nouveau à la fois en JavaScript et en MVC, donc je n’ai pas d’opinion. Je préférerais le faire de la manière la plus propre et la plus appropriée.

J’ai le code jQuery suivant pour atsortingbuer la classe “active” à l’élément

  • … le seul problème est que la classe active est toujours affectée à l’élément de menu “index” ou par défaut, car l’URL est toujours une sous-chaîne des autres liens de menu:

    (default) index = localhost/ link 1 = localhost/home/link1 link 2 = localhost/home/link1 $(function () { var str = location.href.toLowerCase(); $('#nav ul li a').each(function() { if (str.indexOf(this.href.toLowerCase()) > -1) { $(this).parent().attr("class","active"); //hightlight parent tab } }); 

    Y a-t-il une meilleure façon de procéder, les gars? Est-ce que quelqu’un au moins m’aiderait à obtenir la version côté client à l’épreuve des balles? Pour que le “index” ou le lien par défaut soit toujours “actif”? Y a-t-il un moyen d’atsortingbuer une fausse extension à la méthode d’indexation? comme au lieu de l’URL de base, il s’agirait de localhost/home/dashboard afin que ce ne soit pas une sous-chaîne de chaque lien?

    Honnêtement, je ne suis pas vraiment les méthodes de ce côté serveur, c’est pourquoi j’essaie de le faire côté client avec jQuery … toute aide serait appréciée.

      Un assistant HTML personnalisé fait généralement l’affaire:

       public static MvcHtmlSsortingng MenuLink( this HtmlHelper htmlHelper, ssortingng linkText, ssortingng actionName, ssortingng controllerName ) { ssortingng currentAction = htmlHelper.ViewContext.RouteData.GetRequiredSsortingng("action"); ssortingng currentController = htmlHelper.ViewContext.RouteData.GetRequiredSsortingng("controller"); if (actionName == currentAction && controllerName == currentController) { return htmlHelper.ActionLink( linkText, actionName, controllerName, null, new { @class = "current" }); } return htmlHelper.ActionLink(linkText, actionName, controllerName); } 

      et dans votre page maître:

       
      • @Html.MenuLink("Link 1", "link1", "Home")
      • @Html.MenuLink("Link 2", "link2", "Home")

      Il ne rest plus maintenant qu’à définir la classe CSS .current.

    • Ajout du support pour les zones:

       public static class MenuExtensions { public static MvcHtmlSsortingng MenuItem(this HtmlHelper htmlHelper, ssortingng text, ssortingng action, ssortingng controller, ssortingng area = null) { var li = new TagBuilder("li"); var routeData = htmlHelper.ViewContext.RouteData; var currentAction = routeData.GetRequiredSsortingng("action"); var currentController = routeData.GetRequiredSsortingng("controller"); var currentArea = routeData.DataTokens["area"] as ssortingng; if (ssortingng.Equals(currentAction, action, SsortingngComparison.OrdinalIgnoreCase) && ssortingng.Equals(currentController, controller, SsortingngComparison.OrdinalIgnoreCase) && ssortingng.Equals(currentArea, area, SsortingngComparison.OrdinalIgnoreCase)) { li.AddCssClass("active"); } li.InnerHtml = htmlHelper.ActionLink(text, action, controller, new {area}, null).ToHtmlSsortingng(); return MvcHtmlSsortingng.Create(li.ToSsortingng()); } } 

      Voici ma solution de ce problème.

      J’ai créé la méthode d’extension suivante de la classe HtmlHelpers:

       public static class HtmlHelpers { public static ssortingng SetMenuItemClass(this HtmlHelper helper, ssortingng actionName) { if (actionName == helper.ViewContext.RouteData.Values["action"].ToSsortingng()) return "menu_on"; else return "menu_off"; } 

      Ensuite, j’ai mon menublock. Cela ressemble à ceci:

        

      Donc, ma méthode renvoie le nom de la classe à chaque div en fonction de l’action en cours du contrôleur Home. Vous pouvez aller plus loin et append à la méthode un paramètre, qui spécifie le nom du contrôleur pour éviter les problèmes, lorsque vous avez des actions portant le même nom mais de contrôleurs différents.

      Grâce à JQuery, vous pouvez faire comme ceci:

       $(document).ready(function () { highlightActiveMenuItem(); }); highlightActiveMenuItem = function () { var url = window.location.pathname; $('.menu a[href="' + url + '"]').addClass('active_menu_item'); }; .active_menu_item { color: #000 !important; font-weight: bold !important; } 

      Original: http://www.paulund.co.uk/use-jquery-to-highlight-active-menu-item

      Ce que je fais habituellement, c’est assigner une classe à la balise body basée sur les parties du chemin. Donc, si vous faites un Ssortingng.Replace sur le chemin pour transformer / blogs / posts / 1 en class = “blogs posts 1”.

      Ensuite, vous pouvez affecter des règles CSS pour gérer cela. Par exemple, si vous avez un élément de menu pour “blogs”, vous pouvez simplement faire une règle comme

       BODY.blogs li.blogs { /* your style */} 

      ou si vous voulez un style particulier si vous êtes sur un poste uniquement vice si vous êtes sur la page racine du blog

       BODY.blogs.posts li.blogs {/* your style */}