wake-up-neo.com

Hinzufügen einer "aktiven" Klasse zu Html.ActionLink in ASP.NET MVC

Ich versuche, meiner Bootstrap-Navbar in MVC eine "aktive" Klasse hinzuzufügen, aber die folgende Klasse zeigt die aktive Klasse nicht, wenn sie wie folgt geschrieben wird:

<ul class="nav navbar-nav">
  <li>@Html.ActionLink("Home", "Index", "Home", null, new {@class="active"})</li>
  <li>@Html.ActionLink("About", "About", "Home")</li>
  <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
</ul>

Dies löst auf, was wie eine korrekt formatierte Klasse aussieht, funktioniert aber nicht:

<a class="active" href="/">Home</a>

In der Bootstrap-Dokumentation heißt es, dass 'a'-Tags nicht in der Navbar verwendet werden sollten. Ich glaube jedoch, dass dies der richtige Weg ist, eine Klasse zu einem Html.ActionLink hinzuzufügen. Gibt es eine andere (ordentliche) Möglichkeit, dies zu tun? 

107
Gillespie

In Bootstrap muss die active-Klasse auf das <li>-Element und nicht auf den <a> angewendet werden. Das erste Beispiel finden Sie hier: http://getbootstrap.com/components/#navbar

Die Art und Weise, wie Sie mit Ihrem UI-Stil auf der Grundlage dessen arbeiten, was aktiv ist oder nicht, hat nichts mit dem ActionLink-Helfer von ASP.NET MVC zu tun. Dies ist die richtige Lösung, um zu verfolgen, wie das Bootstrap-Framework erstellt wurde.

<ul class="nav navbar-nav">
    <li class="active">@Html.ActionLink("Home", "Index", "Home")</li>
    <li>@Html.ActionLink("About", "About", "Home")</li>
    <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
</ul>

Bearbeiten:

Da Sie Ihr Menü wahrscheinlich auf mehreren Seiten wiederverwenden werden, ist es sinnvoll, diese ausgewählte Klasse automatisch basierend auf der aktuellen Seite anzuwenden, anstatt das Menü mehrmals zu kopieren und manuell auszuführen. 

Am einfachsten verwenden Sie einfach die in ViewContext.RouteData enthaltenen Werte, nämlich die Variablen Action und Controller. Wir könnten auf dem aufbauen, was Sie derzeit mit etwas wie dem haben:

<ul class="nav navbar-nav">
    <li class="@(ViewContext.RouteData.Values["Action"].ToString() == "Index" ? "active" : "")">@Html.ActionLink("Home", "Index", "Home")</li>
    <li class="@(ViewContext.RouteData.Values["Action"].ToString() == "About" ? "active" : "")">@Html.ActionLink("About", "About", "Home")</li>
    <li class="@(ViewContext.RouteData.Values["Action"].ToString() == "Contact" ? "active" : "")">@Html.ActionLink("Contact", "Contact", "Home")</li>
</ul>

Im Code ist das nicht schön, aber es erledigt die Arbeit und erlaubt es Ihnen, Ihr Menü in eine Teilansicht zu extrahieren, wenn Sie möchten. Es gibt Wege, dies auf viel sauberere Weise zu tun, aber da Sie gerade erst anfangen, belasse ich es dabei. Viel Glück beim Lernen von ASP.NET MVC!


Späte Bearbeitung:

Diese Frage scheint ein wenig Verkehr zu sein, also dachte ich, ich würde eine elegantere Lösung mit einer HtmlHelper-Erweiterung einsetzen.

Edit 24.03.2015: Diese Methode musste neu geschrieben werden, um mehrere Aktionen und Controller zuzulassen, die das ausgewählte Verhalten auslösen, sowie die Behandlung, wenn die Methode aus einer untergeordneten Aktionsteilansicht aufgerufen wird.

public static string IsSelected(this HtmlHelper html, string controllers = "", string actions = "", string cssClass = "selected")
{
    ViewContext viewContext = html.ViewContext;
    bool isChildAction = viewContext.Controller.ControllerContext.IsChildAction;

    if (isChildAction)
        viewContext = html.ViewContext.ParentActionViewContext;

    RouteValueDictionary routeValues = viewContext.RouteData.Values;
    string currentAction = routeValues["action"].ToString();
    string currentController = routeValues["controller"].ToString();

    if (String.IsNullOrEmpty(actions))
        actions = currentAction;

    if (String.IsNullOrEmpty(controllers))
        controllers = currentController;

    string[] acceptedActions = actions.Trim().Split(',').Distinct().ToArray();
    string[] acceptedControllers = controllers.Trim().Split(',').Distinct().ToArray();

    return acceptedActions.Contains(currentAction) && acceptedControllers.Contains(currentController) ?
        cssClass : String.Empty;
}

Arbeitet mit .NET Core:

public static string IsSelected(this IHtmlHelper htmlHelper, string controllers, string actions, string cssClass = "selected")
{
    string currentAction = htmlHelper.ViewContext.RouteData.Values["action"] as string;
    string currentController = htmlHelper.ViewContext.RouteData.Values["controller"] as string;

    IEnumerable<string> acceptedActions = (actions ?? currentAction).Split(',');
    IEnumerable<string> acceptedControllers = (controllers ?? currentController).Split(',');

    return acceptedActions.Contains(currentAction) && acceptedControllers.Contains(currentController) ?
        cssClass : String.Empty;
}

Verwendungsbeispiel:

<ul>
    <li class="@Html.IsSelected(actions: "Home", controllers: "Default")">
        <a href="@Url.Action("Home", "Default")">Home</a>
    </li>
    <li class="@Html.IsSelected(actions: "List,Detail", controllers: "Default")">
        <a href="@Url.Action("List", "Default")">List</a>
    </li>
</ul>
256
dom

Erweiterung:

public static MvcHtmlString LiActionLink(this HtmlHelper html, string text, string action, string controller)
{
    var context = html.ViewContext;
    if (context.Controller.ControllerContext.IsChildAction)
        context = html.ViewContext.ParentActionViewContext;
    var routeValues = context.RouteData.Values;
    var currentAction = routeValues["action"].ToString();
    var currentController = routeValues["controller"].ToString();

    var str = String.Format("<li role=\"presentation\"{0}>{1}</li>",
        currentAction.Equals(action, StringComparison.InvariantCulture) &&
        currentController.Equals(controller, StringComparison.InvariantCulture) ?
        " class=\"active\"" :
        String.Empty, html.ActionLink(text, action, controller).ToHtmlString()
    );
    return new MvcHtmlString(str);
}

Verwendungszweck:

<ul class="nav navbar-nav">
    @Html.LiActionLink("About", "About", "Home")
    @Html.LiActionLink("Contact", "Contact", "Home")
</ul>
28
Prof

Ich habe dies durch Hinzufügen eines View-Bag-Parameters in asp.net mvc geändert. Hier habe ich was gemacht

ViewBag.Current = "Scheduler";-ähnlicher Parameter auf jeder Seite hinzugefügt

In der Layoutseite

<ul class="nav navbar-nav">
     <li class="@(ViewBag.Current == "Scheduler" ? "active" : "") "><a href="@Url.Action("Index","Scheduler")" target="_self">Scheduler</a></li>
 </ul>

Das hat mein Problem gelöst.

18
Damith

Kann etwas spät sein Aber hoffe das hilft.

public static class Utilities
{
    public static string IsActive(this HtmlHelper html, 
                                  string control,
                                  string action)
    {
        var routeData = html.ViewContext.RouteData;

        var routeAction = (string)routeData.Values["action"];
        var routeControl = (string)routeData.Values["controller"];

        // both must match
        var returnActive = control == routeControl &&
                           action == routeAction;

        return returnActive ? "active" : "";
    }
}

Und Verwendung wie folgt:

<div class="navbar-collapse collapse">
    <ul class="nav navbar-nav">
        <li class='@Html.IsActive("Home", "Index")'>
            @Html.ActionLink("Home", "Index", "Home")
        </li>
        <li class='@Html.IsActive("Home", "About")'>
            @Html.ActionLink("About", "About", "Home")
        </li>
        <li class='@Html.IsActive("Home", "Contact")'>
            @Html.ActionLink("Contact", "Contact", "Home")
        </li>
    </ul>
</div>

Bekannte Referenz von http://www.codingeverything.com/2014/05/mvcbootstrapactivenavbar.html

11

Ich weiß, dass diese Frage alt ist, aber ich möchte hier einfach meine Stimme hinzufügen. Ich halte es für eine gute Idee, das Wissen darüber, ob eine Verknüpfung aktiv ist, dem Controller der Ansicht zu überlassen. 

Ich würde einfach einen eindeutigen Wert für jede Ansicht in der Controller-Aktion festlegen. Wenn ich beispielsweise den Link zur Startseite aktivieren wollte, würde ich Folgendes tun:

public ActionResult Index()
{            
    ViewBag.Title = "Home";
    ViewBag.Home = "class = active";
    return View();
}

Dann werde ich meiner Meinung nach so etwas schreiben:

<li @ViewBag.Home>@Html.ActionLink("Home", "Index", "Home", null, new { title = "Go home" })</li>

Wenn Sie zu einer anderen Seite navigieren, sagen Sie "Programme", "ViewBag.Home" ist nicht vorhanden (stattdessen "ViewBag.Programs"). Daher wird nichts gerendert, auch nicht class = "". Ich denke, das ist sowohl für die Wartbarkeit als auch für die Sauberkeit sauberer. Ich neige dazu, die Logik immer so weit wie möglich aus der Sicht zu lassen.

6
mapussah

Sie können dies versuchen: .__ In meinem Fall lade ich das Menü aus der Datenbank basierend auf dem rollenbasierten Zugriff. Schreiben Sie den Code in jede Ansicht, in dem Sie das Menü aktivieren möchten. 

<script type="text/javascript">
        $(document).ready(function () {         
            $('li.active active-menu').removeClass('active active-menu');
            $('a[href="/MgtCustomer/Index"]').closest('li').addClass('active active-menu');
        });
</script>
3
atik sarker

Diese Lösung ist für Asp.net MCV 5 einfach.

  1. Erstellen Sie eine statische Klasse, zum Beispiel Utilitarios.cs.

  2. Erstellen Sie in der Klasse eine statische Methode:

    public static string IsLinkActive(this UrlHelper url, string action, string controller)
    {
        if (url.RequestContext.RouteData.Values["controller"].ToString() == controller &&
            url.RequestContext.RouteData.Values["action"].ToString() == action)
        {
            return "active";
        }
    
        return "";
    }
    
  3. so anrufen

    <ul class="sidebar-menu" data-widget="tree">
        <li class="header">HEADER</li>
        <li class="@Url.IsLinkActive("Index", "Home")">
            <a href="@Url.Action("Index", "Home")"><i class="fa fa-link"></i> <span>Home</span></a>
        </li>
        <li class="@Url.IsLinkActive("About", "Home")">
            <a href="@Url.Action("About", "Home")"><i class="fa fa-link"></i><span>About</span></a>
        </li>
    </ul>
    

ist mit einer Lambda-Funktion möglich

@{
string controllerAction = ViewContext.RouteData.Values["Controller"].ToString() + ViewContext.RouteData.Values["Action"].ToString();
    Func<string, string> IsSelected= x => x==controllerAction ? "active" : "";
}

dann nutzung

 @Html.ActionLink("Inicio", "Index", "Home", new { area = "" }, new { @class = IsSelected("HomeIndex")})
2
henoc salinas

Fügen Sie ".ToString" hinzu, um den Vergleich in ASP.NET MVC zu verbessern

<ul class="nav navbar-nav">
<li class="@(ViewContext.RouteData.Values["Action"].ToString() == "Index" ? "active" : "")">@Html.ActionLink("Home", "Index", "Home")</li>
<li class="@(ViewContext.RouteData.Values["Action"].ToString() == "About" ? "active" : "")">@Html.ActionLink("About", "About", "Home")</li>
<li class="@(ViewContext.RouteData.Values["Action"].ToString() == "Contact" ? "active" : "")">@Html.ActionLink("Contact", "Contact", "Home")</li>

-

2
migovilo

Wir können auch UrlHelper aus RequestContext erstellen, die wir von MvcHandler selbst erhalten. Daher glaube ich, dass jemand, der diese Logik in Razor-Vorlagen beibehalten möchte, folgendermaßen hilfreich wäre:

  1. Erstellen Sie im Projektstamm einen Ordner mit dem Namen AppCode
  2. Erstellen Sie dort eine Datei mit dem Namen HtmlHelpers.cshtml
  3. Erstellen Sie dort einen Helfer:

    @helper MenuItem(string action, string controller)
    {
         var mvcHandler = Context.CurrentHandler as MvcHandler;
         if (mvcHandler != null)
         {
             var url = new UrlHelper(mvcHandler.RequestContext);
             var routeData = mvcHandler.RequestContext.RouteData;
             var currentAction = routeData.Values["action"].ToString();
             var currentController = routeData.Values["controller"].ToString();
             var isCurrent = string.Equals(currentAction, action, StringComparison.InvariantCultureIgnoreCase) &&
                             string.Equals(currentController, controller, StringComparison.InvariantCultureIgnoreCase);
    
            <div class="@(isCurrent ? "active" : "")">
                <div>@url.Action(action, controller)</div>
            </div>
         }   
    }
    
  4. Dann können wir unsere Ansichten so verwenden:

    @HtmlHelpers.MenuItem("Default", "Home")
    

Hoffe, dass es jemandem hilft.

1
Oleksii Aza

In Anbetracht dessen, was Damith gepostet hat, denke ich, Sie könnten sich nur durch den Viewbag.Title als aktiv qualifizieren (beste Praxis ist es, dies auf Ihren Inhaltsseiten auszufüllen, damit Ihre _Layout.cshtml-Seite Ihre Linkbar enthält). Wenn Sie Untermenüelemente verwenden, funktioniert dies ebenfalls einwandfrei:

<li class="has-sub @(ViewBag.Title == "Dashboard 1" || ViewBag.Title == "Dashboard 2" ? "active" : "" )">
    <a href="javascript:;">
        <b class="caret"></b>
        <i class="fa fa-th-large"></i>
        <span>Dashboard</span>
    </a>
    <ul class="sub-menu">
        <li class="@(ViewBag.Title == "Dashboard 1" ? "active" : "")"><a href="index.html">Dashboard v1</a></li>
        <li class="@(ViewBag.Title == "Dashboard 2" ? "active" : "")"><a href="index_v2.html">Dashboard v2</a></li>
    </ul>
</li>
1
Rafe Smith

Ich war auch auf der Suche nach einer Lösung und jQuery hat mir sehr geholfen. Zuerst müssen Sie Ihren <li>-Elementen 'IDs' geben. 

<li id="listguides"><a href='/Guides/List'>List Guides</a></li>

Nachdem Sie dies auf Ihrer Layoutseite getan haben, können Sie jQuery mitteilen, welches <li>-Element in Ihrer Ansicht ausgewählt werden soll.

@section Scripts{
    <script type="text/javascript">
        $('#listguides').addClass('selected');
    </script>
}

Hinweis: Sie müssen @RenderSection("scripts", required: false) auf Ihrer Layoutseite vor dem </body>-Tag haben, um diesen Abschnitt hinzufügen zu können.

1
Doğa Gençer

Ich habe doms"nicht hübsch" Antwort geändert und es hässlicher gemacht. Manchmal haben zwei Controller die widersprüchlichen Aktionsnamen (d. H. Index), daher mache ich Folgendes:

<ul class="nav navbar-nav">
  <li class="@(ViewContext.RouteData.Values["Controller"].ToString() + ViewContext.RouteData.Values["Action"].ToString() == "HomeIndex" ? "active" : "")">@Html.ActionLink("Home", "Index", "Home")</li>
  <li class="@(ViewContext.RouteData.Values["Controller"].ToString() + ViewContext.RouteData.Values["Action"].ToString() == "AboutIndex" ? "active" : "")">@Html.ActionLink("About", "Index", "About")</li>
  <li class="@(ViewContext.RouteData.Values["Controller"].ToString() + ViewContext.RouteData.Values["Action"].ToString() == "ContactHome" ? "active" : "")">@Html.ActionLink("Contact", "Contact", "Home")</li>
</ul>
1
DeveloperDan

die antwort von @dombenoit funktioniert. Es führt zwar Code ein, der beibehalten werden muss. Überprüfen Sie diese Syntax:

using (var nav = Html.Bootstrap().Begin(new Nav().Style(NavType.NavBar).SetLinksActiveByControllerAndAction()))
{
    @nav.ActionLink("Link 1", "action1")
    @nav.ActionLink("Link 2", "action2")
    @nav.Link("External Link", "#")
}

Beachten Sie die Verwendung der .SetLinksActiveByControllerAndAction()-Methode.

Wenn Sie sich fragen, was diese Syntax möglich macht, lesen Sie TwitterBootstrapMVC

1
Dmitry

Ich erkannte, dass dieses Problem für einige von uns ein häufiges Problem war, und veröffentlichte meine eigene Lösung mit Nuget-Paket. Unten sehen Sie, wie es funktioniert. Ich hoffe das wird nützlich sein.

Hinweis: Dieses Nuget-Paket ist mein erstes Paket. Wenn Sie also einen Fehler sehen, geben Sie uns bitte Rückmeldung. Vielen Dank.

  1. Installieren Sie das Paket oder laden Sie den Quellcode herunter und fügen Sie Ihr Projekt hinzu

    -Install-Package Betalgo.MvcMenuNavigator
    
  2. Fügen Sie Ihre Seiten einer Aufzählung hinzu

    public enum HeaderTop
    {
        Dashboard,
        Product
    }
    public enum HeaderSub
    {
        Index
    }
    
  3. Setzen Sie den Filter oben auf Ihren Controller oder Action

    [MenuNavigator(HeaderTop.Product, HeaderSub.Index)]
    public class ProductsController : Controller
    {
        public async Task<ActionResult> Index()
        {
            return View();
        }
    
        [MenuNavigator(HeaderTop.Dashboard, HeaderSub.Index)]
        public async Task<ActionResult> Dashboard()
        {
            return View();
        }
    }
    
  4. Und verwenden Sie es in Ihrem Header-Layout so 

    @{
    var headerTop = (HeaderTop?)MenuNavigatorPageDataNavigatorPageData.HeaderTop;
    var headerSub = (HeaderSub?)MenuNavigatorPageDataNavigatorPageData.HeaderSub;
    }
    <div class="nav-collapse collapse navbar-collapse navbar-responsive-collapse">
    <ul class="nav navbar-nav">
        <li class="@(headerTop==HeaderTop.Dashboard?"active selected open":"")">
            <a href="@Url.Action("Index","Home")">Dashboard</a>
        </li>
        <li class="@(headerTop==HeaderTop.Product?"active selected open":"")">
            <a href="@Url.Action("Index", "Products")">Products</a>
        </li>
    </ul>
    

Weitere Informationen: https://github.com/betalgo/MvcMenuNavigator

1
Tolga Kayhan

Ich glaube, hier ist ein sauberer und kleinerer Code, um das ausgewählte Menü "aktiv" zu machen:

 <ul class="navbar-nav mr-auto">
                <li class="nav-item @Html.IfSelected("Index")">
                    <a class="nav-link" href="@Url.Action("Index", "Home")">Home</a>
                </li>
                <li class="nav-item @Html.IfSelected("Controls")">
                    <a class="nav-link" href="@Url.Action("Controls", "Home")">MVC Controls</a>
                </li>
                <li class="nav-item @Html.IfSelected("About")">
                    <a class="nav-link" href="@Url.Action("About", "Home")">About</a>
                </li>
</ul>

 public static string IfSelected(this HtmlHelper html, string action)
        {
            return html
                       .ViewContext
                       .RouteData
                       .Values["action"]
                       .ToString() == action
                            ? " active"
                            : "";
        }

Ich tat dies:

Hilfsprogramm in der Menü-Teilansicht erstellt

 @helper RouterLink(string action, string controller)
{
    var IsActive = ViewContext.RouteData.Values["Controller"].ToString() == controller && ViewContext.RouteData.Values["Action"].ToString() == action;
    <text>href="@Url.Action(action, controller)"</text>if (IsActive){ <text>class="active"</text>}
}

Wird dann im Anchor-Tag wie folgt verwendet:

<li><a @RouterLink("Index","Home")>Home</a></li>

Meine Anwendung hatte keine Bereiche, kann aber auch als weitere Variable in die Hilfsfunktion aufgenommen werden. Und ich hatte den Pass der aktiven Klasse zum Anker-Tag in meiner Sicht. Aber li kann auch so konfiguriert werden.

0
Anup Sharma

Ich habe eine Erweiterung von HtmlHelper erstellt, die eine ActiveActionLink-Methode für diejenigen von Ihnen hinzufügt, die die "aktive" Klasse zum Link selbst hinzufügen möchten, anstatt den den Link umgebenden <li>.


public static class LinkExtensions
{
    public static MvcHtmlString ActiveActionLink(this HtmlHelper html, string linkText, string actionName, string controllerName, object routeValues, object htmlAttributes)
    {
        return ActiveActionLink(html, linkText, actionName, controllerName, new RouteValueDictionary(routeValues), HtmlHelper.AnonymousObjectToHtmlAttributes(htmlAttributes));
    }

    public static MvcHtmlString ActiveActionLink(this HtmlHelper html, string linkText, string actionName, string controllerName, RouteValueDictionary routeValues, IDictionary<string, object> htmlAttributes)
    {
        const string activeClassName = "active";

        var routeData = html.ViewContext.RouteData;

        var routeAction = (string)routeData.Values["action"];
        var routeController = (string)routeData.Values["controller"];

        var active = controllerName.Equals(routeController) && actionName.Equals(routeAction);

        if (active)
        {
            var @class = (string)htmlAttributes["class"];

            htmlAttributes["class"] = string.IsNullOrEmpty(@class)
                ? activeClassName
                : @class + " active";
        }

        var link = html.ActionLink(linkText, actionName, controllerName, routeValues, htmlAttributes);

        return link;
    }
}

Die Verwendung ist wie folgt:

@Html.ActiveActionLink("Home", "Index", "Home", new { area = "" }, new { @class = "nav-item nav-link" })
0
crush

Hoffe das hilft, unten ist, wie dein Menü sein kann:

 <ul class="nav navbar-nav">
   <li><a href="@Url.Action("Index", "Home")" class="@IsMenuSelected("Index","Home", "active")">Home</a></li>
   <li><a href="@Url.Action("About", "Home")" class="@IsMenuSelected("About", "Home", "active")">About</a></li>
   <li><a href="@Url.Action("Contact", "Home")" class="@IsMenuSelected("Contact", "Home", "active")">Contact</a></li>
 </ul>

Fügen Sie unterhalb der MVC-Hilfefunktion unterhalb des HTML-Tags hinzu. 

 @helper IsMenuSelected(string actionName, string controllerName, string className)
    {
            var conname = ViewContext.RouteData.Values["controller"].ToString().ToLower();
            var actname = ViewContext.RouteData.Values["action"].ToString().ToLower();

            if (conname == controllerName.ToLower() && actname == actionName.ToLower())
        {
            @className;
        }
    }

Ich habe die Antwort von http://questionbox.in/add-active-class-menu-link-html-actionlink-asp-net-mvc/ verwiesen.

0
Ganesh Todkar

Ich möchte diese Lösung vorschlagen, die auf dem ersten Teil der Antwort von Dom basiert.

Wir definieren zuerst zwei Variablen, "action" und "controller", und verwenden sie, um die aktive Verbindung zu bestimmen:

{ string controller = ViewContext.RouteData.Values["Controller"].ToString();
string action = ViewContext.RouteData.Values["Action"].ToString();}

Und dann:

<ul class="nav navbar-nav">
    <li class="@((controller == "Home" && action == "Index") ? "active" : "")">@Html.ActionLink("Home", "Index", "Home")</li>
    <li class="@((controller == "Home" && action == "About") ? "active" : "")">@Html.ActionLink("About", "About", "Home")</li>
    <li class="@((controller == "Home" && action == "Contact") ? "active" : "")">@Html.ActionLink("Contact", "Contact", "Home")</li>
</ul>

Jetzt sieht es schöner aus und es sind keine komplexeren Lösungen erforderlich.

0
Osama Alsadi

wenn es überhaupt nicht angezeigt wird, müssen Sie zwei @ -Zeichen verwenden:

@@class

ABER ich glaube, Sie müssen möglicherweise die aktive Klasse im "li" -Tag haben, nicht im "a" -Tag. entsprechend zu Bootstrap-Dokumenten ( http://getbootstrap.com/components/#navbar-default ):

<ul class="nav navbar-nav">
  <li class="active"><a href="#">Home</a></li>
  <li><a href="#">Profile</a></li>
  <li><a href="#">Messages</a></li>
</ul>

daher wird Ihr Code sein:

<ul class="nav navbar-nav">
  <li class="active">@Html.ActionLink("Home", "Index", "Home", null)</li>
  <li>@Html.ActionLink("About", "About", "Home")</li>
  <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
</ul>
0
JC Lizard

Meine Lösung für dieses Problem ist 

<li class="@(Context.Request.Path.Value.ToLower().Contains("about") ? "active " : "" ) nav-item">
                <a class="nav-link" asp-area="" asp-controller="Home" asp-action="About">About</a>
            </li>

Eine bessere Möglichkeit ist das Hinzufügen einer HTML-Erweiterungsmethode, um den aktuellen Pfad zurückzugeben, der mit der Verknüpfung verglichen werden soll

0
Mudasar Rauf

Ich habe oben eine Kombination von Antworten gemacht und meine Lösung gefunden. 

So.. 

Zuerst erstellen Sie im Rasiererblock eine Stringvariable, die den Namenswert des Controllers und die Aktion enthält, die vom Benutzer aufgerufen wird. 

    @{
        string controllerAction =  ViewContext.RouteData.Values["Controller"].ToString() + ViewContext.RouteData.Values["Action"].ToString(); 
    }

Verwenden Sie dann eine Kombination aus HTML- und Razor-Code: 

    <ul class="nav navbar-nav">
        <li class="@(controllerAction == "HomeIndex" ? "active" : "" )">@Html.ActionLink("Home", "Index", "Home")</li>
        <li class="@(controllerAction == "AboutIndex" ? "active" : "" )">@Html.ActionLink("About", "Index", "About")</li>
        <li class="@(controllerAction == "HomeContact" ? "active" : "" )">@Html.ActionLink("Contact", "Contact", "Home")</li>
    </ul>

Ich denke, das ist gut, weil Sie nicht jedes Mal auf "ViewContext.RouteData.Values" zugreifen müssen, um Controller-Namen und Aktionsnamen zu erhalten. 

0
Nihad Delic