Дизайн Многоуровневое (3) меню в MVC 4 RAZOR Просмотр с использованием C#

Question

Я хочу создать многоуровневое меню для своего приложения.

контроллер код класса:

public ActionResult L_SportsMenuLoad() 
     { 
      L_SportsMenu objmenumodel = new L_SportsMenu(); 
      objmenumodel.MainMenuModel = new List<MainMenu>(); 
      objmenumodel.MainMenuModel = GetMainMenu(); 
      objmenumodel.SubMenuModel = new List<SubMenu>(); 
      objmenumodel.SubMenuModel = GetSubMenu(); 

      objmenumodel.childSubMenuModel = new List<childSubMenu>(); 
      objmenumodel.childSubMenuModel = GetSubSubMenu(); 

      return View(objmenumodel); 
     } 
     public List<MainMenu> GetMainMenu() 
     { 
      List<MainMenu> ObjMainMenu = new List<MainMenu>(); 
      ObjMainMenu.Add(new MainMenu { ID = 1, MainMenuItem = "Mobile", MainMenuURL = "#" }); 
      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 { subid = 1, MainMenuID = 1, SubMenuItem = "Apple", SubMenuURL = "#" }); 
      ObjSubMenu.Add(new SubMenu { subid = 2, MainMenuID = 1, SubMenuItem = "Samsung", SubMenuURL = "#" }); 
      ObjSubMenu.Add(new SubMenu { subid = 3, MainMenuID = 2, SubMenuItem = "Nokia", SubMenuURL = "#" }); 
      ObjSubMenu.Add(new SubMenu { subid = 4, MainMenuID = 3, SubMenuItem = "Motorola", SubMenuURL = "#" }); 
      ObjSubMenu.Add(new SubMenu { subid = 5, MainMenuID = 4, SubMenuItem = "INDIAN", SubMenuURL = "#" }); 
      return ObjSubMenu; 

     } 

     public List<childSubMenu> GetSubSubMenu() 
     { 
      List<childSubMenu> ObjSubSubMenu = new List<childSubMenu>(); 
      ObjSubSubMenu.Add(new childSubMenu { submenuid = 1, SubSubMenuItem = "I5", SubSubMenuURL = "#" }); 
      ObjSubSubMenu.Add(new childSubMenu { submenuid = 2, SubSubMenuItem = "Note7", SubSubMenuURL = "#" }); 
      ObjSubSubMenu.Add(new childSubMenu { submenuid = 3, SubSubMenuItem = "Lumina", SubSubMenuURL = "#" }); 
      ObjSubSubMenu.Add(new childSubMenu { submenuid = 4, SubSubMenuItem = "Motoro56la", SubSubMenuURL = "#" }); 
      ObjSubSubMenu.Add(new childSubMenu { submenuid = 5, SubSubMenuItem = "free245", SubSubMenuURL = "#" }); 
      return ObjSubSubMenu; 

     } 

класс Модель:

public class L_SportsMenu 
    { 
     public List<MainMenu> MainMenuModel { get; set; } 
     public List<SubMenu> SubMenuModel { get; set; } 
     public List<childSubMenu> childSubMenuModel { get; set; } 
    } 
    public class MainMenu 
    { 
     public int ID; 
     public string MainMenuItem; 
     public string MainMenuURL; 
    } 

    public class SubMenu 
    { 
     public int subid; 
     public int MainMenuID; 
     public string SubMenuItem; 
     public string SubMenuURL; 
    } 

    public class childSubMenu 
    { 
     public int submenuid; 
     public string SubSubMenuItem; 
     public string SubSubMenuURL; 
    } 

Здесь Главное меню & Submenu сопоставляются по идентификатору ==> MainMenuid и подменю, childSubMenu отображается на Subid == > подменю

Бритва код cshtml:

<div id="accordian" class="left_menu"> 
     <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> 
        // 

        var SubSubMenuItem = Model.childSubMenuModel.Where(m => m.submenuid == SubItem.subid); 

        if (SubSubMenuItem.Count()> 0) 
        { 
         <li> 
          @foreach (var Item in SubSubMenuItem) 
          { 
           <li><a href='@Item.SubSubMenuURL'>@Item.SubSubMenuItem</a></li> 
          } 

         </li> 

        } 
        // 
       } 
      </ul> 

    } 
       } 
     </ul> 
    </div> 

Когда я запускаю свою ошибку показывает на cshtml .. Пожалуйста, советы.

Answer 1

на основе ваших требований, ваша структура модели должна представлять собой иерархическую структуру, и должны быть представлены как:

Model.cs

public class L_SportsMenu 
{ 
    public List<MainMenu> MainMenuModel { get; set; } 
} 

public class MainMenu 
{ 
    public int ID; 
    public string MainMenuItem; 
    public string MainMenuURL; 

    public List<SubMenu> SubMenuModel { get; set; } 
} 

public class SubMenu 
{ 
    public int subid; 
    public int MainMenuID; 
    public string SubMenuItem; 
    public string SubMenuURL; 

    public List<childSubMenu> childSubMenuModel { get; set; } 
} 

public class childSubMenu 
{ 
    public int submenuid; 
    public string SubSubMenuItem; 
    public string SubSubMenuURL; 
} 

Я также обновил вид бритвы в соответствии с новым модель.

Razor.cshtml

@model YourApplicationNamespace.Models.L_SportsMenu 

    @{ 
     ViewBag.Title = "Home"; 
    } 

<h2>Home Page</h2> 
<div id="accordian" class="left_menu"> 
    <ul> 
     <li> 

      @foreach (var menuItem in Model.MainMenuModel) 
      { 
       var subMenuItem = menuItem.SubMenuModel.Where(m => m.MainMenuID == menuItem.ID); 
       <h3> 
        <a href="@menuItem.MainMenuURL"> @menuItem.MainMenuItem </a> 
       </h3> 

       if (subMenuItem.Any()) 
       { 
        <ul> 
         @foreach (var subItem in subMenuItem) 
         { 
          <li><a href='@subItem.SubMenuURL'>@subItem.SubMenuItem</a></li> 
          // 

          var innerSubMenuItem = subItem.childSubMenuModel.Where(m => m.submenuid == subItem.subid); 

          if (innerSubMenuItem.Any()) 
          { 
           <li> 
            @foreach (var item in innerSubMenuItem) 
            { 
            <li><a href='@item.SubSubMenuURL'>@item.SubSubMenuItem</a></li> 
            } 

          </li> 

          } 
         } 
        </ul> 
       } 
      } 
     </li> 
    </ul> 
</div> 

Надеется, что это помогает!