Navigation Menu using ViewModel ASP.NET MVC

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.

menu

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.

Comments
  1. Posted by Olivier Goetz
    • Posted by Rizwan Ansari
  2. Posted by Mx
    • Posted by
  3. Posted by Rob Bowman
  4. Posted by unknown

Leave a Reply

Your email address will not be published.