如何在NavigationProvider中对齐菜单？

Question

日安。

我使用的是MVC核心ASP.NET样板v0.9.6。

我正在尝试对齐一个边菜单，如下所示：

• 项目1
• 第2项
  • 项目2.1
    • 项目2.1.1

​

​

• 项目3

当前代码显示菜单的方式如下：

• 项目1
• 第2项
  • 项目2.1
  • 项目2.1.1

​

• 项目3

以下是代码：

// Menu for CRM Module
        .AddItem(
                new MenuItemDefinition(
                    "CRMModule",
                    L("CRMModule"),
                    url: "CRMModule",
                    icon: "fa fa-wrench",
                    requiredPermissionName: PermissionNames.Pages_SparesRequirements
                        ).AddItem(
                            new MenuItemDefinition(
                                "Companies",
                                L("Companies"),
                                url: "Company",
                                icon: "fa fa-building",
                                requiredPermissionName: PermissionNames.Pages_Companies
                                            )

                        ).AddItem(
                             new MenuItemDefinition(
                                "Quotations",
                                L("Quotations"),
                                url: "Quotation",
                                icon: "fa fa-list-alt",
                                requiredPermissionName: PermissionNames.Pages_Quotations
                                ).AddItem(
                                         new MenuItemDefinition(
                                         "Quotations",
                                         L("List"),
                                         url: "Quotation",
                                         icon: "fa fa-table",
                                         requiredPermissionName: PermissionNames.Pages_Quotations
                                         )
                                ).AddItem(
                                        new MenuItemDefinition(
                                        "Quotations",
                                        L("Create"),
                                        url: "Quotation/CreateQuote",
                                        icon: "fa fa-plus",
                                        requiredPermissionName: PermissionNames.Pages_Quotations
                                        )
                                )

                        ).AddItem(
                            new MenuItemDefinition(
                                "Leads",
                                L("Leads"),
                                url: "Lead",
                                icon: "fa fa-building-o",
                                requiredPermissionName: PermissionNames.Pages_Leads
                               )
                       )
            )

Answer 1

我想这就是你想要的：

• CRMModule
  • 公司
  • 报价
    • 列表
      • 创建

​

​

- Leads

​

首先，每个MenuItemDefinition应该有一个唯一的Name (第一个参数)。

其次，当你使用适当的缩进时，你需要做什么就变得很明显了。

先于

).AddItem(
    new MenuItemDefinition(
        "Quotations", // "List"
        L("List"),
        url: "Quotation",
        icon: "fa fa-table",
        requiredPermissionName: PermissionNames.Pages_Quotations
    ) // Remove
).AddItem(
    new MenuItemDefinition(
        "Quotations", // "Create"
        L("Create"),
        url: "Quotation/CreateQuote",
        icon: "fa fa-plus",
        requiredPermissionName: PermissionNames.Pages_Quotations
    )
)

后

).AddItem(
    new MenuItemDefinition(
        "List",
        L("List"),
        url: "Quotation",
        icon: "fa fa-table",
        requiredPermissionName: PermissionNames.Pages_Quotations
    ).AddItem(                                                       // Indented
        new MenuItemDefinition(                                      // Indented
            "Create",                                                // Indented
            L("Create"),                                             // Indented
            url: "Quotation/CreateQuote",                            // Indented
            icon: "fa fa-plus",                                      // Indented
            requiredPermissionName: PermissionNames.Pages_Quotations // Indented
        ) // Added
    )
)

SideBarNav/Default.cshtml

若要支持第三级菜单项，请更改这些线

<a href="@calculateMenuUrl(subSubMenuItem.Url)">
    @subSubMenuItem.DisplayName
</a>

至：

@if (subSubMenuItem.Items.IsNullOrEmpty())
{
    <a href="@calculateMenuUrl(subSubMenuItem.Url)">
        @if (!string.IsNullOrWhiteSpace(subSubMenuItem.Icon))
        {
            <i class="material-icons">@subSubMenuItem.Icon</i>
        }
        <span>@subSubMenuItem.DisplayName</span>
    </a>
}
else
{
    <a href="javascript:void(0);" class="menu-toggle">
        @if (!string.IsNullOrWhiteSpace(subSubMenuItem.Icon))
        {
            <i class="material-icons">@subSubMenuItem.Icon</i>
        }
        <span>@subSubMenuItem.DisplayName</span>
    </a>
    <ul class="ml-menu">
        @foreach (var subsubSubMenuItem in subSubMenuItem.Items)
        {
            <li class="@(Model.ActiveMenuItemName == subsubSubMenuItem.Name ? "active" : "")">
                <a href="@calculateMenuUrl(subsubSubMenuItem.Url)">
                    @subsubSubMenuItem.DisplayName
                </a>
            </li>
        }
    </ul>
}

Answer 2

看起来，Create子菜单是您希望降低一个级别的菜单，因此它将在List项下定义：

new MenuItemDefinition(
"List", // so it will be defined under "List"
L("Create"),
url: "Quotation/CreateQuote",
icon: "fa fa-plus",
requiredPermissionName: PermissionNames.Pages_Quotations
)