ساخت منو و زیر منوی داینامیک در Asp.Net Mvc
دوشنبه 1 تیر 1394در این مقاله قصد داریم نحوه ساخت منو و زیر منو به صورت داینامیک و در لحظه اجرا را به شما آموزش دهیم .
مدل ما به شکل زیر است
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;
}
}
MainMenu برای منوی های والد استفاده میشود
SubMenu برای زیر منوها استفاده میشود
کنترلر به شکل زیر است
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 = "ورزشی", MainMenuURL = "#" });
ObjMainMenu.Add(new MainMenu { ID = 2, MainMenuItem = "هنری", MainMenuURL = "#" });
ObjMainMenu.Add(new MainMenu { ID = 3, MainMenuItem = "فرهنگی", MainMenuURL = "#" });
ObjMainMenu.Add(new MainMenu { ID = 4, MainMenuItem = "اقتصادی", MainMenuURL = "#" });
return ObjMainMenu;
}
public List<SubMenu> GetSubMenu()
{
List<SubMenu> ObjSubMenu = new List<SubMenu>();
ObjSubMenu.Add(new SubMenu { MainMenuID = 1, SubMenuItem = "کفش ورزشی", SubMenuURL = "#" });
ObjSubMenu.Add(new SubMenu { MainMenuID = 1, SubMenuItem = "ساک ورزشی", SubMenuURL = "#" });
ObjSubMenu.Add(new SubMenu { MainMenuID = 1, SubMenuItem = "ابزار ورزشی", SubMenuURL = "#" });
ObjSubMenu.Add(new SubMenu { MainMenuID = 1, SubMenuItem = "لباس ورزشی", SubMenuURL = "#" });
return ObjSubMenu;
}
متد GetMainMenu برای ساختن منوهای اصلی و پر کردن لیستی از جنس MainMenu به کار برده شده است
و متد GetSubMenu برای ساختن زیر منوها ، MainMenuID مشخص کنند منوی اصلی این زیر منو است
View به شکل زیر است
@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" />
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#accordian h3").click(function () {
$("#accordian ul ul").slideUp();
if (!$(this).next().is(":visible")) {
$(this).next().slideDown();
}
});
});
</script>
@using (Html.BeginForm("Index", "Home"))
{
<div id="accordian">
<ul>
<li>
@{
foreach (var MenuItem in Model.MainMenuModel)
{
var SubMenuItem = Model.SubMenuModel.Where(m => m.MainMenuID == MenuItem.ID);
<h3><a href="@MenuItem.MainMenuURL"> @MenuItem.MainMenuItem </a></h3>
if (SubMenuItem.Count() > 0)
{
<ul>
@foreach (var SubItem in SubMenuItem)
{
<li><a href='@SubItem.SubMenuURL'>@SubItem.SubMenuItem</a></li>
}
</ul>
}
}
}
</ul>
</div>
}
فایل استایل این منو که به شکل آکاردئون منو را میسازد به شکل زیر است
<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>
نمونه ضمیمه شده است .
- ASP.net MVC
- 7k بازدید
- 16 تشکر