Bind Menu And Sub Menu Dynamically In ASP.NET MVC From Database Using LINQ

Rupesh Kahane

5y181k18100Article

MVC ASP.NET MVC LINQDynamic Menu

18 Comments

Join the conversation! Your thoughts help the community grow.

Methinee Jiabja5y ago
Thank you very much for your share.
Nagi reddy Kandi5y ago
Please do needful
Nagi reddy Kandi5y ago
An unhandled exception of type 'System.StackOverflowException' occurred in System.Transactions.dll
Cristian Rivera7y ago
Hello, ?Could you share the source code? My problem is, I need to dynamically modify the menu that I have on the _Layout page and I enrich everything. Your solution seems to be the closest to what I have been looking for more time than I had estimated. I really appreciate your help. (I used the google translator, I hope you understand me) Greetings from Chile
- Cristian Rivera7y ago
  I finally solved it with View components (https://docs.microsoft.com/en-us/aspnet/core/mvc/views/view-components?view=aspnetcore-2.2)
- Rupesh Kahane7y ago
  Ohh. Great. I was uploaded the source code but it was took some time to approve the article. Thanks
Cristian Rivera7y ago
Hola ?podr?as compartir el c?digo fuente?, gracias.
- Rupesh Kahane7y ago
  Can you plz convert it into English language, so I can understand
Nithin Bhargav7y ago
It is throwing error while assigning in home controller, Controller_name = controller_name and the last one.
- Rupesh Kahane7y ago
  Share your same code on [email protected] or ping me on WhatsApp @9545273748 will help u
Oluwapamilerin Hans Ajani7y ago
I got it, but I still couldnt get the MenuEntities instanciated, Is there something missing?
- Rupesh Kahane7y ago
  Let me know the name of your entity file. At the time of creation edmx file you have given something name xyzEntity i.e. my MenuEntity (as I have given name Menu)
Oluwapamilerin Hans Ajani7y ago
Where is the DataContext? Where does the MenuEntities in Controller come from?
- Rupesh Kahane7y ago
  When you are creating edmx file i.e it automatically added after creating Ado.net data entity in ur project. Let Me if any concern
Oluwapamilerin Hans Ajani7y ago
Where does the MenuEntities come from?
Alice Jacob8y ago
Severity Code Description Project File Line Suppression StateError CS0246 The type or namespace name 'MenuEntities' could not be found (are you missing a using directive or an assembly reference?) Dynamic_Men C:\Users\source\repos\Dynamic_Men\Dynamic_Men\Controllers\HomeController.cs 10 N/A
Alice Jacob8y ago
Not working ...issue is :
- Rupesh Kahane8y ago
  What problem you are facing?? Let me know so I can help you

Introduction

Many times we need to create a menu for a simple application. We ususally get stuck on how to bind the menu. Here in this article we you will learn how to bind menu and sub menu dynamically in ASP.NET MVC from database using linq.

Source code is upload here.

Note below points,

Please take care about the variable names As in article I have used,

M_ID instade of M_CODE
M_P_ID insatde of M_PARENT_CODE

Change the web config setting as per your SQL Connection.

Step 1

I am going to create a database which contains the following fields as well as some dummy data which contains parent & child relationship.

Use the below script to create table & insert query,

USE [Dynamic_Menu]
GO
SET ANSI_NULLS ON
GO
SET QUOTED_IDENTIFIER ON
GO
SET ANSI_PADDING ON
GO
CREATE TABLE [dbo].[Menu_List](
[M_ID] [int] IDENTITY(1,1) NOT NULL,
[M_P_ID] [int] NULL,
[M_NAME] [varchar](50) NULL,
[CONTROLLER_NAME] [varchar](50) NULL,
[ACTION_NAME] [varchar](50) NULL,
CONSTRAINT [PK_Menu_List] PRIMARY KEY CLUSTERED
(
[M_ID] ASC
)WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]
) ON [PRIMARY]
GO
SET ANSI_PADDING OFF
GO
SET IDENTITY_INSERT [dbo].[Menu_List] ON
INSERT [dbo].[Menu_List] ([M_ID], [M_P_ID], [M_NAME], [CONTROLLER_NAME], [ACTION_NAME]) VALUES (1, 0, N'My Menu', NULL, NULL)
INSERT [dbo].[Menu_List] ([M_ID], [M_P_ID], [M_NAME], [CONTROLLER_NAME], [ACTION_NAME]) VALUES (2, 1, N'BCS', N'Menu', N'BCS_Action')
INSERT [dbo].[Menu_List] ([M_ID], [M_P_ID], [M_NAME], [CONTROLLER_NAME], [ACTION_NAME]) VALUES (3, 2, N'Computer', N'Menu', N'Computer_Action')
INSERT [dbo].[Menu_List] ([M_ID], [M_P_ID], [M_NAME], [CONTROLLER_NAME], [ACTION_NAME]) VALUES (4, 1, N'MCS', N'Menu', N'MCS_Action')
INSERT [dbo].[Menu_List] ([M_ID], [M_P_ID], [M_NAME], [CONTROLLER_NAME], [ACTION_NAME]) VALUES (5, 2, N'Maths', N'Menu', N'Maths_Action')
INSERT [dbo].[Menu_List] ([M_ID], [M_P_ID], [M_NAME], [CONTROLLER_NAME], [ACTION_NAME]) VALUES (6, 4, N'Marketing', N'Menu', N'Marketing_Action')
INSERT [dbo].[Menu_List] ([M_ID], [M_P_ID], [M_NAME], [CONTROLLER_NAME], [ACTION_NAME]) VALUES (7, 4, N'Finiance', N'Menu', N'Finiance_Action')
SET IDENTITY_INSERT [dbo].[Menu_List] OFF

Step 2

Now create simple MVC appliation using visual studio. After creating project add edmx file by right clicking on project go to Add => New Item => (from right side templates) select Data => Select ADO.NET Entity Data Model => Give proper name to it and click on add button.

Then select your table from database & create .edmx file into your ptoject. After adding the file autmatically connection string will get added into web config file.

Step 3

Now create model as below and add some properties; this model will be used into a controller & view.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
namespace Dynamic_Menu.Models
{
public class Menu_List
{
public int M_ID { get; set; }
public int? M_P_ID { get; set; }
public string M_NAME { get; set; }
public string CONTROLLER_NAME { get; set; }
public string ACTION_NAME { get; set; }
}
}

Step 4

Now add controller into our application and write below code into it. From action method GetMenuList() we will get data from our database using linq query.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace Dynamic_Menu.Controllers
{
public class HomeController : Controller
{
MenuEntities objEntity = new MenuEntities();
public ActionResult Index()
{
return View();
}
public ActionResult GetMenuList()
{
try
{
var result = (from m in objEntity.Menu_Tree
select new Dynamic_Menu.Models.Menu_List
{
M_ID = m.M_ID,
M_P_ID = m.M_P_ID,
M_NAME = m.M_NAME,
CONTROLLER_NAME = CONTROLLER_NAME,
ACTION_NAME = ACTION_NAME,
}).ToList();
return View("Menu", result);
}
catch (Exception ex)
{
var error = ex.Message.ToString();
return Content("Error");
}
}
}
}

Step 5

Now create a view for Index action method as like.

@{
ViewBag.Title = "Index";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<h2>Index</h2>

Now create layout view for our application. Also create one partial view (name Menu.cshtml) as brlow, which will render menu tree list when we are going to call action method from our layout page. In this partial view we are getting data into a IEnumerable list format and we are applying some logic as below,

Note

This is just demo / sample application, according to your requirement you can add foreach loop for more hierarchy levels. This is only a two level menu tree strucure.

_Layout.cshtml =>

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>@ViewBag.Title</title>
@Html.Action("GetMenuList", "Home")
</head>
<body>
<div>
@RenderBody()
</div>
</body>
</html>

Menu.cshtml =>

@model IEnumerable<Dynamic_Menu.Models.Menu_List>
<div>
<ul>
@{foreach (var item in Model.Where(s => s.M_P_ID == 0).GroupBy(Obj => new { Obj.M_ID }).Distinct().ToList())
{
<li>
<a href="#">
@item.FirstOrDefault().M_NAME
</a>
<ul>
@{foreach (var firstItem in (Model.Where(s => s.M_P_ID == item.FirstOrDefault().M_ID).ToList()))
{
<li>
<a href="#">
@firstItem.M_NAME
</a>
<ul>
@foreach (var secondItem in (Model.Where(s => s.M_P_ID == firstItem.M_ID).ToList()))
{
<li>
<a href="/@secondItem.CONTROLLER_NAME/@secondItem.ACTION_NAME">
@secondItem.M_NAME
</a>
</li>
}
</ul>
</li>
}
}
</ul>
</li>
}
}
</ul>
</div>

Step 5

Now create another controller to render views whenever we are clicking on hyper links from menu, it will redirect to that view by using controller name & action name

namespace Dynamic_Menu.Controllers
{
public class MenuController : Controller
{
public ActionResult Computer_Action()
{
return View();
}
public ActionResult Maths_Action()
{
return View();
}
public ActionResult Marketing_Action()
{
return View();
}
public ActionResult Finiance_Action()
{
return View();
}
}
}

Create some views for above action as like

View For Computer_Action as,

@{
Layout = "~/Views/Shared/_Layout.cshtml";
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Computer_Action</title>
</head>
<body>
<div>
<h2>Welcome To Computer View</h2>
</div>
</body>
</html>

View For MCS_Action as

@{
Layout = "~/Views/Shared/_Layout.cshtml";
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>MCS_Action</title>
</head>
<body>
<div>
<h2>Welcome To MCS View</h2>
</div>
</body>
</html>

Step 6

Now run the application.

Index view after running the application into a browser.

If we click on menu then our output will be:

Summary

In this article, you learned how to bind menu and sub menu dynamically in ASP.NET MVC from database using linq.