ساخت منو و زیر منوی داینامیک در Asp.Net Mvc

در این مقاله قصد داریم نحوه ساخت منو و زیر منو به صورت داینامیک و در لحظه اجرا را به شما آموزش دهیم .

ساخت منو و زیر منوی داینامیک در Asp.Net Mvc

مدل ما به شکل زیر است

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>

نمونه ضمیمه شده است .

 

فایل های ضمیمه