Dynamic Menu loading in ASP.Net MVC3 Razor

Question

I want to ask about Dynamic Database Driven Menu Loading in ASP.Net

MVC3 razor .

This is my

1.View Code

2.Model for Menu

3.Model For Menu Items

4.Navigation Model Structure

In this project i have different User Logins .For each login they are

limited by modules .So When a user enter into the app with their

login ,they have only a limited access to their account.

For Example,There are two users A and B. User A can access only Accounts and Reports and User B can access only Reports .

To implement these things am loading menu from Database.

My Question is How to implement menu Loading from database in ASP.Net MVC3 Razor

View Code

@{
    ViewBag.Title = "Elixir ERP V1.0 Beta";
    Layout = "~/Views/Shared/_LayoutUser.cshtml";
}
<div class="main-container">
    <div class="main-wrapper">
        <div class="scroll-top">
            <a href="#" class="tip-top" title="Go Top"><i 

class="icon-arrow-up"></i></a>
        </div>
        <div class="left-bar merge-left">
            <!-- SEARCH BAR -->
            <!-- LEFT NAV -->
          @section leftnav{


          }
        </div>
    </div>
    <div class="container">
    </div>
</div>

Menu Model

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace Elixir.Models
{
    public class Menu
    {
        public Menu()
        {
            MenuItems = new List<MenuItem>();
        }

        public int Id { get; set; }
        public string Name { get; set; }
        public List<MenuItem> MenuItems { get; set; }
    }
}

Menu Items

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace Elixir.Models
{
public class MenuItem
{

public int Id { get; set; }
public int UserName { get; set; }
public string Name { get; set; }
public string ActionName { get; set; }
public string ControllerName { get; set; }
public string Url { get; set; }
public Menu ParentMenu { get; set; }
}
}

Navigation Model Structure

 <div class="left-nav">


                <ul class="side-navigation accordion" 

id="nav-accordion">
                    <li><a href="#"><i 

class="icon-home"></i>Home</a></li>
                    <li><a href="#"><i class="icon-list-alt"></i>User 

Management</a>
                        <ul>
                            <li><a href="#"><i 

class="icon-double-angle-right"></i>Create New User</a></li>
                            <li><a href="#"><i 

class="icon-double-angle-right"></i>Manage Users</a></li>
                            <li><a href="#"><i 

class="icon-double-angle-right"></i>View Users</a></li>
                        </ul>
                    </li>
                    <li><a href="#"><i 

class="icon-table-2"></i>Employee Management</a>
                        <ul>
                            <li><a href="#"><i 

class="icon-double-angle-right"></i>Employee Registration</a></li>
                            <li><a href="#"><i 

class="icon-double-angle-right"></i>Manage Employees</a></li>
                            <li><a href="#"><i 

class="icon-double-angle-right"></i>View Employees</a></li>
                        </ul>
                    </li>
                    <li><a href="#"><i class="icon-columns"></i>DMIT 

Management</a>
                        <ul>
                            <li><a href="#"><i 

class="icon-double-angle-right"></i>Scan Management</a></li>
                            <li><a href="#"><i 

class="icon-double-angle-right"></i>Report Generation</a></li>
                        </ul>
                    </li>
                    <li><a href="#"><i 

class="icon-laptop"></i>Franchise Management </a>
                        <ul>
                            <li><a href="#"><i 

class="icon-double-angle-right"></i>Franchise Registration</a></li>
                            <li><a href="#"><i 

class="icon-double-angle-right"></i>Franchise Fee Management</a></li>
                            <li><a href="#"><i 

class="icon-double-angle-right"></i>Franchise Account 

Management</a></li>
                        </ul>
                    </li>
                    <li><a href="#"><i class="icon-font"></i>Customer 

Management </a>
                        <ul>
                            <li><a href="#"><i 

class="icon-double-angle-right"></i>Customer Registration</a></li>
                            <li><a href="#"><i 

class="icon-double-angle-right"></i>Manage Customer</a></li>
                        </ul>
                    </li>
                    <li><a href="#"><i 

class="icon-cord"></i>Counseling Management</a>
                        <ul>
                            <li><a href="#"><i 

class="icon-double-angle-right"></i>Add Counseling Session</a></li>
                            <li><a href="#"><i 

class="icon-double-angle-right"></i>Manage Counseling 

Sessions</a></li>
                        </ul>
                    </li>
                    <li><a href="#"><i 

class="icon-tools"></i>Accounts</a>
                        <ul>
                            <li><a href="#"><i 

class="icon-double-angle-right"></i>Manage Income</a></li>
                            <li><a href="#"><i 

class="icon-double-angle-right"></i>Manage Expense</a></li>
                        </ul>
                    </li>
                    <li><a href="#"><i 

class="icon-files"></i>Reports</a>
                        <ul>
                            <li><a href="#"><i 

class="icon-double-angle-right"></i>Elxir Monthly Reports</a></li>
                            <li><a href="#"><i 

class="icon-double-angle-right"></i>Elixir Yearly Reports</a></li>
                            <li><a href="#"><i 

class="icon-double-angle-right"></i>Franchise Monthly 

Reports</a></li>
                            <li><a href="#"><i 

class="icon-double-angle-right"></i>Franchise yearly Reports</a></li>
                        </ul>
                    </li>
                </ul>
            </div>

Answer 1

Put below div in _Shared.cshtml

  <nav id="mainNavigation">
            @Html.Partial("_MenuLayout")
   </nav>

Make new _MenuLayout.cshtml view for dynamic generated menu

In your controller , write code to get Data from database table e.g. MenuTable and prepare list and assign values like below

  ViewBag.Menu = list;

and in your _MenuLayout.cshtml partial view place below code,

@{ var menusList = ViewBag.Menu as IEnumerable<Elixir.Models.MenuItem>; }

 @if (menusList != null)
{
   <ul id="menu" class="wrap cf">
    @foreach (var parentMenu in menusList.Where(p => p.ParentMenuID == 0))
    {
        <li>
            @if (!string.IsNullOrEmpty(@parentMenu.ActionName))
            {
                 @Html.ActionLink(@parentMenu.MenuName, @parentMenu.ActionName, @parentMenu.ControllerName)
            }
           else
           {
              <span>@parentMenu.MenuName</span> 
                if (menusList.Count(p => p.ParentMenuID == parentMenu.MenuID) > 0)
                {
                    <ul>
                        @foreach (var childMenu in menusList.Where(p => p.ParentMenuID == parentMenu.MenuID))
                        { 
                             <li>@Html.ActionLink(@childMenu.MenuName, @childMenu.ActionName, @childMenu.ControllerName)</li>

                            if (menusList.Count(p => p.ParentMenuID == childMenu.MenuID) > 0)
                            {
                                foreach (var subChild in menusList.Where(p => p.ParentMenuID == childMenu.MenuID))
                                {
                            @Html.ActionLink(@subChild.MenuName, @subChild.ActionName, @subChild.ControllerName)
                                }
                            }
                        }
                    </ul>
                }        
           }

        </li>
    }
 </ul>
}