активный пункт меню - asp.net главная страница mvc3

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

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

у меня есть следующий код jQuery, чтобы назначить" активный " класс

  • пункт...единственная проблема - "индекс" или пункт меню "Вид по умолчанию" всегда будет назначен активному классу, потому что 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
       }
    });
    
    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 */}