我一直在浏览,试图找到一个合适的解决方案,将“活动/当前”类分配给母版页中的菜单项。关于是否在客户端和服务器端执行此操作,这行代码从中间向下拆分。
老实说,我对JavaScript和MVC都是新手,所以我没有什么看法。我更喜欢用“最干净”和最合适的方式来做这件事。
我使用以下jQuery代码将“活动”类分配给item...the,唯一的问题是“索引”或默认视图菜单项将始终分配给活动类,因为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方法分配一个假的扩展名?例如,不只是基本网址,它将是localhost/home/dashboard
,这样它就不会是每个链接的子字符串?
老实说,我并没有真正遵循服务器端的方法,这就是为什么我尝试在客户端使用jQuery...any帮助来做这件事的原因。
发布于 2011-01-19 17:04:09
定制的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类了。
发布于 2012-05-17 01:48:30
增加了对区域的支持:
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());
}
}
发布于 2011-03-09 18:03:30
这是我对这个问题的解决方案。
我创建了以下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返回类名。您可以更深入地向该方法添加一个参数,该参数指定控制器的名称,以避免在具有相同名称但具有不同控制器的操作时出现问题。
https://stackoverflow.com/questions/4728777
复制相似问题