Abp添加菜单

匿名 (未验证) 提交于 2019-12-02 22:06:11

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

客户端添加路由

在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'                 });

文章来源: Abp添加菜单
标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!