Search code examples
c#asp.net-coremenusidebarasp.net-core-viewcomponent

ASP.NET Core layout page multiple sidebar menu


So here's the problem, user can select one of six links, something like this enter image description here

after he select specific link for example Link 1 he should be redirected to home page with sidebar menu looking like this:

enter image description here

If he select for example Link 2 his menu should look like this:

enter image description here

Anyway, i got no idea how to achieve this since my menu is located inside _Layout.cshtml, could View Component feature help me with this issue??


Solution

  • I found solution myself using viewComponent feature.

    First of all i had to reconfigure my default route inside Startup.cs to look like this:

    app.UseMvc(routes =>
    {
        routes.MapRoute(
            name: "defaultLink",
            template: "{link='Link1'}/{controller=Home}/{action=Index}/{id?}");
    });
    

    After that inside layout I invoked viewComponent like this:

    // invoke viewComponent in layout and pass url parameter to it    
    @Component.Invoke("SidebarMenu", ViewContext.RouteData.Values["link"])
    

    and my viewComponent method looks like :

    public IViewComponentResult Invoke(string link)
    {
        switch (link)
        {
            case "Link1":
                return View("_Link1Menu");
            case "Link2":
                return View("_Link2Menu");             
            default:
                return View("_Link1Menu");
        }
    }
    

    _Link1Menu view looks like this:

    <li>
        <ul class="sub-menu">
            <li>
                <a href="/Link1/Home/SomeMethod">
                    Test1MenuLink1
                </a>
            </li>
            <li>
                <a href="/Link1/Home/SomeOtherMethod">
                    Test1MenuLink2
                </a>
            </li>
        </ul>
    </li>
    

    and _Link2Menu view looks like this:

    <li>
        <ul class="sub-menu">
            <li>
                <a href="/Link1/Home/SomeMethod">
                    Test2MenuLink1
                </a>
            </li>
            <li>
                <a href="/Link1/Home/SomeOtherMethod">
                    Test2MenuLink2
                </a>
            </li>
        </ul>
    </li>
    

    After this, when u hit URL /Link1/Home/Index - u'll get menu from _Link1Menu view, and when u hit URL /Link2/Home/Index - u'll get menu from _Link2Menu view...