6.4 ABP表现层 - 导航栏

每一个WEB应用程序都有导航菜单,Abp也为用户提供了通用的创建和显示菜单方式。

6.4.1 创建菜单

一个应用程序可能包含不同的模块,而每个模块都可能有它自己的菜单项。在Abp中,需要创建一个派生自NavigationProvider的类来定义一个菜单项。

假设我们有一个这样的主菜单:

  • Tasks

  • Reports

  • Administration

    • 1 User Management

    • 2 Role Management

由上可知,Administration菜单项有两个子菜单项。对应的生成方法如下:

  1. public class SimpleTaskSystemNavigationProvider : NavigationProvider
  2. {
  3. public override void SetNavigation(INavigationProviderContext context)
  4. {
  5. context.Manager.MainMenu
  6. .AddItem(
  7. new MenuItemDefinition(
  8. "Tasks",
  9. new LocalizableString("Tasks", "SimpleTaskSystem"),
  10. url: "/Tasks",
  11. icon: "fa fa-tasks"
  12. )
  13. ).AddItem(
  14. new MenuItemDefinition(
  15. "Reports",
  16. new LocalizableString("Reports", "SimpleTaskSystem"),
  17. url: "/Reports",
  18. icon: "fa fa-bar-chart"
  19. )
  20. ).AddItem(
  21. new MenuItemDefinition(
  22. "Administration",
  23. new LocalizableString("Administration", "SimpleTaskSystem"),
  24. icon: "fa fa-cogs"
  25. ).AddItem(
  26. new MenuItemDefinition(
  27. "UserManagement",
  28. new LocalizableString("UserManagement", "SimpleTaskSystem"),
  29. url: "/Administration/Users",
  30. icon: "fa fa-users",
  31. requiredPermissionName: "SimpleTaskSystem.Permissions.UserManagement"
  32. )
  33. ).AddItem(
  34. new MenuItemDefinition(
  35. "RoleManagement",
  36. new LocalizableString("RoleManagement", "SimpleTaskSystem"),
  37. url: "/Administration/Roles",
  38. icon: "fa fa-star",
  39. requiredPermissionName: "SimpleTaskSystem.Permissions.RoleManagement"
  40. )
  41. )
  42. );
  43. }
  44. }

MenuItemDefinition可以有一个唯一的名字,一个用于本地化显示的名字,一个url和一个icon,此外:

  • 菜单项可能需要与特定用户权限相结合显示菜单(请查看权限验证文档),requiredPermissionName 属性,可以在这种情况下使用

  • 菜单项可以依赖于功能项featureDependency 属性,可以在这种情况下使用

  • 菜单项可以定义一个 customDataorder

InavigationProviderContext方法能够获取现有的菜单项、添加菜单或菜单项。因此,不同的模块可以添加各自的菜单。

在应用程序中可能有一个或者多个菜单,context.Manager.MainMenu 是默认主菜单的引用。我们可以使用 context.Manager.Menus 属性创建和添加更多的菜单。

注册导航提供器

创建完成导航后,我们应该在ABP的 PreInitialize 配置它:

  1. Configuration.Navigation.Providers.Add<SimpleTaskSystemNavigationProvider>();

6.4.2 显示菜单

IUserNavigationManager 可以注入、获取和显示菜单。因此,我们可以在服务器端创建菜单。

Abp自动生成的 javascript API 使得用户能够在客户端获取菜单,对应的方法和对象在命名空间 abp.nav 中。例如,在客户端使用 abp.nav.menus.MainMenu 可以用来获取主菜单。所以我们可以在客户端创建菜单。

ABP模板使用该系统为用户创建和显示菜单。请试着创建模板并且查看源代码以了解更多信息。