ABP入門系列目錄——學習Abp框架之實操演練
源碼路徑：Github-LearningMpaAbp

---

完成了增刪改查以及頁面展示，這一節(jié)我們來為任務(wù)清單添加【導航菜單】。
在以往的項目中，大家可能會手動在layout頁面中添加一個a標簽來新增導航菜單，這也是一種方式，但是如果要針對不同用戶不同權(quán)限決定是否顯示某個菜單，那么直接在layout頁面中去控制就不方便了。
不過，ABP已經(jīng)為大家考慮了這一點，集成了通用的創(chuàng)建和顯示菜單的方式。其主要代碼集成在Abp.Application.Navigation命名空間下，相應源碼在此。
下面我們就來梳理下導航菜單是如何實現(xiàn)和使用。

一、如何使用Abp集成的導航菜單

針對我們的『任務(wù)清單』Deom，我們需要在導航欄上添加一個【Task List】的菜單入口。

1.打開web展現(xiàn)層，定位到App_Start/xxxNavigationProvider.cs。

public class LearningMpaAbpNavigationProvider : NavigationProvider{public override void SetNavigation(INavigationProviderContext context){context.Manager.MainMenu.AddItem(new MenuItemDefinition("Home",L("HomePage"),url: "",icon: "fa fa-home",requiresAuthentication: true)).AddItem(new MenuItemDefinition("Tenants",L("Tenants"),url: "Tenants",icon: "fa fa-globe",requiredPermissionName: PermissionNames.Pages_Tenants)).AddItem(new MenuItemDefinition("Users",L("Users"),url: "Users",icon: "fa fa-users",requiredPermissionName: PermissionNames.Pages_Users)).AddItem(new MenuItemDefinition("About",L("About"),url: "About",icon: "fa fa-info"));} }

該文件中默認定義了Home、Tenants、Users、About四個菜單。注意觀察的話，想必會注意到Home菜單設(shè)置了requiresAuthentication: true，即只有登陸后才會顯示該菜單。Tenants和Users菜單設(shè)置了requiredPermissionName屬性，即用戶具有指定的權(quán)限時才顯示菜單。About菜單沒有限制，默認顯示。
每一個菜單項都是一個MenuItemDefinition，其中主要包括Name（唯一名稱），DisplayName（本地化顯示名稱），Url（菜單跳轉(zhuǎn)），Icon（指定菜單圖標）。
解釋到這里，大家自己都可以依葫蘆畫瓢，新增菜單了。

2.添加[Task List]菜單項

AddItem(new MenuItemDefinition("TaskList",L("Task List"),url: "Tasks/Index",icon: "fa fa-tasks",requiresAuthentication: true)

保存，刷新頁面即可看到新增的[Task List]菜單了。

?

PS:之所以頁面上會顯示為[Task List]，是因為我們并沒有維護本地化資源文件。在對應的本地化配置文件中新增名為"Task List"的即可。比如在中文的本地化文件中添加
<text name="Task List" value="任務(wù)清單" />，重新啟站點，將語言切換為中文。

---

二、Abp集成的導航菜單的代碼結(jié)構(gòu)

1.先來看看相關(guān)代碼的類型依賴關(guān)系圖

?

類型依賴關(guān)系圖

?

分析發(fā)現(xiàn)，abp集成的導航菜單實際上是應用了組合設(shè)計模式。
其中MenuDefinition為根節(jié)點，MenuItemDefinition為樹枝節(jié)點，其中MenuItemDefinition中也維護了一個List<MenuItemDefinition>的集合，當集合為空時，MenuItemDefinition即為樹葉節(jié)點。

2.從圖中可以看出，主要是由以下幾部分組成：

• MenuDefinition/MenuItemDefinition：菜單/菜單項定義。其中菜單項包括Name（唯一名稱），DisplayName（本地化顯示名稱），Url（菜單跳轉(zhuǎn)），Icon（指定菜單圖標）。此外，可以通過指定RequiresAuthentication=true來限制菜單項只有對登錄用戶可見，同時也可以指定RequiredPermissionName來限定當用戶有某個權(quán)限時菜單才可見。
• UserMenu/UserMenuItem：封裝了用于顯示給用戶的菜單/子菜單集合。
• INavigationConfiguration/NavigationConfiguration：導航配置，維護了NavigationProvider的列表。
• NavigationProvider：Provider模式（將api的定義和實現(xiàn)分離）。抽象類，定義了SetNavigation方法，在需要設(shè)置導航的項目中實現(xiàn)該類，并在對應的模塊中PreInitialize方法中注冊***NavigationProvider的實現(xiàn)。
• INavigationManager/NavigationManager：其中接口中定義了一個Dictionary，用來存儲應用程序中定義的所有菜單項，和一個MainMenu。注入了對INavigationConfiguration的引用，以便在NavigationManager中的Initialize方法遍歷INavigationConfiguration配置的NavigationProvider列表進行菜單的初始化。
  IUserNavigationManager/UserNavigationManager：是對NavigationManager的一次封裝。其中接口中定義了GetMenuAsync的重載方法，用來獲取指定用戶的菜單。
• INavigationProviderContext/NavigationProviderContext：封裝了INavigationManager的上下文類，用于傳參。

---

三、Abp集成的導航菜單的具體實現(xiàn)

核心邏輯：NavigationManager遍歷NavigationConfiguration中維護的NavigationProvider列表，并調(diào)用NavigationProvider實現(xiàn)的SetNavigation方法來完成導航菜單的初始化。

NavigationManager負責初始化菜單

?

NavigationManager.cs

NavigationConfiguration負責維護NavigationProvider的實現(xiàn)列表。

?

NavigationConfiguration.cs

具體的NavigationProvider的實現(xiàn)

?

xxxxNavigationProvider.cs

在對應的模塊中注冊具體的NavigtionProvider到INavigationConfiguration維護的列表中。

?

xxxxAbpWebModule.cs

UserNavigationManager對NavigationManager進行了進一步的封裝，根據(jù)用戶和權(quán)限去創(chuàng)建和獲取菜單。

?

IUserNavigationManager.cs

在LayoutController中，通過注入對IUserNavigationManager的引用，來獲取菜單，并由_TopMenu分部頁進行最終呈現(xiàn)。

public class LayoutController : LearningMpaAbpControllerBase{private readonly IUserNavigationManager _userNavigationManager;private readonly ISessionAppService _sessionAppService;private readonly IMultiTenancyConfig _multiTenancyConfig;private readonly ILanguageManager _languageManager;public LayoutController(IUserNavigationManager userNavigationManager, ISessionAppService sessionAppService, IMultiTenancyConfig multiTenancyConfig,ILanguageManager languageManager){_userNavigationManager = userNavigationManager;_sessionAppService = sessionAppService;_multiTenancyConfig = multiTenancyConfig;_languageManager = languageManager;}[ChildActionOnly]public PartialViewResult TopMenu(string activeMenu = ""){var model = new TopMenuViewModel{MainMenu = AsyncHelper.RunSync(() => _userNavigationManager.GetMenuAsync("MainMenu", AbpSession.ToUserIdentifier())),ActiveMenuItemName = activeMenu};return PartialView("_TopMenu", model);} }

---

至此，我們完成了對導航菜單的梳理和總結(jié)。

?

11人點贊

?

Abp架構(gòu)入門系列

?

作者：圣杰
鏈接：https://www.jianshu.com/p/24e6f6e8dbdb
來源：簡書
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請注明出處。

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎勵來咯，堅持創(chuàng)作打卡瓜分現(xiàn)金大獎

總結(jié)

以上是生活随笔為你收集整理的ABP入门系列（6）——定义导航菜单的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。