Abp添加菜單

在abp模板中添加菜單，EntityFramework+Angular.js模板，使用的Abp版本為3.8.1。

創建Abp項目模板，例如名稱叫做LawAndRegulation。

服務端添加菜單項

找到Mpa或者Spa項目，也就是LawAndRegulation.WebMpa或者LawAndRegulation.WebSpaAngular。

項目中找到LawAndRegulationNavigationProvider類，在類中找到SetNavigation方法，按照模板中提供的菜單添加方法添加MenuItemDefinition。

MenuItemDefinition即為我們需要添加的菜單項，菜單項包含幾個重要的屬性：

• 【name】，菜單項名稱，在View層添加菜單項時對應的名稱；
• 【displayName】，顯示名稱，本地化顯示在名稱，也就是多語言需要解釋的名稱；
• 【url】，導航的路由名稱；
• 【icon】，圖標名稱；
• 【requireAuthentication】，登陸認證及權限認證；

設置好這幾項后在服務端導航的內容已經設置完成。

示例代碼：

public class LawAndRegulationNavigationProvider : NavigationProvider
    {
        public override void SetNavigation(INavigationProviderContext context)
        {
            context.Manager.MainMenu
                .AddItem(
                new MenuItemDefinition(
                    "DictionaryManager",
                    L("DictionaryManager"),
                    url: "#DictionaryManager",
                    icon: "fa fa-info",
                    requiresAuthentication: true
                    )
                    );
        }

        private static ILocalizableString L(string name)
        {
            return new LocalizableString(name, LawAndRegulationConsts.LocalizationSourceName);
        }
    }

客戶端添加菜單

在LawAndRegulation.WebSpaAngular項目中找到App/Main/views/layout/sidebar-nav.js文件，在文件中編輯屬性menuItems，屬性menuItems為數組，在數組中添加對象通過createMenuItem方法，方法中參數：

• 1.本地化標題；
• 2.權限名稱；
• 3.圖標名稱；
• 4.路由名稱，也可以是Url鏈接；
• 5.子項集合，可選參數；

實例代碼：

vm.menuItems = [
                createMenuItem(App.localize("HomePage"), "", "home", "home"),
                createMenuItem(App.localize("Tenants"), "Pages.Tenants", "business", "tenants"),
                createMenuItem(App.localize("Users"), "Pages.Users", "people", "users"),
                createMenuItem(App.localize("Roles"), "Pages.Roles", "local_offer", "roles"),
                createMenuItem(App.localize("LawAndRegulation"), "", "info", "LawAndRegulation"),
                createMenuItem(App.localize("About"), "", "info", "about")
];

 其中LawAndRegulation為我們添加的菜單項。

客戶端添加路由

在WebSpaAngular項目中找到app.js文件，app.js文件在App/Mian/路徑下。

找到app.config，在function方法中找到回調函數中$stateProvider參數，調用參數的state方法。

state方法有兩個參數：

• 【navigationName】字符串，導航名稱；
• 【route】對象，對象包含三個屬性，服務端Url、客戶端頁面Url以及菜單名稱（本地化的名稱）；

設置完以上，客戶端路由已經設置完成。

實例代碼如下：

            $stateProvider
                .state('DictionaryManager', {
                    url: '/DictionaryManger',
                    templateUrl: '',
                    menu:'DictionaryManager'
                });

 添加多級菜單

服務器端

服務器端添加多級菜單非常方便，只需要調用MenuItemDefinition的方法AddItem，在第一節內容基礎上擴展，代碼如下：

public class LawAndRegulationNavigationProvider : NavigationProvider
    {
        public override void SetNavigation(INavigationProviderContext context)
        {
            context.Manager.MainMenu
                .AddItem(
                new MenuItemDefinition(
                    "DictionaryManager",
                    L("DictionaryManager"),
                    url: "#DictionaryManager",
                    icon: "fa fa-info",
                    requiresAuthentication: true
                    ).AddItem(
                    new MenuItemDefinition(
                        "Law",
                        L("Law"),
                        url: "#Law",
                        icon: "fa fa-info",
                        requiresAuthentication: true))
                        )
                    );
        }

        private static ILocalizableString L(string name)
        {
            return new LocalizableString(name, LawAndRegulationConsts.LocalizationSourceName);
        }
    }

客戶端添加路由

在第二節基礎上擴展app.js文件中關於路由的內容，代碼如下：

$stateProvider
                .state('DictionaryManager', {
                    url: '/DictionaryManger',
                    templateUrl: '',
                    menu:'DictionaryManager'
                })
                .state('Law', {
                    url: '/Law',
                    templateUrl: '/App/Main/views/LawAndRegulation/index.cshtml',
                    menu: 'Law'
                });

 客戶端添加多級菜單

在第三節的基礎上添加客戶端多級菜單，多級客戶端菜單其實就是在最后一個參數內添加一個菜單項數組：

vm.menuItems = [
                createMenuItem(App.localize("HomePage"), "", "home", "home"),
                createMenuItem(App.localize("Tenants"), "Pages.Tenants", "business", "tenants"),
                createMenuItem(App.localize("Users"), "Pages.Users", "people", "users"),
                createMenuItem(App.localize("Roles"), "Pages.Roles", "local_offer", "roles"),
                createMenuItem(App.localize("LawAndRegulation"), "", "info", "LawAndRegulation",
[createMenuItem(App.localize("Law"), "", "info", "Law")]),
                createMenuItem(App.localize("About"), "", "info", "about")
];