javascript - ASP.NET Core 使用 ViewComponent 跟踪侧边栏的活动页面
问题描述
这是我的侧边栏视图组件的默认视图
<li class="nav-header text-center pb-1 text-white"><strong>Menu de Navegação</strong></li>
@foreach (var item in Model.Items)
{
<li class="nav-item has-treeview">
<a href="@item.Url" class="nav-link custom-sidebar-link">
@Html.Raw(@item.Icon)
<p class="text-white">
@item.Nome
@if (item.SubItems != null)
{
<i class="fas fa-angle-left right"></i>
}
</p>
</a>
@if (item.SubItems != null)
{
<ul class="nav nav-treeview">
@foreach (var subItem in item.SubItems)
{
<li class="nav-item">
<a href="@subItem.Url" class="nav-link">
@Html.Raw(@subItem.Icon)
<p>
@subItem.Nome
</p>
</a>
</li>
}
</ul>
}
</li>
}
</ul>
</nav>
这是cs文件
public class SidebarAdminViewComponent : ViewComponent
{
public IViewComponentResult Invoke()
{
var claims = Request.HttpContext.User.Claims;
var role = claims.FirstOrDefault(c => c.Type == ClaimTypes.Role)?.Value; ;
var Sidebar = new SidebarViewModel();
Sidebar.Items = new List<SidebarItemViewModel>();
Sidebar.Items.Add(new SidebarItemViewModel
{
Nome = "Home",
Icon = "<i class='nav-icon fas fa-house'></i>",
Url = Url.Page("/Account/Home/Index")
});
Sidebar.Items.Add(sidebarItem);
return View(Sidebar);
}
}
如您所见,我的代码中没有任何内容可以设置活动类。那是因为我现在用javascript处理了这个
$(function () {
var url = window.location;
// Adds active on inner anchor and treeview anchor and treeview menu-open state to li
$('ul.nav a').filter(function () {
return this.href == url;
}).addClass('active').parent().parent().siblings().addClass('active').parent().addClass('menu-open');
});
我希望能够仅使用 C# 来做到这一点,但我不知道如何检测用户所在的当前页面。
解决方案
您要做的是从视图中获取当前页面名称并在您拥有的循环内添加一个比较(全部在视图内)
<li class="nav-header text-center pb-1 text-white"><strong>Menu de Navegação</strong></li>
@foreach (var item in Model.Items)
{
@* here for the parent menu item*@
<li class=@(ViewContext.RouteData.Values["Controller"].ToString().ToLower() == item.Name.ToLower() ? "nav-item has-treeview active" : "nav-item has-treeview">
<a href="@item.Url" class="nav-link custom-sidebar-link">
@Html.Raw(@item.Icon)
<p class="text-white">
@item.Nome
@if (item.SubItems != null)
{
<i class="fas fa-angle-left right"></i>
}
</p>
</a>
@if (item.SubItems != null)
{
<ul class="nav nav-treeview">
@foreach (var subItem in item.SubItems)
{
@* here for the child menu item*@
<li class=@(ViewContext.RouteData.Values["Action"].ToString().ToLower() == item.Url.Split('/').Last().ToLower() ? "nav-item active" : "nav-item">
<a href="@subItem.Url" class="nav-link">
@Html.Raw(@subItem.Icon)
<p>
@subItem.Nome
</p>
</a>
</li>
}
</ul>
}
</li>
}
</ul>
</nav>
我已经使用过.ToString().ToLower()
,因为我在发布之前进行了测试,您可能不需要它们
推荐阅读
- c# - 从 .net 4.7.2 winform 应用程序调用 .netcore2.1 库
- angular - 不同的路由,相同的组件 - 为什么组件不会在路由更改时重新加载?
- wordpress - Wordpress,使用 3rd 方 REST Api
- linux - 在while循环bash中进行grep
- reactjs - “this.props”在我的地图组件中使用 react 和 mapbox-gl 的 mouseup 事件函数中不起作用
- php - 在 Amazon AWS Cloud 9 服务器上安装 CodeIgniter 4
- macos - 如何将我的 applescript 部署到多个设备?
- angular - 带有 toHaveBeenCalledTimes 的 Jest 拦截器角度
- c# - .NET Core:基于组成员的安全访问
- python - 我如何使用 Bootstrap4 模态在 Django 中制作功能正常的删除确认弹出窗口