ASP.NET Core 使用 ViewComponent 跟踪侧边栏的活动页面答案

【问题标题】：ASP.NET Core track active Page for sidebar using ViewComponentASP.NET Core 使用 ViewComponent 跟踪侧边栏的活动页面
【发布时间】：2019-07-30 22:25:02
【问题描述】：

这是我的侧边栏视图组件的默认视图

                <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# 来执行此操作，但我不知道如何检测用户所在的当前页面。

【问题讨论】：

标签： javascript c# html asp.net-core

【解决方案1】：

您要做的是从视图中获取当前页面名称并在您拥有的循环内添加一个比较（全部在视图内）

                <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()，因为我在发布之前进行了测试，您可能不需要它们

【讨论】：