aktiver menüpunkt - asp.net mvc3 master page

Question

Ich habe herumgesucht und versucht, eine geeignete Lösung für die Zuweisung der Klasse "aktiv/aktuell" zu Menüpunkten von der Masterseite aus zu finden. Die Linie ist in der Mitte in Bezug auf ob diese Client vs Server-Seite zu tun gespalten.

Ehrlich gesagt bin ich neu in JavaScript und MVC, so dass ich nicht eine Meinung haben. Ich würde es vorziehen, dies in der "saubersten" und am besten geeigneten Weg zu tun.

Ich habe den folgenden jQuery-Code, um die "aktive" Klasse zum <li> Element zuzuweisen ... das einzige Problem ist der "Index" oder Standardansicht Menüelement wird immer die aktive Klasse zugewiesen werden, weil die URL immer eine Teilzeichenkette der anderen Menü-Links ist:

(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
   }
});

Gibt es einen besseren Weg, dies zu tun, Leute? Könnte mir jemand helfen, zumindest die clientseitige Version kugelsicher zu machen? So dass der "Index" oder der Standardlink immer "aktiv" ist? Gibt es eine Möglichkeit, der index-Methode eine gefälschte Erweiterung zuzuweisen? z.B. statt der Basis-URL wäre es localhost/home/dashboard damit es nicht eine Teilzeichenkette für jeden Link ist?

Ehrlich gesagt, ich nicht wirklich folgen die Methoden zu tun, diese Server-Seite, weshalb ich versuche, es Client-Seite mit jQuery zu tun ... jede Hilfe wäre geschätzt.

Answer 1

Eine benutzerdefinierte HTML-Hilfsfunktion erfüllt diese Aufgabe in der Regel problemlos:

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);
}

und in Ihrer Masterseite:

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

Jetzt muss nur noch die CSS-Klasse .current definiert werden.

Answer 2

Unterstützung für Bereiche hinzugefügt:

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

Hier ist meine Lösung für dieses Problem.

Ich habe folgende Erweiterungsmethode der Klasse HtmlHelpers erstellt:

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";
    }

Dann habe ich meinen Menublock. Er sieht so aus:

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

Also meine Methode gibt Klassenname zu jedem div nach aktuellen Aktion der Home-Controller. Sie können tiefer gehen und der Methode einen Parameter hinzufügen, der den Namen des Controllers angibt, um Probleme zu vermeiden, wenn Sie Aktionen mit demselben Namen, aber von verschiedenen Controllern haben.

Answer 4

Durch JQuery u kann wie folgt tun:

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

Answer 5

Normalerweise weise ich dem Body-Tag eine Klasse zu, die auf den Pfadteilen basiert. Wenn Sie also z. B. eine String.Replace auf den Pfad anwenden, um /blogs/posts/1 in class="blogs posts 1" zu verwandeln.

Dann können Sie CSS-Regeln zuweisen, um dies zu behandeln. Wenn Sie zum Beispiel einen Menüpunkt für "Blogs" haben, können Sie einfach eine Regel wie

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

oder wenn Sie einen bestimmten Stil wollen, wenn Sie auf einem Beitrag nur Laster, wenn Sie auf dem Blog Root Seite sind

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