如何在NavigationProvider中对齐菜单？

Question

美好的一天。

我正在使用MVC Core ASP.NET Boilerplate 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 公司 语录 名单 创建 信息

首先，每个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

要支持第3级菜单项，请更改these lines：

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