## 6.4 ABP表现层 - 导航栏 每一个WEB应用程序都有导航菜单，Abp也为用户提供了通用的创建和显示菜单方式。 ### 6.4.1 创建菜单 一个应用程序可能包含不同的模块，而每个模块都可能有它自己的菜单项。在Abp中，需要创建一个派生自NavigationProvider的类来定义一个菜单项。 假设我们有一个这样的主菜单： + Tasks + Reports + Administration + 1 User Management + 2 Role Management 由上可知，Administration菜单项有两个子菜单项。对应的生成方法如下： ```csharp public class SimpleTaskSystemNavigationProvider : NavigationProvider { public override void SetNavigation(INavigationProviderContext context) { context.Manager.MainMenu .AddItem( new MenuItemDefinition( "Tasks", new LocalizableString("Tasks", "SimpleTaskSystem"), url: "/Tasks", icon: "fa fa-tasks" ) ).AddItem( new MenuItemDefinition( "Reports", new LocalizableString("Reports", "SimpleTaskSystem"), url: "/Reports", icon: "fa fa-bar-chart" ) ).AddItem( new MenuItemDefinition( "Administration", new LocalizableString("Administration", "SimpleTaskSystem"), icon: "fa fa-cogs" ).AddItem( new MenuItemDefinition( "UserManagement", new LocalizableString("UserManagement", "SimpleTaskSystem"), url: "/Administration/Users", icon: "fa fa-users", requiredPermissionName: "SimpleTaskSystem.Permissions.UserManagement" ) ).AddItem( new MenuItemDefinition( "RoleManagement", new LocalizableString("RoleManagement", "SimpleTaskSystem"), url: "/Administration/Roles", icon: "fa fa-star", requiredPermissionName: "SimpleTaskSystem.Permissions.RoleManagement" ) ) ); } } ``` MenuItemDefinition可以有一个唯一的名字，一个用于本地化显示的名字，一个url和一个icon，此外： + 菜单项可能需要与特定用户权限相结合显示菜单(请查看[权限验证](225843)文档)，**requiredPermissionName** 属性，可以在这种情况下使用 + 菜单项可以依赖于[功能项](225844)，**featureDependency** 属性，可以在这种情况下使用 + 菜单项可以定义一个 **customData** 和 **order** InavigationProviderContext方法能够获取现有的菜单项、添加菜单或菜单项。因此，不同的模块可以添加各自的菜单。 在应用程序中可能有一个或者多个菜单，**context.Manager.MainMenu** 是默认主菜单的引用。我们可以使用 **context.Manager.Menus** 属性创建和添加更多的菜单。 #### 注册导航提供器 创建完成导航后，我们应该在ABP的 **PreInitialize** 配置它： ```csharp Configuration.Navigation.Providers.Add<SimpleTaskSystemNavigationProvider>(); ``` ### 6.4.2 显示菜单 **IUserNavigationManager** 可以注入、获取和显示菜单。因此，我们可以在服务器端创建菜单。 Abp自动生成的 **javascript API** 使得用户能够在客户端获取菜单，对应的方法和对象在命名空间 **abp.nav** 中。例如，在客户端使用 **abp.nav.menus.MainMenu** 可以用来获取主菜单。所以我们可以在客户端创建菜单。 ABP模板使用该系统为用户创建和显示菜单。请试着创建模板并且查看源代码以了解更多信息。