активный пункт меню - asp.net главная страница mvc3
я сканировал вокруг, пытаясь найти подходящее решение для назначения" активного/текущего " класса пунктам меню с главной страницы. Линия разделена посередине относительно того, следует ли делать этот клиент против серверной стороны.
честно говоря, я новичок в JavaScript и MVC, поэтому у меня нет мнения. Я бы предпочел сделать это" самым чистым " и наиболее подходящим способом.
у меня есть следующий код jQuery, чтобы назначить" активный " класс
(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
}
});
localhost/home/dashboard Так что это не будет подстрокой каждой ссылки?
честно говоря, я действительно не следую методам выполнения этой серверной части, поэтому я пытаюсь сделать это на стороне клиента с помощью jQuery...любая помощь будет оценили.
5 ответов
Пользовательский 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>
теперь осталось определить .текущий класс CSS.
добавлена поддержка зоны:
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());
}
}
вот мое решение этой проблемы.
Я создал следующий метод расширения класса 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";
}
тогда у меня есть мой menublock. Выглядит это так:
<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>
таким образом, мой метод возвращает имя класса каждому div в соответствии с текущим действием домашнего контроллера. Вы можете пойти глубже и добавить к методу один параметр, который указывает имя контроллера, чтобы избежать проблем, когда у вас есть действия с тем же именем, но разные контроллеры.
через JQuery u можно сделать так:
$(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
обычно я назначаю класс тегу body, основанному на частях пути. Так что, если вы делаете строку.Замените на пути к повороту / blogs/posts / 1 В class="blogs posts 1".
затем вы можете назначить правила CSS для обработки этого. Например, если у вас есть пункт меню "блоги", можно просто сделать правило, как
BODY.blogs li.blogs { /* your style */}
или если вы хотите определенный стиль, Если ваш на пост только вице, если вы находитесь на корневой странице блога
BODY.blogs.posts li.blogs {/* your style */}