ASP.NET Core布局页面多个侧边栏菜单 [英] ASP.NET Core layout page multiple sidebar menu

问题描述

这就是问题所在，用户可以选择六个链接之一，就像这样

在选择特定链接(例如链接1)后，应使用侧边栏菜单将其重定向到首页，如下所示:

例如，如果他选择链接2"，则他的菜单应如下所示:

无论如何，由于我的菜单位于_Layout.cshtml中，因此我不知道如何实现此目的，查看组件"功能可以帮助我解决此问题吗?

解决方案

我自己使用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>

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

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

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

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

解决方案

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

这篇关于ASP.NET Core布局页面多个侧边栏菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！