не без ума от этого решения ... требует создания класса для каждого пункта меню, не так ли?

нировал, пытаясь найти подходящее решение для назначения класса «активный / текущий» пунктам меню на главной странице. Линия разделена на середину относительно того, делать ли этот клиент против серверной стороны.

По правде говоря, я новичок в JavaScript и MVC, поэтому у меня нет мнения. Я бы предпочел сделать это «самым чистым» и наиболее подходящим способом.

У меня есть следующий код jQuery, чтобы назначить «активный» класс для элемента <li> ... единственная проблема заключается в том, что элементу «index» или представлению по умолчанию всегда будет назначаться активный класс, потому что 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 ... любая помощь будет принята с благодарностью.

Ответы на вопрос(5)

Я создал следующий метод расширения класса 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>

Поэтому мой метод возвращает имя класса каждому div в соответствии с текущим действием контроллера Home. Вы можете пойти глубже и добавить в метод один параметр, который указывает имя контроллера, чтобы избежать проблем, когда у вас есть действия с тем же именем, но с разными контроллерами.

который основан на частях пути. Например, если вы сделаете String.Replace на пути, чтобы включить / blogs / posts / 1 в class = "blogs posts 1".

Затем вы можете назначить правила CSS, чтобы справиться с этим. Например, если у вас есть пункт меню для «блогов», вы можете просто сделать правило как

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

или если вы хотите определенный стиль, если ваш пост только порок, если вы находитесь на корневой странице блога

BODY.blogs.posts li.blogs {/* your style */}
 Michael18 янв. 2011 г., 21:58
не без ума от этого решения ... требует создания класса для каждого пункта меню, не так ли?
Решение Вопроса

ачей:

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

 4imble08 февр. 2011 г., 18:26
Работает блестяще +1
 Duncan24 апр. 2011 г., 14:53
Вам также необходимо импортировать пространство имен в вашем представлении, если вы используете Razor в MVC3, вы можете сделать это, просто добавив @using <NAMESPACE> в свое представление.
 Artur Kędzior04 авг. 2011 г., 08:50
У меня была одна проблема с этим. Что делать, если на странице «link2» у меня есть ссылка на «link3», которая указывает на другой контроллер и действие, но это часть раздела «link2». Link2 больше не активен, поскольку контроллер и действие в запросе не совпадают с тем, что мы передаем помощнику. Я разработал чистое решение: без сессий, без уродливого кода в представлениях.arturito.net/2011/08/03/... Дополнительная часть представляет собой словарь с отображениями маршрутов.
 4imble08 февр. 2011 г., 18:19
Стоит отметить, что htmlHelper.ActionLink () необходимо «использовать System.Web.Mvc.Html;»
 mg107518 июл. 2012 г., 02:56
В сочетании с ответом это также было полезно:msdn.microsoft.com/en-us/...

Через 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

Добавлена ​​поддержка областей:

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());
    }
}

Ваш ответ на вопрос