dynamic menu using razor page Application in .net core ?

Question

Hi , How to make the Dynamic menu from database in razor page appliication .Can any one suggest with sample code . Thanks in advance , Karthik.K

Jithu Thomas · Answer

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.

Karthik K · Answer

@jithu Thomas , this is my _Layout.cshtml page : DyMenu aria-expanded="false" aria-label="Toggle navigation"> @Html.Partial("_PartialMenu") @RenderBody() This is my _PartialMenu.cshtml Page @using DyMenu.Pages @model DyMenu.Pages.IndexModel @ViewBag.Title @foreach (var item in Model.menuItems) { @item.Title } 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

dynamic menu using razor page Application in .net core ?

Answers (2)