ASP.NET MVC - Aktuelle Seite, die Hervorhebung in der navigation

Frage ich mich, wie ist es möglich, fügen Sie eine CSS-Klasse für die aktuelle Seite in der navigation bei der Verwendung von ASP.NET MVC-3? Hier ist meine navigation in meiner _Layout.cshtml-Datei:

<p>@Html.ActionLink("Product Search", "Index", new { controller = "Home" }, new { @class = "current" })
                | @Html.ActionLink("Orders", "Index", new { controller = "Orders" }) 
                | @Html.ActionLink("My Account", "MyAccount", new { controller = "Account" })
                | @Html.ActionLink("Logout", "LogOff", new { controller = "Account" })</p>

Wie Sie sehen können, habe ich 4 links in meiner navigation mit der ersten mit der CSS-Klasse "current" angewendet, ich möchte in der Lage sein, um hinzuzufügen/entfernen Sie diese Klasse, um die verschiedenen links in meiner navigation je nachdem, auf welcher Seite sich der user befindet. Ist das möglich?

Cheers

InformationsquelleAutor CallumVass | 2012-02-15

  1. 14

    Ich würde empfehlen, mit einer Erweiterung Methode für diese. So etwas wie:

    public static HtmlString NavigationLink(
    this HtmlHelper html,
    string linkText,
    string actionName,
    string controllerName)
{
    string contextAction = (string)html.ViewContext.RouteData.Values["action"];
    string contextController = (string)html.ViewContext.RouteData.Values["controller"];

    bool isCurrent =
        string.Equals(contextAction, actionName, StringComparison.CurrentCultureIgnoreCase) &&
        string.Equals(contextController, controllerName, StringComparison.CurrentCultureIgnoreCase);

    return html.ActionLink(
        linkText,
        actionName,
        controllerName,
        routeValues: null,
        htmlAttributes: isCurrent ? new { @class = "current" } : null);
}

    Dann können Sie es in Ihre Ansicht, indem Sie den namespace der extension und nur den Aufruf Ihrer Methode:

    @using MyExtensionNamespace;

...

  @Html.NavigationLink("Product Search", "Index", "Home")
| @Html.NavigationLink("Orders", "Index", "Orders") 
| @Html.NavigationLink("My Account", "MyAccount", "Account")
| @Html.NavigationLink("Logout", "LogOff", "Account")

    Dies hat den Vorteil, halten Sie Ihre Rasiermesser ein wenig sauberer und leicht wiederverwendbar in anderen Ansichten.

    Vielen Dank, markiert als Antwort, wie ich fühle dies ist der beste Weg, es zu tun, sauberer razor-Ansichten und code-Wiederverwendbarkeit
    Für die Erweiterung HtmlHelper.ActionLink() hinzufügen der Namensraum für die LinkExtensions wie diese: using System.Web.Mvc.Html;

    InformationsquelleAutor bingles

  2. 25

    Können Sie dies tun,

    @{ 
   var currentController = ViewContext.RouteData.Values["controller"] as string ?? "Home";
   var currentAction = ViewContext.RouteData.Values["action"] as string ?? "Index";
   var currentPage = (currentController + "-" + currentAction ).ToLower();
}

@Html.ActionLink("Product Search", "Index", "Home", null,
                 new { @class = currentPage == "home-index" ? "current" : "" })
@Html.ActionLink("MyAccount", "MyAccount", "Account", null,
                  new { @class = currentPage == "account-myaccount" ? "current" : "" })
    Danke! Dies funktioniert
    Gerne helfen! Habt einen schönen Tag!
    Nicht Sie fehlt eine } vor der letzten ) ?

    InformationsquelleAutor dknaack

  3. 8
    @{
   var controller = ViewContext.RouteData.Values["controller"].ToString();
   var action = ViewContext.RouteData.Values["action"].ToString();
   var isActiveController = new Func<string, string, string, string, string>((ctrl, act, activeStyle, inactiveStyle) => controller == ctrl && action == act ? activeStyle : inactiveStyle);
 }

    Dann in Ihrem class-Attribut in HTML, die Sie tun können: 

    class="@isActiveController("controlername","action","activecssstyleclass","inactiveccsstyle")"

    Nur eine andere Art und Weise von @dknaack seine Antwort.. bisschen mehr Generika und weniger Funktionalität zu wiederholen, in Ihrem code.

    InformationsquelleAutor KyorCode

  4. 4

    In meinem Fall,angenommen ich habe eine Startseite und ein Menü.

    Hinzufügen ViewBag.Active als Platzhalter in der Home-Seite wie diese:

    @{
   ViewBag.Title = "Home";
   ViewBag.Active = "Home";
}

    Dann legen Sie es auf Ihre li Klasse als Bedingung, um diesen zu aktivieren oder nicht:

     <li class="@(ViewBag.Active=="Home"? "active" : "")">
      <a href="@Url.Action("Index", "Home")"><span>@ViewBag.Title</span></a>
 </li>
    Ich mag diese Antwort. Einfach einfach und sehr praktisch.
    Dies funktioniert sehr gut mit Bootstrap-4 nav-setup, wo die li hat ein "active" CSS-Klasse " sowie "nav-item"

    InformationsquelleAutor Fereydoon Barikzehy

  5. 2

    Ich dieses tutorial verwendet, um dies getan, es ist viel einfacher zu verstehen und dauert 2 Minuten
    Hightlight Aktiven Menüpunkt

    der Nachteil dieses Ansatzes ist, dass Sie zu tun haben ViewBag.CurrentPage in jeder controller-Aktionen..

    InformationsquelleAutor CSharper

Schreibe einen Kommentar