带有引导导航栏的 MVC - 将所选项目设置为活动

Question

我正在学习 Bootstrap，无法将所选项目置于“活动”状态。活动状态保持在默认项目上。新选择/单击的项目会短暂变为活动状态，但会恢复。我已阅读所有帖子，但仍然无法使此代码正常工作。我正在使用 MVC5 和 JQuery 2.1。

编辑： 如果我将 li 的 href 更改为 href="#"，则活动类将正确应用。加载新视图时会发生什么？我认为塞巴斯蒂安的反应很接近，但对区域很混乱。

标记

<div class="navbar-wrapper">
    <div class="container">
        <div class="navbar navbar-inverse navbar-fixed-top">

            <div class="navbar-header">
                <a class="navbar-toggle" data-toggle="collapse" data-target=".nav-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </a>
                <a class="navbar-brand" href="#">Test</a>
            </div>
            <div class="btn-group pull-right">
                <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
                    <i class="icon-user"></i>Login
          <span class="caret"></span>
                </a>
                <ul class="dropdown-menu">
                    <li><a href="#">Profile</a></li>
                    <li class="divider"></li>
                    <li><a href="#">Sign Out</a></li>
                </ul>
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li class="active"><a href="~/Home">Home</a></li>
                    <li><a href="~/Home/About">About</a></li>
                    <li><a href="~/Student">Students Sample</a></li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
                        <ul class="dropdown-menu">
                            <li><a href="~/Admin/Home/Index"">Admin</a></li>
                            <li><a href="#">Another action</a></li>
                            <li><a href="#">Something else here</a></li>
                            <li class="divider"></li>
                            <li><a href="#">Separated link</a></li>
                            <li><a href="#">One more separated link</a></li>
                        </ul>
                    </li>
                </ul>
            </div>

        </div>
    </div>
    <!-- /container -->
</div>
<!-- /navbar wrapper -->

脚本

<script type="text/javascript">

    $(function () {
        $('.navbar-nav li').click(function () {
            $(this).addClass('active').siblings().removeClass('active');
        });
    });

</script>

编辑： 这是我在发布的答案和一些研究的帮助下最终完成的工作。

public static string MakeActive(this UrlHelper urlHelper,string action, string controller, string area = "")
        {
            string result = "active";
            string requestContextRoute;
            string passedInRoute;

            // Get the route values from the request           
            var sb = new StringBuilder().Append(urlHelper.RequestContext.RouteData.DataTokens["area"]);
            sb.Append("/");
            sb.Append(urlHelper.RequestContext.RouteData.Values["controller"].ToString());
            sb.Append("/");
            sb.Append(urlHelper.RequestContext.RouteData.Values["action"].ToString());
            requestContextRoute = sb.ToString();

            if (string.IsNullOrWhiteSpace(area))
            {
                passedInRoute = "/" + controller + "/" + action;
            }
            else
            {
                passedInRoute = area + "/" + controller + "/" + action;
            }

            //  Are the 2 routes the same?
            if (!requestContextRoute.Equals(passedInRoute, StringComparison.OrdinalIgnoreCase))
            {
                result = null;
            }

            return result;
        }

Answer 1

使用代码from here 的简化版本，如果控制器和动作匹配（或者如果没有提供动作，则只标记控制器），您可以使用标签助手将锚标记为“活动”。

导航：

  <li class="nav-item px-2">
       <a class="nav-link" asp-active-route asp-controller="Home" asp-action="Index">Home</a>
  </li>
  <li class="nav-item px-2">
       <a class="nav-link" asp-active-route asp-controller="Car" asp-action="Add">Add Car</a>
   </li>

标签助手类

[HtmlTargetElement(Attributes = "asp-active-route")]
public class ActiveRouteTagHelper : TagHelper
{
    [HtmlAttributeName("asp-controller")] public string Controller { get; set; }

    [HtmlAttributeName("asp-action")] public string Action { get; set; }

    [HtmlAttributeNotBound] [ViewContext] public ViewContext ViewContext { get; set; }

    public override void Process(TagHelperContext context, TagHelperOutput output)
    {
        if (IsActive())
        {
            output.AddClass("active", HtmlEncoder.Default);
        }

        output.Attributes.RemoveAll("asp-active-route");

        base.Process(context, output);
    }

    private bool IsActive()
    {
        var currentController = ViewContext.RouteData.Values["Controller"].ToString();
        var currentAction = ViewContext.RouteData.Values["Action"].ToString();
        var active = false;

        if (!string.IsNullOrWhiteSpace(Controller) && !string.IsNullOrWhiteSpace(currentController))
        {
            active = Controller.Equals(currentController, StringComparison.CurrentCultureIgnoreCase);

            if (active && !string.IsNullOrWhiteSpace(Action) && !string.IsNullOrWhiteSpace(currentAction))
            {
                active = Action.Equals(currentAction, StringComparison.CurrentCultureIgnoreCase);
            }
        }

        return active;
    }
}

不要忘记将标签助手添加到您的 _ViewImports.cshtml

 @addTagHelper *, My.Awesome.Web

• 未来的改进将是检查区域并可能将整个导航包裹在控件/助手中，这样您只需比较一次路线并标记项目

Answer 2

只需添加这个 JQuery 编码：

<script>
        $(document).ready(function () {
            $('body').find('a[href="' + location.pathname + '"]')
                .addClass('active');
        });
</script>

Answer 3

您可以在任何视图中执行此操作

<ul class="nav navbar-nav">
    @Html.NavigationLink("Link1", "Index", "Home")
    @Html.NavigationLink("Link2", "Index", "Home")
    @Html.NavigationLink("Link3", "Index", "Home")
    @Html.NavigationLink("Links with Parameter", "myAction", "MyController", new{ id=999}, new { @class= " icon-next" })
</ul>

将此方法添加到新类或现有 HtmlExtensions 类后

public static class HtmlExtensions
{
    public static MvcHtmlString NavigationLink(this HtmlHelper html, string linkText, string action, string controller, object routeValues=null, object css=null)
    {
        TagBuilder aTag = new TagBuilder("a");
        TagBuilder liTag = new TagBuilder("li");
        var htmlAttributes = HtmlHelper.AnonymousObjectToHtmlAttributes(css);
        string url = (routeValues == null)?
            (new UrlHelper(html.ViewContext.RequestContext)).Action(action, controller)
            :(new UrlHelper(html.ViewContext.RequestContext)).Action(action, controller, routeValues);

        aTag.MergeAttribute("href", url);
        aTag.InnerHtml = linkText;
        aTag.MergeAttributes(htmlAttributes);

        if (action.ToLower() == html.ViewContext.RouteData.Values["action"].ToString().ToLower() && controller.ToLower() == html.ViewContext.RouteData.Values["controller"].ToString().ToLower())
            liTag.MergeAttribute("class","active");

        liTag.InnerHtml = aTag.ToString(TagRenderMode.Normal);
        return new MvcHtmlString(liTag.ToString(TagRenderMode.Normal));
    }
}

Answer 4

最简单的做法是从您的控制器发送一个 ViewBag 参数，如下所示；

public ActionResult About()
    {            
        ViewBag.Current = "About";
        return View();
    }


    public ActionResult Contact()
    {            
        ViewBag.Current = "Contact";
        return View();
    }

在cshtml页面中执行以下操作；

           <ul class="nav navbar-nav">                    
                <li class="@(ViewBag.Current == "About" ? "active" : "")">@Html.ActionLink("About", "About", "Home")</li>
                <li class="@(ViewBag.Current == "Contact" ? "active" : "")">@Html.ActionLink("Contact", "Contact", "Home")</li>
            </ul>

感谢@Damith here

Answer 5

JavaScript 不工作，因为页面在运行后重新加载。所以它正确设置了活动项目，然后页面加载，因为浏览器正在跟踪链接。就个人而言，我会删除您拥有的 JavaScript，因为它没有任何用途。要执行此客户端（而不是您拥有的服务器端代码），您需要 JavaScript 在新页面加载时设置活动项。就像是：

$(document).ready(function() {
    $('ul.nav.navbar-nav').find('a[href="' + location.pathname + '"]')
        .closest('li').addClass('active');
});

我建议您在导航栏中添加一个 id 或其他类，这样您就可以确定您选择了正确的。

Answer 6

您的 javascript 函数应该可以正常工作...问题是您的链接路由到控制器并重新加载整个页面。为了避免这种行为，您可以将正文内容呈现为部分视图，这样导航栏元素就不会重新加载。您不必编写函数来处理 dom 事件——这就是 javascript 的用途。

要明白我的意思，请更改您的代码：

<li><a href="~/Home/About">About</a></li>
<li><a href="~/Student">Students Sample</a></li>

到：

 <li><a href="">About</a></li>
 <li><a href="">Students Sample</a></li>

Answer 7

您必须检查您的控制器或根据当前 url 查看哪个菜单项处于活动状态：

我有一个类似这样的扩展方法：

public static string MakeActiveClass(this UrlHelper urlHelper, string controller)
{
    string result = "active";

    string controllerName = urlHelper.RequestContext.RouteData.Values["controller"].ToString();

    if (!controllerName.Equals(controller, StringComparison.OrdinalIgnoreCase))
    {
        result = null;
    }

    return result;
}

您可以像这样在视图中使用它：

<!-- Make the list item active when the current controller is equal to "blog" -->
<li class="@Url.MakeActive("blog")">
   <a href="@Url.Action("index", "blog")">....</a>
</li>

Answer 8

我相信你的选择是倒退的。您正在添加课程，然后将其从兄弟姐妹中删除，我认为第二次删除会导致问题。您可以尝试将其反转为：

<script type="text/javascript">

    $(function () {
        $('.navbar-nav li').click(function () {
            $(this).siblings().removeClass('active');
            $(this).addClass('active');
        });
    });

</script>