how create Dynamic Menu Razor Pages asp.net core ?

Hi Karthik,

Database

CREATE TABLE [Menus_MVC]
(    
    [MenuId] [int] IDENTITY(1,1) NOT NULL PRIMARY KEY,    
    [ParentMenuId] [int] NULL,    
    [Title] [varchar](50) NULL,    
    [Controller] [varchar](50) NULL,    
    [Action] [varchar](50) NULL
)
GO    

INSERT [dbo].[Menus_MVC] VALUES (0, 'Home', 'Home', 'Index')    
INSERT [dbo].[Menus_MVC] VALUES (0, 'Services', 'Home', 'javascript:;')    
INSERT [dbo].[Menus_MVC] VALUES (2, 'Consulting', 'Home', 'Consulting')    
INSERT [dbo].[Menus_MVC] VALUES (2, 'Outsourcing', 'Home', 'Outsourcing')    
INSERT [dbo].[Menus_MVC] VALUES (0, 'About', 'Home', 'About')    
INSERT [dbo].[Menus_MVC] VALUES (0, 'Contact', 'Home', 'Contact')  

Model

public class MenuModel
{
    public int MenuId { get; set; }
    public int? ParentMenuId { get; set; }
    public string Title { get; set; }
    public string Controller { get; set; }
    public string Action { get; set; }
}

Controller
 

public class HomeController : Controller
{
    // GET: Home
    public ActionResult Index()
    {
        return View();
    }

    public ActionResult GetMenuData()
    {
        MenuEntities entities = new MenuEntities();
        var result = (from m in entities.Menus_MVC
                        select new MenuModel
                        {
                            MenuId = m.MenuId,
                            ParentMenuId = m.ParentMenuId,
                            Title = m.Title,
                            Action = m.Action,
                            Controller = m.Controller
                        }).ToList();
        return View("Menu", result);
    }

    public ActionResult Consulting()
    {
        return View();
    }

    public ActionResult Outsourcing()
    {
        return View();
    }

    public ActionResult About()
    {
        return View();
    }

    public ActionResult Contact()
    {
        return View();
    }
}

 

Layout

    
    
    
    
    


    @Html.Action("GetMenuData", "Home")
    

    

        @RenderBody()
    

View -> Index
 

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

Index

Menu
 

@model IEnumerable

    

        

            
                Toggle navigation
            
            Home Page
        
        

            

                

                    @foreach (var item in Model.Where(s => s.ParentMenuId == 0).GroupBy(Obj => new { Obj.MenuId }).Distinct().ToList())
                    {
                        var data = Model.Where(s => s.ParentMenuId == item.FirstOrDefault().MenuId).ToList();
                        if (data.Count == 0)
                        {
                            
@item.FirstOrDefault().Title
                        }
                        else
                        {
                            

                                @item.FirstOrDefault().Title
                                

                                    @foreach (var firstItem in (Model.Where(s => s.ParentMenuId == item.FirstOrDefault().MenuId).ToList()))
                                    {
                                        
@firstItem.Title
                                    }
                                
                            
                        }
                    }
                
            
        
    

 

Consulting

@{
    ViewBag.Title = "Consulting";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

Consulting

Outsourcing

@{
    ViewBag.Title = "Outsourcing";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

Outsourcing

Contact
 

@{
    ViewBag.Title = "Contact";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

Contact

About
 

@{
    ViewBag.Title = "About";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

About

Creating a dynamic menu with submenus from a database in ASP.NET Core Razor Pages involves a few steps. Here is a general outline of how you can achieve this:

1. Database Design: Start by designing a database table to store your menu items. You will typically have fields such as `MenuId`, `Title`, `URL`, and `ParentId` to establish the hierarchy for submenus.

2. Model and DbContext: Create a model class in your ASP.NET Core Razor Pages application that corresponds to your database table. Then, set up a `DbContext` to interact with your database.

3. Retrieve Menu Data: Use Entity Framework Core to query the database and retrieve the menu items. You can fetch the menu items and their corresponding submenus based on the `ParentId` relationship.

4. Dynamic Menu Rendering: In your Razor Pages, you can iterate over the retrieved menu items and render them dynamically using HTML and Razor syntax. You can use loops to handle both parent menu items and their respective submenus.

5. CSS Styling: Apply CSS styling to your menu elements to achieve the desired layout, including dropdown functionality for submenus.

Here is a simplified example to give you an idea of how this could be implemented:

// MenuItem model class
public class MenuItem
{
    public int MenuId { get; set; }
    public string Title { get; set; }
    public string URL { get; set; }
    public int? ParentId { get; set; }
}

// DbContext class
public class MenuDbContext : DbContext
{
    public DbSet MenuItems { get; set; }
}

// Razor Page
@page
@model YourPageModel


    @foreach (var item in Model.MenuItems.Where(x => x.ParentId == null))
    {
        

            @item.Title
            @if (Model.HasSubmenus(item.MenuId))
            {
                

                    @foreach (var subItem in Model.GetSubmenus(item.MenuId))
                    {
                        
@subItem.Title
                    }
                
            }
        
    }

In this example, `YourPageModel` would contain methods like `HasSubmenus` and `GetSubmenus` to manage the submenu data retrieval based on the parent menu item.

Remember to adapt this example to your specific project structure and database schema. Additionally, consider implementing security measures to prevent unauthorized access to your dynamic menu data.