abp添加動態菜單

abp中MenuDefinition封裝了導航欄上的主菜單的屬性，MenuItemDefinition則封裝了子菜單的屬性，子菜單可以引用其他子菜單構成一個菜單樹。

MenuDefinitio成員如下：

　　　　public object CustomData { get; set; }//自定義數據
       
　　　　public ILocalizableString DisplayName { get; set; }//表示本地化字符串
       
　　　　public IList<MenuItemDefinition> Items { get; set; }//子級菜單集合
       
　　　　public string Name { get; }//菜單名稱

　　　　public MenuDefinition AddItem(MenuItemDefinition menuItem);//子菜單添加方法

 

 MenuItemDefinition成員如下：

　　　　public object CustomData { get; set; }//自定義數據
        
       public ILocalizableString DisplayName { get; set; }//表示本地化字符串
       
       public IFeatureDependency FeatureDependency { get; set; }//功能特性
        
       public string Icon { get; set; }//菜單圖標
        
       public bool IsLeaf { get; }//是否有子菜單
        
       public virtual IList<MenuItemDefinition> Items { get; }//子菜單
       
       public string Name { get; }//菜單名稱
        
       public int Order { get; set; }//排序
        
       public string RequiredPermissionName { get; set; }//權限名稱
        
       public bool RequiresAuthentication { get; set; }//權限驗證如果通過驗證顯示此菜單否則不可見
        
       public string Url { get; set; }//URL

       public MenuItemDefinition AddItem(MenuItemDefinition menuItem);//添加子菜單

有了以屬性並了解其作用我們可以方便自定任何菜單，在常規開發中我們可能需要從數據庫，xml等數據源中加載一些動態菜單來滿足我們的系統要求，有了以上對象我們可以方便的添加菜單！

設置菜單代碼如下：

 public class AppNavigationProvider : NavigationProvider
    {
        public override void SetNavigation(INavigationProviderContext context)
        {
            #region 靜態菜單

            context.Manager.MainMenu
                .AddItem(new MenuItemDefinition(
                    AppPageNames.Host.Tenants,
                    L("HostDashboardMenu"),
                    url: "host_dashboard",
                    icon: "menu-icon fa fa-home",
                    requiredPermissionName: PermissionNames.Pages_Host_Dashboard,
                    order: 1
                    )
                );

            #endregion

            #region 動態菜單
            
            var project=new MenuItemDefinition(
                    AppPageNames.Common.Project,
                    L("ProjectMenu"),
                    url: "roles",
                    icon: "menu-icon fa fa-briefcase",
                    requiredPermissionName: PermissionNames.Pages_Administration_Projects,
                    order: 5
                    );
              
            //這里模擬從數據庫加載數據
            for (int i = 1; i <= 10; i++)
            {
                project.AddItem(new MenuItemDefinition(
                       "p1",
                       L("項目" + i),
                       url: "project",
                       icon: "menu-icon fa fa-tasks",
                       requiredPermissionName: PermissionNames.Pages_Administration_Projects,
                       customData: i
                   ));
            }
            context.Manager.MainMenu.AddItem(project);
            #endregion
           
        }

        private static ILocalizableString L(string name)
        {
            return new LocalizableString(name, DataCenterConsts.LocalizationSourceName);
        }
    }

前端代碼(前端根據不同框架處理方式有所不同，這里以angular為例)：

<ul class="nav sidebar-menu">

    <li ng-repeat="menuItem in vm.menu.items|orderBy:'order'" ui-sref-active="active">
        <!--無子級導航-->
        <a ui-sref="{{menuItem.url}}" ng-if="!menuItem.items.length">
            <i class="{{menuItem.icon}}"></i>
            <span class="menu-text"> {{menuItem.displayName}} </span>
        </a>
        <!--有子級導航-->
        <a href="javascript:void()" class="menu-dropdown" ng-if="menuItem.items.length">
            <i class="{{menuItem.icon}}"></i>
            <span class="menu-text"> {{menuItem.displayName}} </span>
            <i class="menu-expand"></i>
        </a>
        <ul class="submenu" ng-if="menuItem.items.length">
            <li ui-sref-active="active" ng-repeat="childMenuItem in menuItem.items">
                <!--動態URL-->
                <a ui-sref="project.details({id:childMenuItem.customData})" ng-if="childMenuItem.customData">
                    <i class="{{childMenuItem.icon}}"></i>
                    <span class="menu-text">{{childMenuItem.displayName}}</span>
                </a>
                <!--靜態URL-->
                <a ui-sref="{{childMenuItem.url}}" ng-if="!childMenuItem.customData">
                    <i class="{{childMenuItem.icon}}"></i>
                    <span class="menu-text">{{childMenuItem.displayName}}</span>
                </a>
            </li>
        </ul>
    </li>
</ul>

 

效果如下