Dynamic Vertical Css Menu Using jQuery, Css and C#.net In Asp.net MVC

This article will show you how you can create a dynamic vertical css menu using jQuery, Css and C#.net In Asp.net MVC.

Some of my previous articles are as follows: jQuery Message Open As Modal Dialog Box In Asp.Net Without Refresh With Ok Button, jQuery Datepicker Calendar With Multiple Months in Asp.net, Autocomplete Textbox Using jQuery In Asp.Net and C#.Net, jQuery Datepicker Calendar With Restrict Date Range in Asp.net, jQuery Dialog Box Open On Button Click In Asp.Net, Responsive Grid Design Example Using Css in Asp.Net MVC,HTML, Stylish RadioButton, DropdownList, ListBox and TextBox Control In Asp.Net Using Css.

So for this article first we will create a new asp.net MVC application and add a model class file and add the below code into it.

using System; using System.Collections.Generic; using System.Linq; using System.Web; namespace MvcApplication8.Models {     public class MenuModel     {         public List<ParentMenu> ParentMenuModel { get; set; }         public List<ChildMenu> ChildMenuModel { get; set; }     }     public class ChildMenu     {         public int ParentId { get; set; }         public string ChildName { get; set; }         public string ChildUrl { get; set; }     }     public class ParentMenu     {         public int Id { get; set; }         public string ParentName { get; set; }         public string ParentUrl { get; set; }     } }

In above code I have created a model class file with parent and child menu item.

Now add controller class file and add the below code into your controller class file.

using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc; using MvcApplication8.Models; namespace MvcApplication8.Controllers {     public class HomeController : Controller     {         //         // GET: /Home/         public ActionResult Index()         {             MenuModel objmenumodel = new MenuModel();             objmenumodel.ChildMenuModel = new List<ChildMenu>();             objmenumodel.ChildMenuModel = GetChildList();             objmenumodel.ParentMenuModel = new List<ParentMenu>();             objmenumodel.ParentMenuModel = ParentMenuList();             return View(objmenumodel);         }         public List<ChildMenu> GetChildList()         {             List<ChildMenu> objchildmenu = new List<ChildMenu>();             objchildmenu.Add(new ChildMenu { ParentId = 2, ChildName = "Child Product1", ChildUrl = "#" });             objchildmenu.Add(new ChildMenu { ParentId = 2, ChildName = "Child Product2", ChildUrl = "#" });             objchildmenu.Add(new ChildMenu { ParentId = 2, ChildName = "Child Product3", ChildUrl = "#" });             objchildmenu.Add(new ChildMenu { ParentId = 2, ChildName = "Child Product4", ChildUrl = "#" });             return objchildmenu;         }         public List<ParentMenu> ParentMenuList()         {             List<ParentMenu> objparentmenu = new List<ParentMenu>();             objparentmenu.Add(new ParentMenu { Id = 1, ParentName = "Home", ParentUrl = "#" });             objparentmenu.Add(new ParentMenu { Id = 2, ParentName = "Products", ParentUrl = "#" });             objparentmenu.Add(new ParentMenu { Id = 3, ParentName = "About", ParentUrl = "#" });             objparentmenu.Add(new ParentMenu { Id = 4, ParentName = "Contact Us", ParentUrl = "#" });             return objparentmenu;         }     } }

In above code I have created two function in which I have added a static data. you just replace this with your DB data by mankind your menu item collection.

Now create a view and add the below code into your view.

@model MvcApplication8.Models.MenuModel @{     ViewBag.Title = " Dynamic Vertical Css Menu Using jQuery, Css and C#.net In Asp.net MVC  "; } <link href="../../Css/styles.css" rel="stylesheet" type="text/css" /> <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script> <script src="../../Scripts/script.js" type="text/javascript"></script> @using (Html.BeginForm("Index", "Home")) {     <div id='cssmenu'>         <ul>             @{     foreach (var iteparent in Model.ParentMenuModel)     {         var childitem = Model.ChildMenuModel.Where(m => m.ParentId == iteparent.Id);         if (childitem.Count() == 0)         {                                      <li><a href='@iteparent.ParentUrl'><span>@iteparent.ParentName </span></a></li>         }         else         {                 <li class='active has-sub'><a href='@iteparent.ParentUrl'><span>@iteparent.ParentName</span></a>                     @if (childitem.Count() > 0)                     {                                       <ul>                             @foreach (var itemchild in childitem)                             {                                 <li class='last'><a href='@itemchild.ChildUrl'><span>@itemchild.ChildName</span></a>                                 </li>                             }                         </ul>                     }</li>         }     }                             }         </ul>     </div> }

In above code I have added the lop of parent and then  on the bases of parent I have filtered the child item, and bind it to the li and ul.

Now we have done run the application to check the output.

now click on product menu item.

DOWNLOAD