Abp添加菜单

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")
];