带Bootstrap Navbar的MVC - 将所选项设置为活动状态

我正在学习Bootstrap,无法将所选项目置于"活动"状态.活动状态保留在默认项目上.新选择/单击的项目会暂时变为活动状态,但会恢复原状.我已阅读所有帖子,仍然无法使此代码生效.我正在使用MVC5和JQuery 2.1.

编辑: 如果我将li的hrefs更改为href ="#",则正确应用活动类.加载新视图时会发生什么？我认为塞巴斯蒂安的回应很接近,但是对于区域而言却变得混乱.

标记

    

        


            

                
                    
                    
                    
                
                Test
            
            

                
                    Login
          
                
                

                    
Profile
                    

                    
Sign Out
                
            
            

                

                    
Home
                    
About
                    
Students Sample
                    

                        Dropdown 
                        

                            
Admin
                            
Another action
                            
Something else here
                            

                            
Separated link
                            
One more separated link
                        
                    
                
            

        
    
    

脚本

编辑: 这是我最终在发布的答案和一些研究的帮助下做的.

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;
        }

SebastianSte.. 28

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

我有一个类似于此的扩展方法:

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;
}

您可以在视图中使用它,如下所示:

   ....

只是一个小错误,扩展方法名称应该是MakeActive而不是MakeActiveClass. (2认同)

---

Jeff Walker .. 19

JavaScript无法运行,因为页面在运行后会重新加载.因此,它正确设置活动项,然后加载页面,因为浏览器正在关注链接.就个人而言,我会删除你拥有的JavaScript,因为它没有用处.要执行此客户端(而不是您拥有的服务器端代码),您需要JavaScript来在新页面加载时设置活动项.就像是:

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

我建议您在导航栏中添加ID或其他类,以确保选择了正确的类.

1> SebastianSte..：

---

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

我有一个类似于此的扩展方法:

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;
}

您可以在视图中使用它,如下所示:

   ....

---

只是一个小错误,扩展方法名称应该是MakeActive而不是MakeActiveClass.

2> Jeff Walker ..：

---

JavaScript无法运行,因为页面在运行后会重新加载.因此,它正确设置活动项,然后加载页面,因为浏览器正在关注链接.就个人而言,我会删除你拥有的JavaScript,因为它没有用处.要执行此客户端(而不是您拥有的服务器端代码),您需要JavaScript来在新页面加载时设置活动项.就像是:

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

我建议您在导航栏中添加ID或其他类,以确保选择了正确的类.

3> Mahib..：

---

最简单的方法是从控制器发送ViewBag参数,如下所示;

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


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

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

           
                    
                
@Html.ActionLink("About", "About", "Home")
                
@Html.ActionLink("Contact", "Contact", "Home")
            

礼貌@Damith在这里

4> Moji..：

---

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

    @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" })

将此方法添加到新类或现有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));
    }
}