dynamic menu using razor page Application in .net core ?

@jithu Thomas ,

 

this is my  _Layout.cshtml   page : 

   

 

This is my   _PartialMenu.cshtml Page 
@using DyMenu.Pages
@model DyMenu.Pages.IndexModel 



   
   


    

 

This is my Index.cshtml.cs  page . 
    public class IndexModel : PageModel
    {
        #region  Declartion 
        private IMenuItemAccess _menuItemAccessDA;
        private readonly IConfiguration _configuration;
        #endregion
        public IndexModel(IConfiguration configuration)
        { 
         _configuration = configuration;
        }
        [BindProperty]
        public IEnumerable menuItems { get; set; }
        [BindProperty]
        public MenuItem menuItemobj { get; set; }
        public void OnGet()
        {
            GetMenu();
        }
        public IEnumerable GetMenu()
        {
            string dbconnection = Utilities.InitializeConnectionString(_configuration);
            _menuItemAccessDA = new MenuItemAccess(dbconnection);
            menuItems = _menuItemAccessDA.GetMenuList();
            ViewData["MenuModelData"] = menuItems;
            return menuItems;
        }

       database : Menu 

       1, 0, 'Index', 'Index'
       2, 0, 'Privacy', 'Privacy'
       3, 0, 'Service', 'Service'
       4, 0, 'Products', 'Products'
       5, 0, 'Register', 'Register'
     Other than index page not working . the following error thrown we i run . can anyone suggest with solution 
     Here Menu item is generated from index.cshtml.somewhere in this part made mistake. i am not sure how to pass the 
     menuitem model  commonly   
     Error : 
     InvalidOperationException: The model item passed into the ViewDataDictionary is of type 'DyMenu.Pages.ProductsModel', 
     but this ViewDataDictionary instance requires a model item of type 'DyMenu.Pages.IndexModel'.
     Thanks in advance 
     Karthik.K 

Step 1

Create a model class that represents your menu items. This model class should map to your database table. Example as follows:

public class MenuItem
{
    public int Id { get; set; }
    public string Title { get; set; }
    public string Url { get; set; }
    public int? ParentId { get; set; }
}

Step 2

Create a data access layer to fetch menu items from the database. You can use Entity Framework Core or any other data access technology you prefer.

Example by using Entity Framework Core:

public class MenuService
{
    private readonly ApplicationDbContext _context;
    public MenuService(ApplicationDbContext context)
    {
        _context = context;
    }
    public List GetMenuItems()
    {
        return _context.MenuItems.ToList();
    }
}

Step 3

In your Razor Page (e.g., Index.cshtml), inject the MenuService and fetch the menu items. Then, recursively render the menu structure.

@page
@model IndexModel
@using YourNamespace.Models
@inject MenuService MenuService

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

            @item.Title
            @RenderSubMenu(item)
        
    }

@functions {
    public void RenderSubMenu(MenuItem parentItem)
    {
        var subMenuItems = Model.MenuItems.Where(m => m.ParentId == parentItem.Id).ToList();
        if (subMenuItems.Any())
        {
            

                @foreach (var subItem in subMenuItems)
                {
                    

                        @subItem.Title
                        @RenderSubMenu(subItem)
                    
                }
            
        }
    }
}

Step 4

Please retrieve the menu items using the MenuService in your Razor Page's Page Model (Index.cshtml.cs).

public class IndexModel : PageModel
{
    private readonly MenuService _menuService;
    public IndexModel(MenuService menuService)
    {
        _menuService = menuService;
    }
    public List MenuItems { get; set; }
    public void OnGet()
    {
        MenuItems = _menuService.GetMenuItems();
    }
}

Step 5

Configruation of the services in Startup.cs

public void ConfigureServices(IServiceCollection services)
{
    // Add database context
    services.AddDbContext(options =>
        options.UseSqlServer(Configuration.GetConnectionString("DefaultConnection")));
    // Add the MenuService
    services.AddScoped();
    // ...
}

Note: Ensure you have your database context configured and your connection string set in appsettings.json.