Выделите меню и подменю в MVC 3? - PullRequest
Новая
       33

Выделите меню и подменю в MVC 3?

2 голосов
/ 11 июля 2011

Я пытаюсь создать меню, которое выделяет текущую страницу.Я нашел несколько ответов здесь, но проблема в том, что я не вижу, чтобы кто-то обрабатывал подменю.

Здесь есть ответ, который выглядит заманчиво простым: активный пункт меню - asp.net master mvc3page

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

Например, если кто-то нажимает Сервисы, а затем Консалтинг, я бы хотел, чтобы оба этих элемента были выделены - Сервисы в верхнем менюи консалтинг в подменю.Как я могу это сделать?

Кстати, я хотел бы иметь возможность отображать подменю как раскрывающийся список с использованием CSS, а также как боковую панель.Как взять подменю ul и отобразить его как боковую панель?

Ответы [ 4 ]

2 голосов
/ 11 ноября 2011

Вот простая вещь, вы можете изменить ее в соответствии со своими потребностями, но основы здесь.http://developerstyle.posterous.com/highlighting-current-page-in-mvc-3-slick-tric

Эта ссылка может быть недоступна, так как постер закрывается, вот ссылка для обновления http://bhavinsurela.com/highlighting-current-page-in-mvc-3-slick-tric/

1 голос
/ 10 апреля 2013

Довольно просто определить, какой элемент меню нужно выделить, просто используя словарь ViewContext.RouteData.Values, в частности клавиши Action и Controller.

Вот метод быстрого помощника: 

public static string IsSelected(this RouteValueDictionary dictionary, string controller, string action)
{
    string cssClass = "selected";
    string routeValueController = dictionary["Controller"] as string;
    string routeValueAction = dictionary["Action"] as string;

    return string.IsNullOrEmpty(action) ? 
        routeValueController == controller ? cssClass : string.Empty : 
        routeValueController == controller && routeValueAction == action ? cssClass : string.Empty;
}

И может использоваться с точки зрения как таковой: 

<ul id="menu">
    <li class="@this.ViewContext.RouteData.Values.IsSelected("Default", "Index")">
        <a href="@Url.Action("Index", "Default")">Accueil</a>
    </li>
</ul>

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

1 голос
/ 27 июня 2012

У меня есть решение, которое я также частично нашел здесь в SO и модифицировало, но все еще должно быть улучшено для обработки любого количества подменю ... сейчас оно работает для подменю. 

namespace PhotoBuss.Web.Back.Controllers
{
public class NavigationController : BaseAdministrationController
{
    //
    // GET: /Common/

    [ChildActionOnly]
    public ActionResult HeaderMenu()
    {
        // /3255213/asp-net-mvc-meny-vybrannyi-punkt

        var items = new List<MenuItemViewModel>
       {
           new MenuItemViewModel{ Text = "home", Action="Index", Controller="Administration", Selected=false},
           new MenuItemViewModel{Text = "manage", Action="Index", Controller="Manage", Selected=false,
           SubMenu = 
           new List<MenuItemViewModel>
           { 
               new MenuItemViewModel{ Text= "photos", Action="Index", Controller="Photos", Selected = false },
               new MenuItemViewModel { Text = "collections", Action="Index", Controller="Collections", Selected=false},
               new MenuItemViewModel { Text = "keywords", Action="Index", Controller="Keywords", Selected=false},
               new MenuItemViewModel { Text = "users", Action="Index", Controller="Users", Selected=false},
               new MenuItemViewModel { Text = "user groups", Action="Index", Controller="Roles", Selected=false}
           }
           },
           new MenuItemViewModel{Text="cms", Action="Index", Controller="CMS", Selected=false}
       };
        string action = ControllerContext.ParentActionViewContext.RouteData.Values["action"].ToString();
        string controller = ControllerContext.ParentActionViewContext.RouteData.Values["controller"].ToString();

        foreach (var item in items)
        {
            if (item.Controller == controller && item.Action == action)
            {
                item.Selected = true;
            }
            foreach(var subItem in item.SubMenu)
                if (subItem.Controller == controller && subItem.Action == action)
                {
                    item.Selected =
                    subItem.Selected = true;
                }
        }

        return PartialView(items);
    }
}

ViewModel 

public class MenuItemViewModel
{
    public MenuItemViewModel()
    {
        SubMenu = new List<MenuItemViewModel>();
    }

    public string Text { get; set; }
    public string Controller { get; set; }
    public string Action { get; set; }
    public bool Selected { get; set; }

    public List<MenuItemViewModel> SubMenu { get; set; }
}
}

The View 

    @model List<PhotoBuss.Web.Back.Models.Navigation.MenuItemViewModel>
    <link href="@Url.Content("~/Areas/Admin/Content/CSS/menu.css")" rel="stylesheet" type="text/css" />
    <div class="headerMenu">
        <ul>
            @foreach (var menuItem in Model)
            {
                <li>@Html.ActionLink(menuItem.Text, menuItem.Action, menuItem.Controller, null,
        new { @class = menuItem.Selected ? "selected" : "" })
                    @if (menuItem.SubMenu.Count >0)
                    {
                        <ul class="@(menuItem.Selected ? "selected" : "")">

                            @foreach (var subMenu in menuItem.SubMenu)
                            {
                                <li>@Html.ActionLink(subMenu.Text, subMenu.Action, subMenu.Controller, null,
        new { @class = subMenu.Selected ? "selected" : "" })</li>
                            }
                        </ul>
                    }
                </li>
            }
        </ul>
    </div>

CSS, который я сейчас использую с этим: 

    .headerMenu *
    {
        padding: 0;
        margin: 0;
    }
    .headerMenu
    {
        position: relative;
        background-color: #78C8FA;
        width: 100%;
        text-align: center;
        color: #FFFFFF;
        clear: both;
        float: left;
        margin-top: 10px;
    }
    .headerMenu ul
    {
        display: block;
        list-style: none;
        line-height: 3em;
        height: 3em;
    }

    .headerMenu ul li
    {
        display: inline-block;
        margin-left: 15px;
        margin-right: 15px;
    }

    .headerMenu ul li a
    {
        display: block;
        text-decoration: none;
        color: white;
        font-size: 1.5em;
        padding-left:2em;
        padding-right:2em;
    }

    .headerMenu ul li a:visited
    {
        color: white;
    }

    .headerMenu ul li a:hover, .menu ul li
    {
        color: #333333;
    }
    .selected
    {
        color: #333333 !important;
        display:block !important;
        background-color: #999999;
    }

    .headerMenu ul ul
    {
        display: none;
        position: absolute;
        width: 100%;
        right: 50%;
        left: 0;
        background-color: #999999;
    }

    .headerMenu li:hover > ul, .selected 
    {
        display: block;
    }
0 голосов
/ 11 июля 2011

Вот пример, где они обрабатывают подменю и выделяют его.

http://users.tpg.com.au/j_birch/plugins/superfish/#sample4

Он использует superfish-navbar.css, где вы можете увидеть, как это делается.Это очень хороший плагин для меню.

...