Open Closed

How to implement sub-menu on navbar? #60


0
lcyhjx created

Thanks Asp.Net Boilerplate first. I create a sample project from http://www.aspnetboilerplate.com by using AngulatJS and Entity Framework, then I would like to change the navrbar with sub-menu as following: • Order • Report • Administration o User management (this is a sub-menu under Administration menu) So I make following changes in Navigation Provider class

context.Manager.MainMenu
                .AddItem(
                    new MenuItemDefinition(
                        "Order",
                        new LocalizableString("Order", BOMConsts.LocalizationSourceName),
                        url: "#/",
                        icon: "fa fa-tasks"
                        )
                )
                .AddItem(
                    new MenuItemDefinition(
                        "Report",
                        new LocalizableString("Report", BOMConsts.LocalizationSourceName),
                        url: "#/Report",
                        icon: "fa fa-bar-chart"
                        )
                )
                .AddItem(
                new MenuItemDefinition(
                    "Administration",
                    new LocalizableString("Administration", BOMConsts.LocalizationSourceName),
                    icon: "fa fa-cogs"
                    ).AddItem(
                        new MenuItemDefinition(
                            "UserManagement",
                            new LocalizableString("UserManagement", BOMConsts.LocalizationSourceName),
                           // url: "/Administration/Users",
                            icon: "fa fa-users"
                            )
                    )
                );

But when I run the project, the sub-menu 'User Management' does not display. Could you please let me know what am I missing? It is better to give me a sample code if it is possible, thanks.


6 Answer(s)
  • 0
    hikalkan created

    If you're using the project template, sub-menu is not implemented there. If you're using the angular version, go to App/Main/views/layout/header.cshtml and implement it yourself. Also, you can find any other top menu. Project template is just a startup helper. You can freely extend it.

    This is the view code generated the menu:

    <li ng-repeat="menuItem in vm.menu.items" ng-class="{active: vm.currentMenuName == menuItem.name}">
    	<a ng-href="{{menuItem.url}}"><i class="{{menuItem.icon}}" ng-if="menuItem.icon"></i> {{menuItem.displayName}}</a>
    </li>
    

    You see that it's single-levet. But actually every MenuItem has items array. So, you can use menuItem.items to create child menus.

    You can find example multi-level bootstrap menus (like http://bootsnipp.com/snippets/featured/ ... avbar-menu).

  • 0
    lcyhjx created

    Thanks. I will try.

  • 0
    lcyhjx created

    a sample for building sub-menu Question Administration ----Users

    Sample code in NavigationProvider

    context.Manager.MainMenu
                    .AddItem(
                        new MenuItemDefinition(
                            "Questions",
                            new LocalizableString("Questions", BOMConsts.LocalizationSourceName),
                            url: "#/questions",
                            icon: "fa fa-question"
                            )
                    )
                     .AddItem(
                     new MenuItemDefinition(
                        "Administration",
                        new LocalizableString("Administration", BOMConsts.LocalizationSourceName),
                        url:"",
                        icon: "fa fa-cogs"
                        ).AddItem(
                            new MenuItemDefinition(
                                "Users",
                                new LocalizableString("Users", BOMConsts.LocalizationSourceName),
                                url: "#/users",
                                icon: "fa fa-users"
                                )
                        )
                    );
    

    Routing in app.js:

    //Configuration for Angular UI routing.
        app.config([
            '$stateProvider', '$urlRouterProvider',
            function($stateProvider, $urlRouterProvider) {
                $urlRouterProvider.otherwise('/questions');
                $stateProvider
                    .state('questions', {
                        url: '/questions',
                        templateUrl: abp.appPath + 'App/Main/views/questions/index.cshtml',
                        menu: 'Questions' //Matches to name of 'Questions' menu in BOMNavigationProvider
                    })
                    .state('questionDetail', {
                        url: '/questions/:id',
                        templateUrl: abp.appPath + 'App/Main/views/questions/detail.cshtml',
                        menu: 'Questions' //Matches to name of 'Questions' menu in BOMNavigationProvider
                    })
                    .state('users', {
                        url: '/users',
                        templateUrl: abp.appPath + 'App/Main/views/users/index.cshtml',
                        menu: 'Users' //Matches to name of 'Users' menu in BOMNavigationProvider
                    });
            }
        ]);
    

    layout/header.cshtml

    <ul class="nav navbar-nav">
                    <li ng-repeat="menuItem in vm.menu.items" ng-class="{active: vm.currentMenuName == menuItem.name}">
    
                        <a ng-if="menuItem.items.length==0" ng-href="{{menuItem.url}}"><i class="{{menuItem.icon}}" ng-if="menuItem.icon"></i> {{menuItem.displayName}}</a>
    
                        <a ng-if="menuItem.items.length>0" href="" data-toggle="dropdown"><i class="{{menuItem.icon}}" ng-if="menuItem.icon"></i> {{menuItem.displayName}} </a>
                        <ul ng-if="menuItem.items.length>0" class="dropdown-menu">
                            <li ng-repeat="menuSubItem in menuItem.items">
                                <a ng-href="{{menuSubItem.url}}"><i class="{{menuSubItem.icon}}" ng-if="menuSubItem.icon"></i> {{menuSubItem.displayName}}</a>
                            </li>
                        </ul>
    
                    </li>
                </ul>
    
  • 0
    hikalkan created

    Thanks a lot for sharing. I will redirect if someone ask same question :)

  • 0
    hikalkan created

    I included it to startup template. http://www.aspnetboilerplate.com/Templates

    Thanks again.

  • 0
    charl created

    Thank you so much for Re-posting this :D