pau*_*guy 4 navigation bootstrap-4 asp.net-core-2.0 razor-pages
使用 Bootstrap 4 并需要将活动类添加到导航项以反映当前 Razor 页面(Core 2.0 中的新 razor 页面)。如何找出我所在的页面/控制器,以便将活动类名称添加到正确的位置:
<li><a class="active">...
谢谢。
更新: 我能够在我的页面初始值设定项中使用以下代码解决这个问题:
@{
var _action = this.Url.ActionContext.ActionDescriptor.DisplayName;
var NavDashboard = "/abc";
...
}
Run Code Online (Sandbox Code Playgroud)
然后我可以在每个导航项中添加“活动”类,例如:
<a asp-page="@NavDashboard" class="nav-link@(_action=="@NavDashboard" ? " active" : string.Empty)">Dashboard</a>
Run Code Online (Sandbox Code Playgroud)
冲洗并重复每个导航项目。
我会使用自定义标签助手将活动类添加到元素。
我为 MVC分叉了Ben Cull 的 ActiveRouteTagHelper并为 Razor Pages 修改了它并将其称为ActivePageTagHelper。它的用法与他的类似,如下所示:
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li is-active-page asp-page="/Index"><a asp-page="/Index">Home</a></li>
<li is-active-page asp-page="/About"><a asp-page="/About">About</a></li>
<li is-active-page asp-page="/Contact"><a asp-page="/Contact">Contact</a></li>
</ul>
</div>
Run Code Online (Sandbox Code Playgroud)
归档时间: |
|
查看次数: |
2400 次 |
最近记录: |