Create Accordian dynamically in MVC -4

Posted: September 30, 2015 in C#
Tags:

Model.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
namespace Accordion_Menu_MVC.Models
{
public class MenuModel
{
public List<MainMenu> MainMenuModel { get; set; }
public List<SubMenu> SubMenuModel { get; set; }
}
public class MainMenu
{
public int ID;
public string MainMenuItem;
public string MainMenuURL;
}
public class SubMenu
{
public int MainMenuID;
public string SubMenuItem;
public string SubMenuURL;
}
}

 

Controller.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using Accordion_Menu_MVC.Models;
namespace Accordion_Menu_MVC.Controllers
{
public class HomeController : Controller
{
//
// GET: /Home/
public ActionResult Index()
{
MenuModel ObjMenuModel = new MenuModel();
ObjMenuModel.MainMenuModel = new List<MainMenu>();
ObjMenuModel.MainMenuModel = GetMainMenu();
ObjMenuModel.SubMenuModel = new List<SubMenu>();
ObjMenuModel.SubMenuModel = GetSubMenu();
return View(ObjMenuModel);
}
public List<MainMenu> GetMainMenu()
{
List<MainMenu> ObjMainMenu = new List<MainMenu>();
ObjMainMenu.Add(new MainMenu { ID = 1, MainMenuItem = “Mobile”, MainMenuURL = “http://www.google.com&#8221; });
ObjMainMenu.Add(new MainMenu { ID = 2, MainMenuItem = “Speaker”, MainMenuURL = “#” });
ObjMainMenu.Add(new MainMenu { ID = 3, MainMenuItem = “Watch”, MainMenuURL = “#” });
ObjMainMenu.Add(new MainMenu { ID = 4, MainMenuItem = “Clothes”, MainMenuURL = “#” });
return ObjMainMenu;
}
public List<SubMenu> GetSubMenu()
{
List<SubMenu> ObjSubMenu = new List<SubMenu>();
ObjSubMenu.Add(new SubMenu { MainMenuID = 1, SubMenuItem = “Apple”, SubMenuURL = “#” });
ObjSubMenu.Add(new SubMenu { MainMenuID = 1, SubMenuItem = “Samsung”, SubMenuURL = “#” });
ObjSubMenu.Add(new SubMenu { MainMenuID = 1, SubMenuItem = “Nokia”, SubMenuURL = “#” });
ObjSubMenu.Add(new SubMenu { MainMenuID = 1, SubMenuItem = “Motorola”, SubMenuURL = “#” });
return ObjSubMenu;
}
}
}

View.cs

@model Accordion_Menu_MVC.Models.MenuModel
@{
ViewBag.Title = “Dynamic Accordion Menu Using jQuery in ASP.NET MVC”;
}
<link href=”Css/styles.css” rel=”stylesheet” type=”text/css” />
http://code.jquery.com/jquery-latest.min.js

$(document).ready(function () {
$(“#accordian h3”).click(function () {
$(“#accordian ul ul”).slideUp();
if (!$(this).next().is(“:visible”)) {
$(this).next().slideDown();
}
});
});

@using (Html.BeginForm(“Index”, “Home”))
{

  • @{
    foreach (var MenuItem in Model.MainMenuModel)
    {
    var SubMenuItem = Model.SubMenuModel.Where(m => m.MainMenuID == MenuItem.ID);

    @MenuItem.MainMenuItem

    if (SubMenuItem.Count() > 0)
    {

    }

    }
    }

}

Style.css

<style>
/*Basic reset*/
* {margin: 0; padding: 0;}
body {
background: White;
font-family: Nunito, arial, verdana;
}
#accordian {
background: #004050;
width: 250px;
margin: 100px auto 0 auto;
color: white;
/*Some cool shadow and glow effect*/
box-shadow:
0 5px 15px 1px rgba(0, 0, 0, 0.6),
0 0 200px 1px rgba(255, 255, 255, 0.5);
}
/*heading styles*/
#accordian h3 {
font-size: 12px;
line-height: 34px;
padding: 0 10px;
cursor: pointer;
/*fallback for browsers not supporting gradients*/
background: #003040;
background: linear-gradient(#003040, #002535);
}
/*heading hover effect*/
#accordian h3:hover {
text-shadow: 0 0 1px rgba(255, 255, 255, 0.7);
}
/*iconfont styles*/
#accordian h3 a {
color: white;
text-decoration: none;
font-size: 12px;
line-height: 27px;
padding: 0 15px;
/*transition for smooth hover animation*/
}
#accordian h3 a:hover {
color:#E1E1E1;
}
/*list items*/
#accordian li {
list-style-type: none;
background:#4D6974;
}
/*links*/
#accordian ul ul li a {
color: white;
text-decoration: none;
font-size: 11px;
line-height: 27px;
display: block;
padding: 0 15px;
/*transition for smooth hover animation*/
transition: all 0.15s;
}
/*hover effect on links*/
#accordian ul ul li a:hover {
background: #003545;
border-left: 5px solid lightgreen;
}
/*Lets hide the non active LIs by default*/
#accordian ul ul {
display: none;
}
#accordian li.active ul {
display: block;
}
</style>

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s