how create Dynamic Menu Razor Pages asp.net core ?

Question

Hi , can anyone suggest with sample for to achieve Dynamic menu with submenu from databse in asp.net core Razor Pages . Thanks you ,

Vishal Yelve · Answer

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 @ViewBag.Title @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 } } } $(function () { //Remove the style attributes. $(".navbar-nav li, .navbar-nav a, .navbar-nav ul").removeAttr('style'); //Apply the Bootstrap class to the Submenu. $(".dropdown-menu").closest("li").removeClass().addClass("dropdown-toggle"); //Apply the Bootstrap properties to the Submenu. $(".dropdown-toggle").find("a").eq(0).attr("data-toggle", "dropdown").attr("aria-haspopup", "true").attr("aria-expanded", "false").append(" "); //Apply the Bootstrap "active" class to the selected Menu item. $("a.selected").closest("li").addClass("active"); $("a.selected").closest(".dropdown-toggle").addClass("active"); }); 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

Sophia Carter · Answer

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.

how create Dynamic Menu Razor Pages asp.net core ?

Answers (2)