Create Dynamic Menu in ASP NET MVC A Complete How to Guide

A menu plays a significant role in lending an amazing UX by making an application easily navigable. It can be used to make accessibility to a particular section a breeze.

If you want to ensure a surefire application, it is essential that elements of your application must be accessed with ease. It must appear intuitive and intriguing, so that users can execute them with a flair. You may create multiple modules within a project and depending upon the users permissions, an appropriate menu can be implemented dynamically via ASP.NET.

ASP.NET is an open source server side framework that augments web app development with great efficiency and precision. It is the core of the popular Content Management Systems (CRM), eCommerce, and so forth that deliver utile features.

Also Read: 5 Things You Must Consider Before Using ASP.NET Development

Here is a comprehensive guide that offers a complete tutorial for creating a user-friendly dynamic menu via ASP.NET MVC. The process is extremely simple with only 5 easy steps at a glance.

Lets distill the process and explore how dynamic menus can be created efficiently.

Create Dynamic Menu in ASP.NET MVC

Step 1: Create a database table

To create dynamic menus in ASP.NET MVC, the very first step is to generate a database table that can hold all the menu items in a designed hierarchy (if any). The database table can be created with a simple query as mentioned below.

Create Table Menus(ID int Primary Key Identity(1,1), ParentID int foreign key References Menus(ID), Title varchar(50), Description varchar(250))

This query will create a table Menus that will hold four values. These values are:

ID: is the primary key and auto generated
Parent ID: is the foreign key
Title: Name of the field
Description: is the information that you want to display when a user hovers over the menu.

With this, a desired table will be created in the database.

Step 2: Insert values into the table

A simple insert query can be used for adding the data into the table. Now, there are two possibilities, that is, your menu may possess multiple parent items that further possess child items or there may be parent items only. So, you must insert the values as per your app requirements.

Query to insert values into the table Menus.

Insert Into Menus(null, Item One, Desc) // First Parent Item
Insert Into Menus(null, Item Two, Desc) // Second Parent Item
Insert Into Menus(null, Item Three, Desc) // Third Parent Item

Insert Into Menus(1, Item Sub One, Desc) // Child of First Parent Item
Insert Into Menus(2, Item Sub Two, Desc) // Child of Second Parent Item
Insert Into Menus(3 Item Sub Three, Desc) // Child of Third Parent Item

By implementing the above mentioned queries, your Menus table will contain three items in the Menu and each item will further have a child item.

Step 3: Fetch the data from the table

Now, the next step is to fetch the menu items from the table Menus that was created in the step 1, and return a list of all the items.

For this, a GetMenus() function is created in MyMenu class. In this function, there is a loop that will help fetch the items of the Menu and return them via a list. The lines of code for the same is as follows.

Code Snippet for model:

public static class MyMenu
{
   /// <summary>
   /// Get List of All Menu Items from Database
   /// </summary>      
   /// <returns>Returns List<Menus> object</returns>
   public static List<Menus> GetMenus()
   {
       using(var context = new ProjectEntities())
       {
            return context.Menu.ToList();
        }
    }
}

Step 4: Display the created menu on the screen

Now, when the Menu items has been fetched from the database, it is the time to represent it in the view.

Code Snippet for View:

@{
    List<Menus> myMenu = MyMenu.GetMenus();
    var plist = myMenu.Where(m => m.ParentID == null).ToList(); // This will list main menu items on which well apply loop to display them.
    if (plist != null && plist.Count > 0)
    {
        <ul class="nav">
        @foreach (var pitem in plist)
        {
            <li>
                <a href="{URL-Required} title="@Description">@pitem.Title</a>
                @{
                    var clist = myMenu.Where(m => m.ParentID == pitem.ID).ToList();
                    if (clist != null && clist.Count > 0)
                    {
                        <ul>
                            @foreach (var citem in clist)
                            {
    <li><a href="{URL-Required}"title="@Description">@citem.Title</a></li>
                            }
                        </ul>
                    }
                }
            </li>
        }
        </ul>
    }
}

Here, ui and li HTML tags are used in the loop. This will help display the created menu in the view. Now, move to the next step.


Also Read: 5 Facile Yet Incredibly Valuable Ways to Enhance ASP.NET Developer’s Efficiency

Step 5: Beautify the menu to make it appear captivating

To ensure an enticing and easily readable menu, it is essential to make it appear visually appealing and intriguing. You may use the CSS appropriately to enhance the look and feel of the menu in a desired fashion. Here, I have incorporated the following chunk of code in the CSS file to boost the navigation ease and ensure an attractive Menu.

Code Snippet CSS:

ul, ol, li {list-style: outside none none;}
.nav {float: left;padding: 0;background-color: #5eab1f;}
.nav li {display: inline-block;position: relative;vertical-align: middle;}
.nav li:hover, .nav li.active {background-color: #4c9312;}
.nav li a {color: #fff;float: left;font-size: 15px;padding: 16px 14px; text-decoration: none;}
.nav li ul {background-color: #fff;border-radius: 0 0 5px 5px;box-shadow: 0 2px 3px #000;display: none;min-width: 200px;padding: 20px 0;position: absolute;top: 48px;z-index: 9999;}
.nav li ul:before {border-bottom: 8px solid #fff;border-left: 8px solid transparent;border-right: 8px solid transparent;content: "";left: 28%;position: absolute;top: -8px;}
.nav ul li {float: left;width: 100%;}
.nav ul li a {color: #333;float: left;font-size: 15px;padding: 10px 5%;width: 90%;}
.nav li:hover, .nav li.active {background-color: #4c9312;}

This CSS has been created considering a few requirements, you may develop it in a desired fashion to bring substantial changes in the visual appearance. Therefore, you may streamline the CSS as per your UX and design needs.

Wrapping Up

By following this absolute guide, you can efficiently create beautiful dynamic menus via the ASP.NET MVC. It is advisable to thoroughly go through each step and design desirable menu while ensuring utmost navigation ease.

Author Bio
Sarah Parker is an experienced PSD to WordPress service provider, and a web designer. She loves to share her thoughts on web design and web development trends.