ASP.NET Core布局页面多个侧边栏菜单

时间:2015-10-13 14:52:54

标签: c# asp.net-core menu sidebar asp.net-core-viewcomponent

所以问题就在这里,用户可以选择六个链接中的一个,就像这样 enter image description here

在他选择链接1的特定链接后,他应该被重定向到主页,侧边栏菜单如下所示:

enter image description here

如果他选择例如Link 2,他的菜单应如下所示:

enter image description here

无论如何,我不知道如何实现这个,因为我的菜单位于_Layout.cshtml里面,View Component功能可以帮我解决这个问题吗?

1 个答案:

答案 0 :(得分:2)

我自己使用viewComponent功能找到了解决方案。

首先,我必须在Startup.cs中重新配置我的默认路由,如下所示:

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

在内部布局之后,我调用了viewComponent,如下所示:

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

我的viewComponent方法如下:

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

_Link1Menu视图如下所示:

<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>

和_Link2Menu视图如下所示:

<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>

在此之后,当你点击URL / Link1 / Home / Index时 - 你将从_Link1Menu视图中获取菜单,当你点击URL / Link2 / Home / Index时 - 你将从_Link2Menu视图中获取菜单... < / p>