Question

使用其中一个ASP.Net MVC5模板，如何在从多级菜单中选择项目时保持菜单选择？

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

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

Answer 1

解决此解决方案的一种方法是向每个视图添加另一个属性以指定子菜单项页面名称，将子菜单项页面名称传递给TopMenu view component然后设置相应子菜单项的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>

保持多级菜单选择

1 个答案: