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;
    }

这里主菜单＆amp;由id ==＆gt; MainMenuid映射的子菜单和由subid ==＆gt; submenuid

映射的子菜单childSubMenu

Razor 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上运行它的show错误时..请建议。

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>

希望这有帮助！

使用C＃在MVC 4 RAZOR视图中设计多级（3）菜单

1 个答案: