活动菜单项 - ASP.NET MVC3主页

Question

活动菜单项 - ASP.NET MVC3主页

asp.net-mvcasp.net-mvc-3menumaster-pages

65

我一直在寻找一个适当的解决方案，为了给主页面上的菜单项分配“活动/当前”类。对于这个问题，有关是在客户端还是服务器端进行处理的观点存在分歧。

实际上，我对JavaScript和MVC都很陌生，所以我没有意见。我希望用最“清晰”和最合适的方式来解决这个问题。

我有以下jQuery代码来分配“活动”类到<li>项……唯一的问题是“索引”或默认视图菜单项将总是被分配活动类，因为URL总是其他菜单链接的子字符串：

(default) index = localhost/
link 1 = localhost/home/link1
link 2 = localhost/home/link1

$(function () {
 var str = location.href.toLowerCase();
  $('#nav ul li a').each(function() {
   if (str.indexOf(this.href.toLowerCase()) > -1) {
    $(this).parent().attr("class","active"); //hightlight parent tab
   }
});

有更好的方法吗？能否帮忙让客户端版本做到无懈可击？使得“index”或默认链接始终处于“活动”状态？是否可以给索引方法分配一个虚拟扩展名？例如，不仅仅是基本 URL，而是 localhost/home/dashboard，这样它就不会成为每个链接的子字符串了？说实话，我并不真正理解服务器端的方法，这就是为什么我试图在客户端使用 jQuery 来完成…感谢任何帮助。

- Michael

5个回答

5

增加了区域支持：

public static class MenuExtensions
{
    public static MvcHtmlString MenuItem(this HtmlHelper htmlHelper, string text, string action, string controller, string area = null)
    {

        var li = new TagBuilder("li");
        var routeData = htmlHelper.ViewContext.RouteData;

        var currentAction = routeData.GetRequiredString("action");
        var currentController = routeData.GetRequiredString("controller");
        var currentArea = routeData.DataTokens["area"] as string;

        if (string.Equals(currentAction, action, StringComparison.OrdinalIgnoreCase) &&
            string.Equals(currentController, controller, StringComparison.OrdinalIgnoreCase) &&
            string.Equals(currentArea, area, StringComparison.OrdinalIgnoreCase))
        {
            li.AddCssClass("active");
        }
        li.InnerHtml = htmlHelper.ActionLink(text, action, controller, new {area}, null).ToHtmlString();
        return MvcHtmlString.Create(li.ToString());
    }
}

- Ronnie Overby

4

以下是我对这个问题的解决方案。

我创建了HtmlHelpers类的以下扩展方法：

public static class HtmlHelpers
{
    public static string SetMenuItemClass(this HtmlHelper helper, string actionName)
    {
        if (actionName == helper.ViewContext.RouteData.Values["action"].ToString())
            return "menu_on";
        else
            return "menu_off";
    }

然后我有我的菜单块。它长这样：

<div id="MenuBlock">
    <div class="@Html.SetMenuItemClass("About")">
        <a>@Html.ActionLink("About", "About", "Home")</a></div>
    <img height="31" width="2" class="line" alt="|" src="@Url.Content("~/Content/theme/images/menu_line.gif")"/>
    <div class="@Html.SetMenuItemClass("Prices")">
        <a>@Html.ActionLink("Prices", "Prices", "Home")</a></div>
</div>

我的方法根据Home控制器的当前操作，为每个div返回类名。你可以深入研究，并向该方法添加一个参数，该参数指定控制器的名称，以避免出现具有相同名称但属于不同控制器的操作时出现问题。

- Tim Gim

2

通过 JQuery，你可以像这样做：

$(document).ready(function () {
    highlightActiveMenuItem();
});

highlightActiveMenuItem = function () {
    var url = window.location.pathname;
    $('.menu a[href="' + url + '"]').addClass('active_menu_item');
};

.active_menu_item {
    color: #000 !important;
    font-weight: bold !important;
}

原文：http://www.paulund.co.uk/use-jquery-to-highlight-active-menu-item

翻译：http://www.paulund.co.uk/use-jquery-to-highlight-active-menu-item（原文链接）

- oyaebunterkrah

-1

我通常做的是给body标签分配一个基于路径部分的类。所以，如果你在路径上进行String.Replace操作，将/blogs/posts/1转换为class="blogs posts 1"。

然后，您可以分配CSS规则来处理它。例如，如果您有一个名为“blogs”的菜单项，您可以只需执行如下规则：

BODY.blogs li.blogs { /* your style */}

或者，如果您想要特定的样式，如果您在帖子页面上，只需反之，如果您在博客根页面上

BODY.blogs.posts li.blogs {/* your style */}

- Paul

2

不太喜欢这个解决方案...每个菜单项都需要创建一个类，是吧？ - Michael

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Darin Dimitrov · Accepted Answer

一个自定义的HTML帮助程序通常可以很好地完成工作：

public static MvcHtmlString MenuLink(
    this HtmlHelper htmlHelper, 
    string linkText, 
    string actionName, 
    string controllerName
)
{
    string currentAction = htmlHelper.ViewContext.RouteData.GetRequiredString("action");
    string currentController = htmlHelper.ViewContext.RouteData.GetRequiredString("controller");
    if (actionName == currentAction && controllerName == currentController)
    {
        return htmlHelper.ActionLink(
            linkText,
            actionName,
            controllerName,
            null,
            new {
                @class = "current"
            });
    }
    return htmlHelper.ActionLink(linkText, actionName, controllerName);
}

并且在您的母版页中：

<ul>
    <li>@Html.MenuLink("Link 1", "link1", "Home")</li>
    <li>@Html.MenuLink("Link 2", "link2", "Home")</li>
</ul>

现在只需要定义 .current 的 CSS 类即可。