Поддерживать многоуровневый выбор меню

Используя один из шаблонов ASP.Net MVC5, как я могу поддерживать выбор меню при выборе элемента из многоуровневого меню?

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

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


aspnetboilerplate asp.net-boilerplate
person weblar83    schedule 25.08.2017    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Одним из способов решения этого решения было бы добавить еще одно свойство в каждое представление, чтобы указать имя страницы элемента подменю, передать имя страницы элемента подменю в TopMenu компонент представления, затем установите класс CSS active для соответствующего пункта подменю.

Есть много других способов решить этот вопрос, но этот подход кажется довольно быстрым и простым, учитывая, что шаблон уже создал структуру для использования для навигации на корневом уровне; мы просто расширяем его.

Следующие шаги проведут вас через этот подход:

Шаг 1

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

@{
  ViewBag.CurrentPageName = "Reporting";
  ViewBag.CurrentSubPageName = "Activity Report";
}

Шаг 2

Добавьте свойство, в данном случае ActiveSubMenuItemName, к классу TopMenuViewModel для хранения текущего активного имени элемента подменю.

public class TopMenuViewModel
{
  public UserMenu MainMenu { get; set; }
  public string ActiveMenuItemName { get; set; }
  public string ActiveSubMenuItemName { get; set; }
}

Шаг 3

Добавьте параметр к методу InvokeAsync в классе TopMenuViewComponent, чтобы принять текущее активное имя элемента подменю.

public async Task<IViewComponentResult> InvokeAsync(string activeMenu = "", string activeSubMenu = "")
{
  var model = new TopMenuViewModel
  {
    MainMenu = await _userNavigationManager.GetMenuAsync("MainMenu", _abpSession.ToUserIdentifier()),
    ActiveMenuItemName = activeMenu,
    ActiveSubMenuItemName = activeSubMenu
  };

  return View(model);
}

Шаг 4

Передайте свойство, которое мы установили в верхней части каждого представления на шаге 1, в метод, который мы обновили на шаге 4.

<ul class="nav navbar-nav">
  @await Component.InvokeAsync(typeof(TopMenuViewComponent), new { activeMenu = ViewBag.CurrentPageName,  activeSubMenu = ViewBag.CurrentSubPageName })
</ul>

Шаг 5

Обновите представление Views/Shared/Components/TopMenu/Default.cshtml, чтобы установить класс active в dropdown-menu для текущего активного элемента подменю.

<ul class="dropdown-menu">
  @foreach (var subMenuItem in menuItem.Items) {
    <li class="@(Model.ActiveSubMenuItemName == subMenuItem.Name ? "active" : "")">
      <a href="@calculateMenuUrl(subMenuItem.Url)">
        @if (!string.IsNullOrWhiteSpace(subMenuItem.Icon))
        {
            <i class="@subMenuItem.Icon"></i>
        }
        @subMenuItem.DisplayName
      </a>
    </li>
  }
</ul>
person Jesse Johnson    schedule 28.08.2017