ساخت منو و زیر منوی داینامیک در 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
- 6k بازدید
- 16 تشکر