css - 根据页面激活导航项

Question

有一个子导航如下：

<div class="well sidebar-nav span3">
    <ul class="nav nav-list bs-docs-sidenav">
        <li><a href="/bio"><i class="icon-chevron-right"></i>Bio</a></li>
        <li><a href="/resume"><i class="icon-chevron-right"></i>Resume</a></li> 
    </ul>
</div>

这是由以下人员加载的：

@{Html.RenderAction("SubNav");}

它调用非控制器操作：

    [ChildActionOnly]
    public ActionResult SubNav()
    {
        return PartialView();
    }

现在基于页面，我如何添加active到 subnav 中的 li 类，以便我可以使其显示为选中/活动？

Answer 1

您可以使用操作名称。在运行时找到动作名称，通过模型或 ViewBag 将其传递给查看。

 [ChildActionOnly]
    public ActionResult SubNav()
    {
            var rd = Request.RequestContext.RouteData;
            string currentAction = rd.GetRequiredString("action");
            string currentController = rd.GetRequiredString("controller");
            string currentArea = rd.Values["area"] as string;
            ViewBag.ActionName = currentAction;
            return PartialView();
    }

在视图中：

<div class="well sidebar-nav span3">
    <ul class="nav nav-list bs-docs-sidenav">
        <li><a href="/bio"><i class="icon-chevron-right  @(ViewBag.ActionName == "bio" ? "ActiveClass" : "")" ></i>Bio</a></li>
        <li><a href="/resume"><i class="icon-chevron-right  @(ViewBag.ActionName == "resume" ? "ActiveClass" : "")"></i>Resume</a></li> 
</ul>