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:
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.
0 comments:
Please let me know your view