Track the current active page, or how to get contr

问题:

I am new in ASP.NET Core. I have a navigation menu and I would like to track the active item. My idea is to use the action and controller names as navigation keys:

the problem is I don't know how to obtain the action and controller name in the _Layout.cshtml view...

I have tried the ViewContext.ActionDescriptor.DisplayName but it renders something like this MyApp.Controllers.RecordsController.Index (MyApp)

I'd rather prefer to obtain something like this:

<script>$("li#@(Controller.Name)-@(Action.Name)")).addClass("active");</script>

回答1:

Use

var controller = ViewContext.RouteData.Values["Controller"];
var action = ViewContext.RouteData.Values["Action"];

<script>
$("li#@(ViewContext.RouteData.Values["Controller"])-@(ViewContext.RouteData.Values["Action"])")).addClass("active");
</script>

PS: Use ToLower() if required

ViewContext.RouteData.Values["Action"].ToString().ToLower();

Also you can activate your menu by style block

<style>
li#@(ViewContext.RouteData.Values["Controller"])-@(ViewContext.RouteData.Values["Action"]) {
//add some style
}
</style>

回答2:

With dot net core 2.0 for razor pages you could use like this

var rv = ViewContext.RouteData.Values;
string page = $"{rv["page"]}".ToLowerInvariant();

On the tags

<li class="@(page == "/index" ?  "active" : "")"><a asp-page="/Index" >Home</a></li>

回答3:

I would like to add something small that has perhaps been overlooked... Just add some embedded code in the layouts page at the top, before the HTML begins...

@{
    var controller = ViewContext.RouteData.Values["Controller"];
    var action = ViewContext.RouteData.Values["Action"];
}

The code is pretty self-explanatory... Then call the variables' values from anywhere within your code just as they are, like the way I did as shown below:

<div class="navbar-wrapper">
<h3>@controller | @action</h3>
</div>

I found this method to be much simpler and hassle-free than aforementioned methods. Cheerio ;)

回答4:

You can achieve this server side if you combine this answer with the following.

Somewhere in your view.

@{
    var rv = ViewContext.RouteData.Values;
    var id = $"{rv["Controller"]}-{rv["Action"]}".ToLowerInvariant();
}

On each <li>.

<li class-conditional-active="@(id == "records-index")">...</li>