ASP.NET 核心布局页面多侧边栏菜单

Question

所以问题来了，用户可以 select 六个 link 之一，像这样

在他 select 具体 link 例如 Link 1 之后，他应该被重定向到主页，侧边栏菜单如下所示：

如果他 select 例如 Link 2 他的菜单应该是这样的：

无论如何，我不知道如何实现这一点，因为我的菜单位于 _Layout.cshtml 内，查看组件功能可以帮助我解决这个问题吗？

Answer 1

我使用 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 视图中的菜单...

ASP.NET 核心布局页面多侧边栏菜单

ASP.NET Core layout page multiple sidebar menu

c#

menu

sidebar

asp.net-core

asp.net-core-viewcomponent