asp.net-mvc 活动菜单项 - asp.net mvc3 母版页
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4728777/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
active menu item - asp.net mvc3 master page
提问by Michael
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.
我一直在四处寻找合适的解决方案，以将“活动/当前”类分配给母版页中的菜单项。关于是否执行此客户端与服务器端，该行在中间分开。
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.
老实说，我对 JavaScript 和 MVC 都是新手，所以我没有意见。我更愿意以“最干净”和最合适的方式来做到这一点。
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:
我有以下 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
}
});
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/dashboardso that it wouldn't be a substring of every link?
有没有更好的方法来做到这一点，伙计们？至少有人会帮我获得客户端版本的防弹功能吗？以便“索引”或默认链接始终处于“活动状态”？有没有办法为 index 方法分配一个假扩展名？就像它不仅仅是基本 URLlocalhost/home/dashboard那样，它不会是每个链接的子字符串？
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.
说实话，我并没有真正遵循做这个服务器端的方法，这就是为什么我试图用 jQuery 在客户端做它......任何帮助将不胜感激。
回答by Darin Dimitrov
A custom HTML helper usually does the job fine:
自定义 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);
}
and in your master page:
并在您的母版页中：
<ul>
<li>@Html.MenuLink("Link 1", "link1", "Home")</li>
<li>@Html.MenuLink("Link 2", "link2", "Home")</li>
</ul>
Now all that's left is define the .current CSS class.
现在剩下的就是定义 .current CSS 类。
回答by Ronnie Overby
Added support for areas:
添加了对区域的支持：
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());
}
}
回答by Tim Gim
Here is my solution of this issue.
这是我对这个问题的解决方案。
I created following extension method of HtmlHelpers class:
我创建了 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";
}
Then I have my menublock. It looks like this:
然后我有我的菜单块。它看起来像这样：
<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>
So my method returns class name to every div according to current action of Home controller. You can go deeper and add to the method one parameter, which specifies the name of the controller to avoid problems, when you have actions with the same name but of different controllers.
所以我的方法根据 Home 控制器的当前动作将类名返回给每个 div。您可以更深入地向方法添加一个参数，该参数指定控制器的名称，以避免在您具有相同名称但控制器不同的操作时出现问题。
回答by oyaebunterkrah
Through JQuery u can do like this:
通过 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;
}
Original: http://www.paulund.co.uk/use-jquery-to-highlight-active-menu-item
原文：http: //www.paulund.co.uk/use-jquery-to-highlight-active-menu-item
回答by Paul
What I usually do is assign a class to the body tag that's based on the path parts. So like, if you do a String.Replace on the path to turn /blogs/posts/1 to class="blogs posts 1".
我通常做的是为基于路径部分的 body 标记分配一个类。就像，如果您在路径上执行 String.Replace 以将 /blogs/posts/1 变为 class="blogs posts 1"。
Then, you can assign CSS rules to handle that. For example, if you have a menu item for "blogs", you can just do a rule like
然后，您可以分配 CSS 规则来处理它。例如，如果您有一个“博客”菜单项，您可以执行如下规则
BODY.blogs li.blogs { /* your style */}
or if you want a particular style if your on a post only vice if you're on the blog root page
或者如果你想要一个特定的风格，如果你在一个帖子上，如果你在博客根页面上
BODY.blogs.posts li.blogs {/* your style */}
