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

Question

J'ai été balayage autour d'essayer de trouver une solution appropriée pour l'attribution de "active/courant de la" classe pour les éléments de menu de la page principale. La ligne est divisé par le milieu en ce qui concerne de savoir si pour ce faire, le client vs côté serveur.

Honnêtement, je suis nouveau sur JavaScript et MVC, donc je n'ai pas une opinion. Je préfère le faire dans le plus "propre" et de la manière la plus appropriée.

J'ai le texte suivant jQuery code pour attribuer le "active" de la classe à l' <li> item...le seul problème est l ' "indice" ou de la vue par défaut de l'élément de menu sera toujours attribuée à la classe active, car l'URL est toujours une sous-chaîne de l'autre les 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
   }
});

Est-il une meilleure façon de le faire, les gars? Quelqu'un aurait au moins m'aider à obtenir le côté client de la version pare-balles? De sorte que l ' "indice" ou le lien par défaut est toujours "actif"? Est-il un moyen de l'attribution d'une fausse extension de la méthode de l'indice? comme au lieu de simplement l'URL de base, il serait localhost/home/dashboard , de sorte qu'il ne soit pas une sous-chaîne de tous les liens?

Honnêtement, je n'ai pas vraiment suivi les méthodes de le faire côté serveur, c'est pourquoi je suis en train de le faire côté client avec jQuery...toute aide serait appréciée.

Answer 1

Un assistant HTML personnalisé fait normalement l'affaire:

 public static MvcHtmlString MenuLink(
    this HtmlHelper htmlHelper, 
    string linkText, 
    string actionName, 
    string controllerName
)
{
    string currentAction = htmlHelper.ViewContext.RouteData.GetRequiredString("action");
    string currentController = htmlHelper.ViewContext.RouteData.GetRequiredString("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:

 <ul>
    <li>@Html.MenuLink("Link 1", "link1", "Home")</li>
    <li>@Html.MenuLink("Link 2", "link2", "Home")</li>
</ul> 
 

Maintenant, tout ce qui reste à faire est de définir la classe CSS .current.

Answer 2

Ajout du support pour les domaines:

 public static class MenuExtensions
{
    public static MvcHtmlString MenuItem(this HtmlHelper htmlHelper, string text, string action, string controller, string area = null)
    {

        var li = new TagBuilder("li");
        var routeData = htmlHelper.ViewContext.RouteData;

        var currentAction = routeData.GetRequiredString("action");
        var currentController = routeData.GetRequiredString("controller");
        var currentArea = routeData.DataTokens["area"] as string;

        if (string.Equals(currentAction, action, StringComparison.OrdinalIgnoreCase) &&
            string.Equals(currentController, controller, StringComparison.OrdinalIgnoreCase) &&
            string.Equals(currentArea, area, StringComparison.OrdinalIgnoreCase))
        {
            li.AddCssClass("active");
        }
        li.InnerHtml = htmlHelper.ActionLink(text, action, controller, new {area}, null).ToHtmlString();
        return MvcHtmlString.Create(li.ToString());
    }
}
 

Answer 3

Voici ma solution de ce problème.

J'ai créé à la suite de la méthode d'extension de HtmlHelpers classe:

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

Ensuite, j'ai mon menublock. Il ressemble à ceci:

<div id="MenuBlock">
    <div class="@Html.SetMenuItemClass("About")">
        <a>@Html.ActionLink("About", "About", "Home")</a></div>
    <img height="31" width="2" class="line" alt="|" src="@Url.Content("~/Content/theme/images/menu_line.gif")"/>
    <div class="@Html.SetMenuItemClass("Prices")">
        <a>@Html.ActionLink("Prices", "Prices", "Home")</a></div>
</div>

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

Answer 4

Grâce à JQuery u peut 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;
}

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

Answer 5

Ce que j'ai l'habitude de faire est d'attribuer une classe à la balise body qui est basé sur le chemin pièces. Donc, si vous faites une Chaîne de caractères.Remplacer sur le chemin de la tour /blogs/posts/1 à la classe="blogs postes 1".

Ensuite, vous pouvez affecter des règles CSS pour gérer cela. Par exemple, si vous avez un élément de menu pour les "blogs", il vous suffit de faire une règle de

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

ou si vous voulez un style en particulier si votre sur un post uniquement vice-si vous êtes sur le blog de la racine de la page

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