How to create multi-level menus dynamically in Asp.net MVC

I will explain How to create multi-level menus dynamically in Asp.net MVC. This is code snippet how to develop multi level menu with UL and LI structure in MVC structure

Introduction:

      Today in this article, I will How to create multi-level menus dynamically in Asp.net MVC.

I have create project in which rendered a menu dynamically from database using Ado.net.  I have Add a Model into my Models Folder and in this model I have my menu tables

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. Here is a comprehensive guide that offers a complete tutorial for creating a user-friendly multi-level dynamic menu via ASP.NET MVC.

Fallow these steps in order to implement “Multi-Level menus dynamically in Asp.net MVC”

Step1: Create tables in database.

In this example, I have created fallowing three tables for binding 3 level dynamic menus.

Create tbl_category table for first level menus.

 

CREATE TABLE [dbo].[tbl_category] (

    [Cat_id]        INT            IDENTITY (1, 1) NOT NULL,

    [Category_Name] NVARCHAR (MAX) NULL,

    CONSTRAINT [PK_tbl_category] PRIMARY KEY CLUSTERED ([Cat_id] ASC)

);

 

 The design of the table look like this as follows:

 

 

Now create tbl_Subcategory table for bind second level menus.

CREATE TABLE [dbo].[tbl_Subcategory] (

    [Subcat_id]   INT            IDENTITY (1, 1) NOT NULL,

    [Cat_id]      INT            NULL,

    [Subcat_name] NVARCHAR (MAX) NULL,

    CONSTRAINT [PK_tbl_Subcategory] PRIMARY KEY CLUSTERED ([Subcat_id] ASC)

);

 

The design of the table look like this as follows:

 

 

In last we create tbl_subtosucategory for bind third level menus

CREATE TABLE [dbo].[tbl_subtosucategory] (

    [SubtosubCat_id]   INT           NULL,

    [Subcat_id]        INT           NULL,

    [SubtosubCat_Name] NVARCHAR (50) NULL

);

 

The design of the table look like this as follows:

 

 

Step2: Create New Project.

 Go to File > New > Project > Web > Asp.net MVC web project > Enter Application Name > Select your project location > click to OK button > It will show new dialog window for select template > here we will select MVC project > then click to ok

 

Step3: Add Connection string in web.config file

Here I have add connection string in web.config file under Configuration section as fallows

<connectionStrings>

    <add name="con" connectionString="Data Source=.;Initial Catalog=Menutest;Integrated Security=True " providerName="System.Data.SqlClient"/>

  </connectionStrings>

 

 

Step5: Create Model for menus.

I have added these three classes for multilevel menus 

Fallowing class for first level menus.

public class category

    {

        public int Catid { get; set; }

        public string category_name { get; set; }

    }

 

Now I have added class for second level menus

public class Subcategory

    {

        public int Subcat_id { get; set; }

        public int Cat_id { get; set; }

        public string Subcat_name { get; set; }

    }

 

I last we need to add class for third level menus.

public class subtosubcategory

    {

        public int Subtosubcat_id { get; set; }

        public int Subcat_id { get; set; }

        public string Subtosubcat_Name { get; set; }

    }

 

 

Step5: Create Database Access layer.

Go to Solutions Explorer > right click on project solution> Add New Folder > Enter Folder name (Here I rename it as ‘database_access_layer’) > right click on folder > Add new class.

 

Now add the fallowing method into Database access class that access record on the basis of parameters.

Firstly we need to add connection string in db class file as follows:

SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["con"].ConnectionString);

Now we need to add fallowing three methods for binding three level menus

 

//Get Category

        public DataSet get_category()

        {

            SqlCommand com = new SqlCommand("Select * from tbl_category", con);

            SqlDataAdapter da = new SqlDataAdapter(com);

            DataSet ds = new DataSet();

            da.Fill(ds);

            return ds;

        }

        //Get Subcategory()

        public  DataSet get_Subcategory(int catid)

        {

            SqlCommand com = new SqlCommand("Select * from tbl_Subcategory where Cat_id=@catid", con);

            com.Parameters.AddWithValue("@catid", catid);

            SqlDataAdapter da = new SqlDataAdapter(com);

            DataSet ds = new DataSet();

            da.Fill(ds);

            return ds;

        }

        //Get Subtosubcategory

        public DataSet get_SubtoSubcategory(int subcatid)

        {

            SqlCommand com = new SqlCommand("Select * from tbl_subtosucategory where Subcat_id=@subcatid", con);

            com.Parameters.AddWithValue("@subcatid", subcatid);

            SqlDataAdapter da = new SqlDataAdapter(com);

            DataSet ds = new DataSet();

            da.Fill(ds);

            return ds;

        }

 

The entire db class file will be fallows

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Data;

using System.Data.SqlClient;

using System.Configuration;

namespace Multilevel_Menu.database_Access_layer

{

    public class db

    {

        SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["con"].ConnectionString);

        //Get Category

        public DataSet get_category()

        {

            SqlCommand com = new SqlCommand("Select * from tbl_category", con);

            SqlDataAdapter da = new SqlDataAdapter(com);

            DataSet ds = new DataSet();

            da.Fill(ds);

            return ds;

        }

        //Get Subcategory()

        public  DataSet get_Subcategory(int catid)

        {

            SqlCommand com = new SqlCommand("Select * from tbl_Subcategory where Cat_id=@catid", con);

            com.Parameters.AddWithValue("@catid", catid);

            SqlDataAdapter da = new SqlDataAdapter(com);

            DataSet ds = new DataSet();

            da.Fill(ds);

            return ds;

        }

        //Get Subtosubcategory

        public DataSet get_SubtoSubcategory(int subcatid)

        {

            SqlCommand com = new SqlCommand("Select * from tbl_subtosucategory where Subcat_id=@subcatid", con);

            com.Parameters.AddWithValue("@subcatid", subcatid);

            SqlDataAdapter da = new SqlDataAdapter(com);

            DataSet ds = new DataSet();

            da.Fill(ds);

            return ds;

        }

     

    }

}

 

 

And also you will see the methods is taking an input parameter cat_id and subcatid (this is the id of the first level menu and second level menu respectively)

Step6: Create a Controller

 Go to Solution Explorer > Right Click on Controllers folder form Solution Explorer > Add > Controller > Enter Controller name > Select Template "empty MVC Controller"> Add.

Here I have created a controller "HomeController.

 

Step7: Add View in HomeController

After adding the controller to the application I am just adding a new action result and naming it Index and also we need to call db class in HomeController.

In Index action method I have call get_category from db class for first level menu

 

Database_Access_Layer.db dblayer = new Database_Access_Layer.db();

public ActionResult Index()

        {

            DataSet ds = dblayer.get_category();

            ViewBag.category = ds.Tables[0];

            return View();

        }

 

Step7: Add methods for Binding and populate second and third level menus

Now we will add fallowing functions in HomeController for populate second and third level menus.

 Add below methods for populate second level menu:

 

public void get_Submenu(int catid)

        {

            DataSet ds = dblayer.get_Subcategory(catid);

            List<Subcategory> submenulist = new List<Subcategory>();

            foreach (DataRow  dr in ds.Tables[0].Rows)

            {

                submenulist.Add(new Subcategory{

            Subcat_id=Convert.ToInt32(dr["Subcat_id"]),

            Subcat_name=dr["Subcat_name"].ToString()

            });

            }

            Session["submenu"] = submenulist;

        }

 

In above methods I am calling get_Subcategory methods from db class and storing list in Session for passing list to the view. It’s also contain input parameter catid that is value of first level menu

 

Now we will be adding a method for third level menu

public void get_Subtosubmenu(int Subcat_id)

        {

            DataSet ds = dblayer.get_SubtoSubcategory(Subcat_id);

            List<subtosubcategory> subtosubmenulist = new List<subtosubcategory>();

            foreach (DataRow dr in ds.Tables[0].Rows)

            {

                subtosubmenulist.Add(new subtosubcategory

                {

                    Subtosubcat_id = Convert.ToInt32(dr["Subcat_id"]),

                    Subtosubcat_Name = dr["SubtosubCat_Name"].ToString()

                });

            }

            Session["subtosubmenu"] = subtosubmenulist;

        }

 

 

In above method I have taken Subcat_id  as parameter that is value of second level menu item as store list in Session for access to view.

Now entire HomeController class file will be as follows:

 

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.Mvc;

using System.Data;

using System.Data.SqlClient;

using Multilevel_Menu.Models;

namespace Multilevel_Menu.Controllers

{

    public class HomeController : Controller

    {

        //

        // GET: /Home/

        database_Access_layer.db dblayer = new database_Access_layer.db();

        public ActionResult Index()

        {

            DataSet ds = dblayer.get_category();

            ViewBag.category = ds.Tables[0];

 

            return View();

        }

        // Get submenu

        public void get_Submenu(int catid)

        {

            DataSet ds = dblayer.get_Subcategory(catid);

            List<Subcategory> submenulist = new List<Subcategory>();

            foreach (DataRow  dr in ds.Tables[0].Rows)

            {

                submenulist.Add(new Subcategory{

            Subcat_id=Convert.ToInt32(dr["Subcat_id"]),

            Subcat_name=dr["Subcat_name"].ToString()

            });

            }

            Session["submenu"] = submenulist;

        }

        // Get Subtosubmenu

        public void get_Subtosubmenu(int Subcat_id)

        {

            DataSet ds = dblayer.get_SubtoSubcategory(Subcat_id);

            List<subtosubcategory> subtosubmenulist = new List<subtosubcategory>();

            foreach (DataRow dr in ds.Tables[0].Rows)

            {

                subtosubmenulist.Add(new subtosubcategory

                {

                    Subtosubcat_id = Convert.ToInt32(dr["Subcat_id"]),

                    Subtosubcat_Name = dr["SubtosubCat_Name"].ToString()

                });

            }

            Session["subtosubmenu"] = subtosubmenulist;

        }

 

    }

}

 

  

Step8: Add View for Index action

Right Click on Action Method (here right click on Index action) > Add View > Enter View Name > Select "Empty" under Template dropdown > Check use a layout page > Add.

Further we need to add fallowing code under Index.cshtml where you want to show menus.

 

<ul>

                @{

                    foreach (System.Data.DataRow dr in ViewBag.category.Rows)

                    {
                         <li>

                    <a href='#'>@dr["Category_Name"]</a>
                       @{  

                        ((Multilevel_Menu.Controllers.HomeController)this.ViewContext.Controller).get_Submenu(Convert.ToInt32(dr["Cat_id"]));

                       }

                             <ul>

                                 @{

                        foreach (Multilevel_Menu.Models.Subcategory subitem in Session["submenu"] as List<Multilevel_Menu.Models.Subcategory>)

                        {

                         <li>
                             <a href='#'>@subitem.Subcat_name</a>
                             @{
                       ((Multilevel_Menu.Controllers.HomeController)this.ViewContext.Controller).get_Subtosubmenu(Convert.ToInt32(subitem.Subcat_id));

                             }

                             <ul>

                                 @{

                            foreach (Multilevel_Menu.Models.subtosubcategory subtosubitem in Session["subtosubmenu"] as List<Multilevel_Menu.Models.subtosubcategory>)

                            {

                             <li><a href='#'>@subtosubitem.Subtosubcat_Name</a></li>

                            }

                                 }

 

                             </ul>

                         </li>

                        }

                                 }

                             </ul> 

                </li>
                  
                }

                }

              
            </ul>

 

For complete design and look we need to add some CSS and JQuery files.

For CSS and JQuery files click here.

Now entire Index.cshtml file will be as follows:

 

@{

    Layout = null;

}

 

<!DOCTYPE html>

 

<html>

<head>

    <meta charset="UTF-8">

    <title>CSS3 Responsive Menu Dropdown + Submenu width Logo</title>

    <link rel="stylesheet" href="~/css/style.css">

</head>

<body>

    <header>

        <nav id='cssmenu'>

            <div class="logo"><a href="index.html">Responsive </a></div>

            <div id="head-mobile"></div>

            <div class="button"></div>

            <ul>

                @{

                    foreach (System.Data.DataRow dr in ViewBag.category.Rows)

                    {

                         <li>

                    <a href='#'>@dr["Category_Name"]</a>

                  

                       @{  

                        ((Multilevel_Menu.Controllers.HomeController)this.ViewContext.Controller).get_Submenu(Convert.ToInt32(dr["Cat_id"]));

                       }

                             <ul>

                                 @{

                        foreach (Multilevel_Menu.Models.Subcategory subitem in Session["submenu"] as List<Multilevel_Menu.Models.Subcategory>)

                        {

 

                         <li>

 

                             <a href='#'>@subitem.Subcat_name</a>

 

                             @{

                        ((Multilevel_Menu.Controllers.HomeController)this.ViewContext.Controller).get_Subtosubmenu(Convert.ToInt32(subitem.Subcat_id));

                             }

                             <ul>

                                 @{

                            foreach (Multilevel_Menu.Models.subtosubcategory subtosubitem in Session["subtosubmenu"] as List<Multilevel_Menu.Models.subtosubcategory>)

                            {

 

                             <li><a href='#'>@subtosubitem.Subtosubcat_Name</a></li>

 

                            }

                                 }

 

                             </ul>

 

                         </li>

 

                        }

                                 }

                             </ul> 

                  

                </li>

                   

                }

                }

              

            </ul>

        </nav>

    </header>

    <section style='padding-top:20px;font:bold  44px arial;color:#68D800;'>

        Responsive CSS3 Menu <br />Dropdown + Submenus <br />

        Width Toggle Animation

    </section>

    <script src="~/js/jquery-1.10.2.min.js"></script>

   

    <script src="~/js/index.js"></script>

</body>

</html>

 

 

Step 10: Run Application.

We have done all steps, now it’s time to run the application.