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
  5. Posted by

Leave a Reply

Your email address will not be published.