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.