マルチレベルメニューの選択を維持する

Question

ASP.Net MVC5テンプレートの1つを使用して、マルチレベルメニューからアイテムを選択するときに、どのようにメニュー選択を維持できますか？

サブメニューをクリックすると、ページが読み込まれますが、どのメニュー項目がクリックされたかはわかりません。メニューを展開することは可能ですが、最終的にはインジケータが表示されますが、これをどのようにデフォルトの動作として設定できますか？

ユーザーがルートレベルのメニュー項目をクリックすると、ページが読み込まれた後、どのメニュー項目がクリックされたかが明確に示されます。

Answer 1

、適切なためactive CSSクラスを設定し、サブメニューのページ名を指定するために、各ビューに別のプロパティを追加TopMenuview componentにサブメニューのページ名を渡すことであろうこのソリューションを解決する1つの方法サブメニュー項目。

この質問を解決するには他にも多くの方法がありますが、テンプレートが既にルートレベルのナビゲーションに使用するフレームワークを作成しているため、このアプローチはかなり簡単で簡単です。単にそれを拡張しています。このアプローチかかわらず、あなたを歩いていく

次の手順：

ステップ1

現在アクティブなサブメニューの項目名を指定し、各ビューにプロパティを追加します。次のスニペットは、各ビューページの上部がどのように表示されるかの例です。

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

ステップ2

現在アクティブなサブメニュー項目名を格納するTopMenuViewModelクラスに、この場合ActiveSubMenuItemNameで、プロパティを追加します。

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

ステップ3

現在アクティブなサブメニューの項目名を受け入れるようにTopMenuViewComponentクラスのInvokeAsyncメソッドにパラメータを追加します。

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>