Web
Analytics
dynamically add menu and submenus in asp.net mvc using entity framework | Angular | ASP.NET Tutorials

For Consultation : +91 9887575540

Stay Connected :

In this example, I am going to create two  tables(MainMenu, SubMenu)

Database Script for database tables

CREATE TABLE [dbo].[MainMenu](
	[id] [int] IDENTITY(1,1) NOT NULL,
	[menuname] [varchar](max) NULL,
	[menuurl] [nvarchar](max) NULL,
 CONSTRAINT [PK_MainMenu] PRIMARY KEY CLUSTERED 
(
	[id] ASC
)WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]
) ON [PRIMARY] TEXTIMAGE_ON [PRIMARY]

GO

SET ANSI_PADDING OFF
GO


SET QUOTED_IDENTIFIER ON
GO

CREATE TABLE [dbo].[SubMenu](
	[id] [int] IDENTITY(1,1) NOT NULL,
	[submenuname] [nvarchar](max) NULL,
	[submenuurl] [nvarchar](max) NULL,
	[mainmenuid] [int] NULL,
 CONSTRAINT [PK_SubMenu] PRIMARY KEY CLUSTERED 
(
	[id] ASC
)WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]
) ON [PRIMARY] TEXTIMAGE_ON [PRIMARY]

GO

ALTER TABLE [dbo].[SubMenu]  WITH CHECK ADD  CONSTRAINT [FK_SubMenu_MainMenu] FOREIGN KEY([mainmenuid])
REFERENCES [dbo].[MainMenu] ([id])
GO

ALTER TABLE [dbo].[SubMenu] CHECK CONSTRAINT [FK_SubMenu_MainMenu]
GO


Insert some Dummy Data to Show 

Create New ASP.NET MVC Web application Project

  1. Create a new Project. Open Visual Studio 2013.
  2. Go to “File” => “New” => “Project…”.
  3. Select “Web” in installed templates.
  4. Select “ASP.NET MVC Web Application”.
  5. Enter the Name and choose the location.
  6. Click “OK”.

In this example, I am going to use Entity Framework code first approach so we have to create two model classes for mainmenu and submenu tables and one data context for table mappings.

 


MainMenu.cs

namespace MenuSubMenu.Models
{
    using System.Collections.Generic;
    using System.ComponentModel.DataAnnotations.Schema;

    [Table("MainMenu")]
    public partial class MainMenu
    {
        [System.Diagnostics.CodeAnalysis.SuppressMessage("Microsoft.Usage", "CA2214:DoNotCallOverridableMethodsInConstructors")]
        public MainMenu()
        {
            SubMenus = new HashSet<SubMenu>();
        }

        public int id { get; set; }

        public string menuname { get; set; }

        public string menuurl { get; set; }

        [System.Diagnostics.CodeAnalysis.SuppressMessage("Microsoft.Usage", "CA2227:CollectionPropertiesShouldBeReadOnly")]
        public virtual ICollection<SubMenu> SubMenus { get; set; }
    }
}

SubMenu.cs

namespace MenuSubMenu.Models
{
    using System.ComponentModel.DataAnnotations.Schema;

    [Table("SubMenu")]
    public partial class SubMenu
    {
        public int id { get; set; }

        public string submenuname { get; set; }

        public string submenuurl { get; set; }

        public int? mainmenuid { get; set; }

        public virtual MainMenu MainMenu { get; set; }
    }
}

Model2.cs(Data Context Class)

namespace MenuSubMenu.Models
{
    using System.Data.Entity;

    public partial class Model2 : DbContext
    {
        public Model2()
            : base("name=Model2")
        {
           
        }

        public virtual DbSet<MainMenu> MainMenus { get; set; }
        public virtual DbSet<SubMenu> SubMenus { get; set; }

        protected override void OnModelCreating(DbModelBuilder modelBuilder)
        {
            modelBuilder.Entity<MainMenu>()
                .Property(e => e.menuname)
                .IsUnicode(false);
        }
    }
}




Pass Connection String in Web.config

 <connectionStrings>
       <add name="Model2" connectionString="data source=.\yogeshdotnet;initial catalog=angulardemo;integrated security=True;multipleactiveresultsets=True;application name=EntityFramework" providerName="System.Data.SqlClient" />
  </connectionStrings>

Create New Controller(HomeController) and write Index action and attach view with index action

using MenuSubMenu.Models;
using System.Linq;
using System.Web.Mvc;
using System.Data.Entity;

namespace MenuSubMenu.Controllers
{
    public class HomeController : Controller
    {
        // GET: Home
        public ActionResult Index()
        {
            using (var db = new Model2())
            {
              
                var d = db.MainMenus.Include(c => c.SubMenus).ToList();
                return View(d);
            }
           
        }
    }
}

index.cshtml

@model IEnumerable<MenuSubMenu.Models.MainMenu>

@{
    ViewBag.Title = "Index";
    Layout = null;

}

@*<link href="~/Content/themes/base/jquery-ui.css" rel="stylesheet" />*@
<link href="~/Content/bootstrap.css" rel="stylesheet" />
<script src="~/Scripts/jquery-3.3.1.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>

@*<script src="~/Scripts/jquery-ui-1.12.1.js"></script>*@
<h2>Index</h2>
<script>
    $(document).ready(function(){
    $('.nav li  > .sub-menu').parent().hover(function () {
        var submenu = $(this).children('.sub-menu');
        if ($(submenu).is(':hidden')) {
            $(submenu).slideDown(200);
        } else {
            $(submenu).slideUp(200);
        }
    });
    })

</script>
<style>
    .nav li {
  list-style: none;
  padding: 5px 10px;
  width:300px;
}

.nav > li {
  float: left;
}

.nav .sub-menu {
  display: none;
}
</style>

<nav>
    <ul class="nav">
        @{
            foreach (var item in Model)
            {
            <li>
                <a href="/Page/@item.menuurl">@item.menuname</a>
                @if (item.SubMenus.Count > 0)
                {
                <ul class="sub-menu">
                    @foreach (var item2 in item.SubMenus)
                    {
                        <li><a href="/Category/@item2.submenuurl/@item2.id">@item2.submenuname</a></li>
                    }
                </ul>
                }
            </li>
                }
            }
    </ul>

</nav>

Output

Download Source Code