How To Create Dynamic Menu And Submenu In Mvc 5

There are many approaches to Generate Dynamic Navigation Menus in ASP.NET MVC Applications, in this post i will discuss one approach using ViewModels and Partial Views which I use in my Applications.

First I'll create a Hard coded Navigation then replace it with based on ViewModel.

Lets say we want to create a menu like this.

Suppose you have a layout file _Layout.cshtml

<body>     <!--- Sidemenu --> 	<div id="sidebar-menu"> 		<ul> 			<li>             				<a href="#">Dashboard</a> 			</li> 			 			<li class="has_sub"> 				<a href="#">Application Setup</a> 				<ul class="list-unstyled"> 					<li><a href="#">User Manager</a></li> 					<li><a href="#">Manage User</a></li> 					<li><a href="#">Change Password</a></li> 					<li><a href="#">Logoff</a></li> 				</ul> 			</li> 		</ul> 	</div> 	<!-- Sidebar -->      @RenderBody() </body>

Extract the Navigation out of this layout file in a Partial View _Navigation.cshtml

<!--- Sidemenu --> <div id="sidebar-menu"> 	<ul> 		<li>             			<a href="#">Dashboard</a> 		</li> 		 		<li class="has_sub"> 			<a href="#">Application Setup</a> 			<ul class="list-unstyled"> 				<li><a href="#">User Manager</a></li> 				<li><a href="#">Manage User</a></li> 				<li><a href="#">Change Password</a></li> 				<li><a href="#">Logoff</a></li> 			</ul> 		</li> 	</ul> </div> <!-- Sidebar -->

Create a new Controller, call it NavigationController. Create an Action for Navigation Menu

public ActionResult Menu() { 	return PartialView("_Navigation"); }

Now call this Partial View in _Layout.cshtml

<body>     @Html.Action("Menu", "Navigation")      @RenderBody() </body>

Navigation is decoupled from Layout and has it own Partial View. Now I'll create a Model (ViewModel) to make Dynamic Navigation.

Create a ViewModel MenuViewModel.cs

public class MenuViewModel { 	public int MenuID { get; set; } 	public string Title { get; set; } 	public string Action { get; set; } 	public string Controller { get; set; } 	public bool IsAction { get; set; } 	public string Link { get; set; } 	public string Class { get; set; } 	public List            SubMenu { get; set; }         }

Modify NavigationController to include Model. Right now it is hard coded but you can easily fill it from the Database.

public ActionResult Menu() { 	List            menuViewModel = new List();  	MenuViewModel menu = new MenuViewModel() { MenuID = 1, Action = "Index", Controller = "Dashboard", IsAction = true, Class = "class", SubMenu = null, Title = "Dashboard" }; 	menuViewModel.Add(menu);  	menu = new MenuViewModel() { MenuID = 2, IsAction = false, Class = "class", Link = "javascript:void(0);", Title = "Application Setup" }; 	 	menu.SubMenu = new List(); 	MenuViewModel subMenu = new MenuViewModel() { Action = "Register", Controller = "Account", IsAction = true, Class = "", SubMenu = null, Title = "User Manager" }; 	menu.SubMenu.Add(subMenu); 	 	subMenu = new MenuViewModel() { Action = "Index", Controller = "Manage", IsAction = true, Class = "", SubMenu = null, Title = "Manage" }; 	menu.SubMenu.Add(subMenu); 	 	subMenu = new MenuViewModel() { Action = "ChangePassword", Controller = "Manage", IsAction = true, Class = "", SubMenu = null, Title = "Change Password" }; 	menu.SubMenu.Add(subMenu); 	 	subMenu = new MenuViewModel() { IsAction = false, Link = "javascript:document.getElementById('logoutForm').submit()", Class = "", SubMenu = null, Title = "Logoff" }; 	menu.SubMenu.Add(subMenu); 	 	menuViewModel.Add(menu);  	return PartialView("_ThemeMenuPartial", menuViewModel); }

Modify Partial View _Navigation.cshtml to dynamically create Navigation using MenuViewModel.

@model IEnumerable<MenuViewModel>  <!--- Sidemenu --> <div id="sidebar-menu"> 	<ul>  @foreach (MenuViewModel menu in Model) {    	if (menu.SubMenu != null) 	{ 		<li class="has_sub"> 		 		@if (menu.IsAction) 		{ 			<a href="@Url.Action(menu.Action, menu.Controller)" class="@menu.Class"> @Html.Raw(menu.Title)</a> 		} 		else 		{ 			<a href="@Html.Raw(menu.Link)" class="@menu.Class"> @Html.Raw(menu.Title)</a> 		} 		 		<ul class="list-unstyled"> 		@foreach (MenuViewModel subMenu in menu.SubMenu) 		{ 			if (subMenu.IsAction) 			{ 				<li><a href="@Url.Action(subMenu.Action, subMenu.Controller)">@subMenu.Title</a></li> 			} 			else 			{ 				<li><a href="@Html.Raw(subMenu.Link)"> @Html.Raw(subMenu.Title)</a></li> 			} 		} 		</ul> 		</li> 	} 	else 	{ 		if (menu.IsAction) 		{ 			<li><a href="@Url.Action(menu.Action, menu.Controller)" class="@menu.Class"> @Html.Raw(menu.Title)</a></li> 		} 		else 		{ 			<li><a href="@Html.Raw(menu.Link)" class="@menu.Class"> @Html.Raw(menu.Title)</a></li> 		} 	}  }     </ul>     <div class="clearfix"></div> </div> <!-- Sidebar -->

So you have Dynamic Navigation now based on ViewModel.