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

دوشنبه 1 تیر 1394

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

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

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

 

ایمان مدائنی

نویسنده 1299 مقاله در برنامه نویسان

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

در صورتی که در رابطه با این مقاله سوالی دارید، در تاپیک های انجمن مطرح کنید