Bootstrap Style Dynamic jQuery Dropdowns Menu Using Asp.Net MVC In C#.Net

This article will show you how you can create a dynamic Bootstrap style jquery menu using jquery in Asp.net MVC. This article you can use in your MVC2,MVC3,MVC4,MVC5,MVC6 applications.

Some of my previous articles are as follows: Blink Title or Multiple Browser Title Using jQuery in Asp.Net, MVC, Social Share Buttons of Facebook, Twitter, Google Plus and Pinterest Using jQuery in Asp.Net MVC, Bootstrap 3 and jQuery Form Validation Plugin in Asp.Net MVC, MultiSelect DropdownList Using jQuery in Asp.Net MVC and C#.Net, Three Level Menus With Disable Menu Item Using jQuery In Asp.Net, jQuery Digital Clock For Asp.Net, MVC and HTML Applications, jQuery Datepicker Calendar With Slide Down Effect In Asp.Net.

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

using System; using System.Collections.Generic; using System.Linq; using System.Web; namespace MvcApplication1.Models {     public class MenuItemListModel     {         public List<Menu> MenuItemList { get; set; }     }     public class Menu     {         public string MenuText { get; set; }         public string Url { get; set; }     } }

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

using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc; using MvcApplication1.Models; namespace MvcApplication1.Controllers {     public class HomeController : Controller     {         //         // GET: /Home/         public ActionResult Index()         {             MenuItemListModel menuItemModel = new MenuItemListModel();             menuItemModel.MenuItemList = new List<Menu>();             menuItemModel.MenuItemList.Add(new Menu { MenuText = "List Item 1", Url = "#" });             menuItemModel.MenuItemList.Add(new Menu { MenuText = "List Item 2", Url = "#" });             menuItemModel.MenuItemList.Add(new Menu { MenuText = "List Item 3", Url = "#" });             menuItemModel.MenuItemList.Add(new Menu { MenuText = "List Item 4", Url = "#" });             menuItemModel.MenuItemList.Add(new Menu { MenuText = "List Item 5", Url = "#" });             menuItemModel.MenuItemList.Add(new Menu { MenuText = "List Item 6", Url = "#" });             menuItemModel.MenuItemList.Add(new Menu { MenuText = "List Item 7", Url = "#" });             menuItemModel.MenuItemList.Add(new Menu { MenuText = "List Item 8", Url = "#" });             menuItemModel.MenuItemList.Add(new Menu { MenuText = "List Item 9", Url = "#" });             return View(menuItemModel);         }     } }

Now create a view of the action result.

@model MvcApplication1.Models.MenuItemListModel @{     ViewBag.Title = "Bootstrap Style Dynamic jQuery Dropdowns Menu Using Asp.Net MVC In C#.Net"; } <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script> <script src="../../Js/jquery.dropdown.min.js" type="text/javascript"></script> <link href="../../Css/jquery.dropdown.css" rel="stylesheet" type="text/css" /> <a href="#" data-jq-dropdown="#jq-dropdown">Click To Open Menu</a> <div id="jq-dropdown" class="jq-dropdown jq-dropdown-tip">     <ul class="jq-dropdown-menu">         @{             int count = 1;             foreach (var item in Model.MenuItemList)             {             <li><a href="@item.Url">@item.MenuText</a></li>             if (count == 3)             {                 <li class="jq-dropdown-divider"></li>                 count = 0;             }             count++;             }         }     </ul> </div>

In above code I have added dropdown.js file and .cs file to the view. Now apply loop for the model. In this I have shown item in the slot of 3 so as value become 3 it will add a devider.

DOWNLOAD