【问题标题】:ASP.NET Core layout page multiple sidebar menuASP.NET Core 布局页面多侧边栏菜单
【发布时间】:2016-01-11 09:27:17
【问题描述】:

所以问题来了,用户可以选择六个链接之一,就像这样

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

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

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

【问题讨论】:

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


    【解决方案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 视图获取菜单...

    【讨论】:

      猜你喜欢
      • 2019-03-19
      • 1970-01-01
      • 1970-01-01
      • 2014-07-03
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多