ASP.NET MVC：Masterpage：如何在活动菜单项上设置css类

Question

我的主页中有以下菜单：

<ul id="menu" class="lavaLampBottomStyle">
    <li>
        <%= Html.ActionLink("Employees", "Index", "Employees")%></li>
    <li>
        <%= Html.ActionLink("Customer", "Details", "Account")%></li>
</ul>

我需要一种方法将当前活动li的css类设置为“current”。

我的第一个猜测是在javascript的帮助下做到这一点。

我会在主页中包含这样的内容：

  $("#menu li a").each(){
    if($(this).attr("href") == '<%= *GET CURRENT PAGE* %>'){
       $(this).parent("li").addClass("current");
    }
  }

这是一个好方法吗？

如果是，我如何获得当前的URL部分，如在href中？

如果不是，你的建议是什么？ :-)

仅供参考，我之后生成的html：

<ul id="menu" class="lavaLampBottomStyle">
    <li>
        <a href="/KszEmployees/Index">Employees</a></li>
    <li>
        <a class="current" href="/">Customer</a></li>
</ul>

Answer 1

如果你想在服务器端做这一切，我之前就已经这样做了。 创建操作过滤器属性：

public class PageOptionsAttribute : ActionFilterAttribute
{
    public string Title { get; set; }
    public string Section { get; set; }

    public override void OnActionExecuting(ActionExecutingContext filterContext)
    {
        var controller = filterContext.Controller as ControllerBase;
        if (controller != null)
        {
            controller.SetPageSection(this.Section);
            controller.SetPageTitle(this.Title);
        }

        base.OnActionExecuting(filterContext);
    }
}

这会在我的ControllerBase类中调用我的所有控制器继承自的两个方法：

public class ControllerBase : Controller
{
    public void SetPageSection(string section)
    {
                    // use the section defined or the controller name if none
        ViewData["PageSection"] = section != null ? 
                        section : this.RouteData.Values["controller"].ToString();
    }

    public void SetPageTitle(string title)
    {
        ViewData["PageTitle"] = title;
    }
}

在控制器方法上设置标题和页面部分：

public class HomeController : ControllerBase
{
    [PageOptions(Title="Home Page", Section="Home")]
    public ActionResult Index()
    { }
 }

然后我从我的母版页调用ViewData值（这不会干扰ViewData.Model）：

<body class="<%=ViewData["PageSection"] %>">

然后通过CSS引用，而不是调用.current，给每个导航项一个ID，然后使用body类结合该ID来确定当前页面。

body.home #HomeNav { /* selected */  }
body.about #AboutNav { /* selected */  }

Answer 2

从window.location中提取当前位置。 然后使用指定href属性值的选择器来选择那些匹配的元素（可能只有一个）。

 var currentLocation = window.location.href;
 // probably needs to be massaged to extract just the path so that it works in dev/prod

$("#menu li a[href$="+currentLocation+"]").addClass("current");

Answer 3

这可能是最不强化的方式。 如果您可以指望用户启用了javascript，我认为这没有任何问题，并且有时我自己完成了。

Request.Url是您感兴趣的对象，用于获取服务器端的当前页面。 tvanfosson使用window.location.href的建议也不错，如果你想把它完全留在客户端。

使用serverside的优点是，Request.Url具有易于访问的URL部分，例如Request.Url.Host等，以帮助满足链接修改需求。

Answer 4

我有同样的问题。 使用以下答案，我设法将下面的解决方案放在一起。

https://stackoverflow.com/a/4733394/280972

https://stackoverflow.com/a/5650735/280972

在HtmlHelpers.cs中：

public static class HtmlHelpers
{
    public static HtmlString MenuLink(
        this HtmlHelper htmlHelper,
        string linkText,
        string actionName,
        string controllerName
    )
    {
        var currentAction = htmlHelper.ViewContext.RouteData.GetRequiredString("action");
        var currentController = htmlHelper.ViewContext.RouteData.GetRequiredString("controller");
        var link = htmlHelper.ActionLink(linkText, actionName, controllerName);
        var prefix = (actionName == currentAction && controllerName == currentController) ? String.Format("<li class=\"current\">") : String.Format("<li>");
        const string suffix = "</li>";
        return new HtmlString(prefix + link + suffix);
    }
}

在布局中：

<ul class="nav nav-list">
    <li class="nav-header">Statistics</li>
    @Html.MenuLink("Number of logins", "Logins", "Statistics")
</ul>

请注意，MenuLink-helper会同时创建li-tag和a-tag。

非常欢迎对此解决方案的反馈！

Answer 5

这不应该用Javascript完成！ 确定您所在的页面是服务器端代码的工作，它不是UI行为。

将菜单作为用户控件并将值传递给它以指示应突出显示菜单的哪个部分。 我是前端人员，而不是.NET开发人员，但是这样：

<yourControl:menuControl runat="server" ID="menu" selectedPage="4" />

ASP.NET MVC：Masterpage：如何在活动菜单项上设置css类

问题描述

5 个解决方案

解决方案1
15 2009-06-03 15:06:47

解决方案2
9 2009-06-03 14:47:13

解决方案3
6 已采纳 2009-06-03 14:47:18

解决方案4
0 2012-12-04 09:24:30

解决方案5
-2 2009-06-03 14:58:10

ASP.NET MVC：Masterpage：如何在活动菜单项上设置css类

问题描述

5 个解决方案

解决方案1 15 2009-06-03 15:06:47

解决方案2 9 2009-06-03 14:47:13

解决方案3 6 已采纳 2009-06-03 14:47:18

解决方案4 0 2012-12-04 09:24:30

解决方案5 -2 2009-06-03 14:58:10

解决方案1
15 2009-06-03 15:06:47

解决方案2
9 2009-06-03 14:47:13

解决方案3
6 已采纳 2009-06-03 14:47:18

解决方案4
0 2012-12-04 09:24:30

解决方案5
-2 2009-06-03 14:58:10