DDD開發框架ABP之導航菜單

      每一個網站都會有導航菜單（通常不止一個），ASP.NET Boilerplate（后文簡稱ABP）提供了一種創建和使用菜單的通用架構，利用架構我們可以方便的創建菜單並顯示給用戶。本文主要說明菜單的創建，以及結合AngularJS上菜單的顯示，如何從數據庫動態取得菜單數據不再本文范圍。

創建菜單

      一個應用程序可能有多個不同的模塊，每個模塊有它對應的菜單項。為了定義這些菜單項，我們需要創建一個繼承自 NavigationProvider 的子類。
      假設我們有一個如下所示的主菜單：

   工作台
   任務
   留言板
   系統管理
      用戶管理
      角色管理

      這里面系統管理菜單有兩個子菜單項。建立一個這樣菜單的類ZeroNavigationProvider，如下：

public class ZeroNavigationProvider : NavigationProvider
{
      public override void SetNavigation(INavigationProviderContext context)
      {
            context.Manager.MainMenu
                  .AddItem(
                        new MenuItemDefinition(
                              "Dashboard",
                              new LocalizableString("HomePage", "Zero"),
                              url: "#/",
                              icon: "icon-home"
                        )
                  ).AddItem(
                        new MenuItemDefinition(
                              "Task",
                              new LocalizableString("Task", "Zero"),
                              url: "#/tasklist",
                              icon: "icon-tag"
                        )
                  ).AddItem(
                        new MenuItemDefinition(
                              "QA",
                              new LocalizableString("QA", "Zero"),
                              url: "#/qa",
                              icon: "icon-question"
                        )
                  ).AddItem(
                        new MenuItemDefinition(
                              "SystemAdmin",
                              new LocalizableString("SystemAdmin", "Zero"),
                              icon: "icon-wrench"
                        ).AddItem(
                              new MenuItemDefinition(
                                    "UserManage",
                                    new LocalizableString("UserManage", "Zero"),
                                    url: "/systemadmin/users",
                                    icon: "icon-users"
                              )
                        ).AddItem(
                              new MenuItemDefinition(
                                    "RoleManage",
                                    new LocalizableString("RoleManage", "Zero"),
                                    url: "/systemadmin/role",
                                    icon: "icon-briefcase"
                              )
                        );
               }
 }

      一個MenuItemDefinition對象可能擁有一個唯一的命名，一個本地化顯示的名稱，一個URL地址以及一個圖標。一個菜單項也可能需要擁有特定權限的用戶才可以瀏覽。

new MenuItemDefinition(
    "RoleManage",
    new LocalizableString("RoleManage", "Zero"),
    url: "/systemadmin/role",
    icon: "icon-briefcase",
    requiredPermissionName: "systemadmin",
    requiresAuthentication:true
)

      本地化顯示的名稱來自於資源文件，LocalizableString第二個參數就是系統中資源文件的名稱。這時候需要確保資源文件存在，比如：Zero-zh-CN.xml，而且根據第一個代碼參數必須能夠正常取出對應的文本內容，否則菜單可能無法顯示。
INavigationProviderContext 提供了一些方法接口，用於得到已經存在的菜單項，添加菜單以及子菜單。因此不同的模塊能夠添加自己的菜單項。
      一個應用程序可能有多個菜單，context.Manager.MainMenu 只是對應默認的主菜單。我們可以利用 context.Manager.Menus 屬性自己創建並添加更多的菜單。
      創建了 NavigationProvider 之后，我們需要將它注冊到ABP的配置項中，這個動作應該放在我們模塊的 PreInitialize 事件中。比如我們網站的Web層有一個 ZeroWebModule，在其中添加代碼：

public override void PreInitialize()
{
    // other configuration code, like localization
    // Configure navigation/menu
    Configuration.Navigation.Providers.Add<ZeroNavigationProvider>();
}

顯示菜單

      我們能夠在服務器端創建菜單。Abp.Application.Navigation 命名空間下的 IUserNavigationManager 接口通過依賴注入，實現菜單項的取得和顯示。服務器端創建菜單通常用於ASP.NET MVC 的多頁面網站，這里略過不表。

      我們也可以在客戶端創建菜單。ABP自動產生Javascript API ，使得我們在客戶端可以輕松取得菜單和菜單項。做到這一點，我們只需要在網頁引入下面的一行代碼（動態生成的Javascript）：

<script src="~/AbpScripts/GetScripts" type="text/javascript"></script>

      在調試狀態下，我們可以查看動態生成的Javascript代碼，其中有一段關於導航菜單的定義：

(function() {
    abp.nav = {};
    abp.nav.menus = {
        'MainMenu': {
            name: 'MainMenu',
            displayName: 'Main menu',
            items: [{
                name: 'Dashboard',
                icon: 'icon-home',
                url: '#/',
                displayName: '工作台',
                items: []
            } , {
                name: 'Task',
                icon: 'icon-tag',
                url: '#/task',
                displayName: '任務',
                items: []
            } , {
                name: 'QA',
                icon: 'icon-question',
                url: '#/qa',
                displayName: '留言板',
                items: []
            } , {
                name: 'SystemAdmin',
                icon: 'icon-wrench',
                displayName: '系統管理',
                items: [{
                    name: 'UserManage',
                    icon: 'icon-users',
                    url: '/systemadmin/users',
                    displayName: '用戶管理',
                    items: []
                } , {
                    name: 'RoleManage',
                    icon: 'icon-briefcase',
                    url: '/systemadmin/rolelist',
                    displayName: '角色管理',
                    items: []
                }]
            };
        }
})();

      在Javascript 里面我們就可以使用 abp.nav 命名空間下的方法和屬性，比如：abp.nav.menus.MainMenu 用於取得應用程序的主菜單。