0

使用 ASP.Net MVC5 模板之一，如何在从多级菜单中选择项目时维护菜单选择？

单击子菜单时，页面会加载，但没有指示单击了哪个菜单项。可以展开菜单并最终显示指示器，但如何将其设置为默认行为？

如果用户单击根级菜单项，则在页面加载后，会清楚地指示单击了哪个菜单项。

4

1 回答 1

1

解决此解决方案的一种方法是向每个视图添加另一个属性以指定子菜单项页面名称，将子菜单项页面名称传递给TopMenu 视图组件，然后active为适当的子菜单项设置 CSS 类。

有许多其他方法可以解决这个问题，但这种方法似乎相当快速和简单，因为模板已经创建了用于根级导航的框架；我们只是在扩展它。

以下步骤将引导您完成此方法：

步骤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>
于 2017-08-28T04:15:06.243 回答