ABP Starter Series (6)--Define navigation menu

ABP Starter Series Catalogue-A practical walkthrough of learning ABP Framework

We have added a "navigation menu" for the task list by completing the Add and delete changes and page display.
In previous projects, you might manually add a tag to the layout page to create a navigation menu, which is also a way, but if you want to decide whether to display a menu for different user permissions, it is inconvenient to control it directly in the layout page.
However, ABP has considered this for everyone, integrating common ways to create and display menus. Its main code is integrated in the Abp.Application.Navigation namespace, the corresponding source in this.
Below we will comb how the navigation menu is implemented and used. first, how to use the ABP Integrated navigation menu

For our "task List" Deom, we need to add a menu entry for the "task List" on the navigation bar.

1. Open the Web presentation layer and navigate to App_start/xxxnavigationprovider.cs.

    public class Learningmpaabpnavigationprovider:navigationprovider {public override void Setnavigation (in Avigationprovidercontext context) {context. Manager.mainmenu. AddItem (New Menuitemdefinition ("Home", L ("homepage") , url: "", Icon: "FA fa-home", Requiresauthenticat Ion:true)). AddItem (New Menuitemdefinition ("Tenants", L ("Tenants "), URL:" Tenants ", Icon:" FA fa-globe ", REQUIREDP ermissionName:PermissionNames.Pages_Tenants)).
                        AddItem (New Menuitemdefinition ("Users", L ("Users"), Url: "Users", Icon: "FA fa-users", RequiredPermissionName:PermissionNames.Pa ges_users)).
                        AddItem (New Menuitemdefinition ("About", L ("about"),
                URL: "About", Icon: "FA Fa-info")
    ); }
}

Home, tenants, Users, about four menus are defined by default in this file. If you look at it, you will notice that the Home menu is set to Requiresauthentication:true, that is, the menu will not be displayed until you log in. The Tenants and Users menu sets the Requiredpermissionname property, which displays the menu only if the user has the specified permissions. The About menu is not limited and is displayed by default.
Each menu item is a menuitemdefinition, which mainly includes name (unique name), DisplayName (localized display name), URL (menu jump), icon (Specify menu icon).
Explained here, everyone can draw a gourd, add a menu.

2. Add a [Task List] menu item

AddItem (
  new Menuitemdefinition (
      "TaskList",
      L ("Task List"),
      URL: "Tasks/index",
      icon: "FA Fa-tasks ",
      requiresauthentication:true
  )

Save and refresh the page to see the new Task List menu.

PS: The page appears as a Task List because we do not maintain localized resource files. Add a new named "Task list" in the corresponding localization configuration file. For example, in the Chinese localization file to add
<text name= "Task List" value= "Checklist"/>, restart the site and switch the language to Chinese.

II. code Structure of the ABP Integrated navigation menu

1. First look at the type dependency diagram of the relevant code

The analysis found that the ABP integrated navigation menu actually applied the combined design pattern.
Where menudefinition is the root node, menuitemdefinition is a branch node, where Menuitemdefinition maintains a collection of lists that, when the collection is empty, Menuitemdefinition is the leaf node.

2. As can be seen from the figure, it is mainly composed of the following parts:menudefinition/menuitemdefinition: Menu/menu item definition. Where menu items include name (unique name), DisplayName (localized display name), URL (menu jump), icon (Specify menu icon). In addition, you can restrict menu items to be visible only to logged-in users by specifying Requiresauthentication=true, and you can specify requiredpermissionname to limit the menu to be visible when a user has a permission.Usermenu/usermenuitem: Encapsulates a collection of menus/submenus for display to the user.inavigationconfiguration/navigationconfiguration: Navigation configuration, maintains a list of navigationprovider.Navigationprovider: Provider mode (separating the definition and implementation of the API). Abstract class, defines the Setnavigation method, implements the class in the project that needs to set the navigation, and registers the implementation of ***navigationprovider in the corresponding module in the Preinitialize method.Inavigationmanager/navigationmanager: A dictionary is defined in the interface to store all the menu items defined in the application, and a MainMenu. Injected a reference to the Inavigationconfiguration, The Initialize method in Navigationmanager iterates through the Navigationprovider list of inavigationconfiguration configurations for the initialization of the menu.
Iusernavigationmanager/usernavigationmanager: is a package for the Navigationmanager. The overloaded method of Getmenuasync is defined in the interface, which is used to get the menu of the specified user.Inavigationprovidercontext/navigationprovidercontext: Encapsulates the context class for Inavigationmanager, which is used to pass parameters.Iii. Specific implementation of the ABP Integrated navigation menu

Core Logic: Navigationmanager traverse the list of Navigationprovider maintained in Navigationconfiguration, and call the Navigationprovider implementation of the Setnavigation method to complete the navigation menu initialization.

Navigationmanager is responsible for initializing the menu

Navigationconfiguration is responsible for maintaining the Navigationprovider implementation list.

The realization of concrete navigationprovider

Register the specific navigtionprovider to the list of inavigationconfiguration maintenance in the corresponding module.

Usernavigationmanager further encapsulates the Navigationmanager, creating and fetching menus based on user and permissions.

In Layoutcontroller, the menu is fetched by injecting a reference to Iusernavigationmanager, and the final rendering is made by the _topmenu Division page.

public class Layoutcontroller:learningmpaabpcontrollerbase {private ReadOnly Iusernavigationmanager _userna
        Vigationmanager;
        Private ReadOnly Isessionappservice _sessionappservice;
        Private ReadOnly imultitenancyconfig _multitenancyconfig;

        Private ReadOnly Ilanguagemanager _languagemanager; Public Layoutcontroller (Iusernavigationmanager Usernavigationmanager, Isessionappservice session
            Appservice, Imultitenancyconfig multitenancyconfig, Ilanguagemanager Languagemanager) {
            _usernavigationmanager = Usernavigationmanager;
            _sessionappservice = Sessionappservice;
            _multitenancyconfig = Multitenancyconfig;
        _languagemanager = Languagemanager; } [childactiononly] public partialviewresult topmenu (String activemenu = "") {var mo
                      del = new Topmenuviewmodel {      MainMenu = Asynchelper.runsync (() = _usernavigationmanager.getmenuasync ("MainMenu", Abpsession.touseridentifier

            ())), activemenuitemname = Activemenu};
        Return Partialview ("_topmenu", model); }
}

So far, we have finished combing and summarizing the navigation menus.