c# - 如何在 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
                               )
                       )
            )

标签： c#menunavigationaspnetboilerplate

Answer 1

我想这就是你想要的：

• 客户关系管理模块
  • 公司
  • 报价单
    • 列表
      • 创造
  • 潜在客户

首先，每个都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 级菜单项，请更改以下行：

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