活动菜单项 - asp.net mvc3 母版页 [英] active menu item - asp.net mvc3 master page

问题描述

我一直在四处寻找合适的解决方案，以将活动/当前"类分配给母版页中的菜单项.关于是否执行此客户端与服务器端，这条线从中间拆分.

I've been scanning around trying to find an appropriate solution for assigning "active/current" class to menu items from the master page. The line is split down the middle with regards of whether to do this client vs server side.

说实话，我是 JavaScript 和 MVC 的新手，所以我没有意见.我更愿意以最干净"和最合适的方式来做这件事.

Truthfully I'm new to both JavaScript and MVC so i don't have an opinion. I would prefer to do this in the "cleanest" and most appropriate way.

我有以下 jQuery 代码将活动"类分配给 <li>项目...唯一的问题是索引"或默认视图菜单项将始终被分配活动类，因为 URL 始终是其他菜单链接的子字符串:

I have the following jQuery code to assign the "active" class to the <li> item...the only problem is the "index" or default view menu item will always be assigned the active class, because the URL is always a substring of the other menu links:

(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 方法分配一个假扩展名?就像 localhost/home/dashboard 而不仅仅是基本 URL，这样它就不会是每个链接的子字符串?

Is there a better way of doing this, guys? Would someone at least help me get the client-side version bulletproof? So that the "index" or default link is always "active"? Is there a way of assigning a fake extension to the index method? like instead of just the base URL it would be localhost/home/dashboard so that it wouldn't be a substring of every link?

说实话，我并没有真正遵循在服务器端执行此操作的方法，这就是为什么我尝试使用 jQuery 在客户端执行此操作...任何帮助将不胜感激.

Truthfully, i don't really follow the methods of doing this server-side, which is why I'm trying to do it client side with jQuery...any help would be appreciated.

推荐答案

自定义 HTML 帮助程序通常可以很好地完成工作:

A custom HTML helper usually does the job fine:

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 类.

Now all that's left is define the .current CSS class.

这篇关于活动菜单项 - asp.net mvc3 母版页的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！