在带有多个类的asp.net mvc中的布局中传递模型

Question

我有4个视图模型，一个控制器，_layout.cshtml和index.cshtml。 目的是在_layout中获得左手风琴菜单，但使用模型

左侧菜单将像手风琴菜单一样，在其中单击的子菜单将打开，再次单击时将关闭。

js-css非常好-我面临的唯一问题是对象引用null错误。

如果我在新视图中尝试它，它的运作会在布局中产生问题。 但是我必须把它放在layout.cshtml中

-----------------_ layout.cshtml -------------

@model LeftSubMenuFinal.ViewModels.LayoutViewModel

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title - My ASP.NET Application</title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")

</head>
<body>
     @using (Html.BeginForm("Index", "Menu"))
        {
            <div id="accordian">
                <ul>
                    <li>
                        @{
            foreach (var MenuItem in Model._homeViewModel.LeftMenuModel)
            {
                var SubMenuItem = Model._homeViewModel.LeftSubMenuModel.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>*@
                            <li>@Html.ActionLink(@SubItem.SubMenuItem, @SubItem.SubMenuActionURL, @SubItem.SubMenuControllerURL)</li>
                        }
                    </ul>
                }

            }
                        }
                </ul>
            </div>

    <div class="container body-content">
        @RenderBody()
        <hr />
        <footer>
            <p>&copy; @DateTime.Now.Year - My ASP.NET Application</p>
        </footer>
    </div>

    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")
    @RenderSection("scripts", required: false)
</body>
</html>

--------------------- LayoutViewModel ---------------------

public HomeViewModel _homeViewModel { get; set; }


        public LayoutViewModel()
        {

            _homeViewModel.LeftMenuModel= new List<MainMenu>();
            _homeViewModel.LeftMenuModel = _homeViewModel.GetMainMenu();
            _homeViewModel.LeftSubMenuModel = new List<SubMenu>();
            _homeViewModel.LeftSubMenuModel = _homeViewModel.GetSubMenu();
        }

------------------------- HomeViewModel ---------------

 public class HomeViewModel :LayoutViewModel
    {
        public List<MainMenu> LeftMenuModel { get; set; }
        public List<SubMenu> LeftSubMenuModel { get; set; }         


        public List<MainMenu> GetMainMenu()
        {
            List<MainMenu> ObjMainMenu = new List<MainMenu>();
            ObjMainMenu.Add(new MainMenu { ID = 1, MainMenuItem = "Parent menu 1 ", MainMenuURL = "#" });
            ObjMainMenu.Add(new MainMenu { ID = 2, MainMenuItem = "Parent menu 2", MainMenuURL = "#" });
            ObjMainMenu.Add(new MainMenu { ID = 3, MainMenuItem = "Parent menu 3", MainMenuURL = "#" });
            ObjMainMenu.Add(new MainMenu { ID = 4, MainMenuItem = "Parent menu 4", MainMenuURL = "#" });
            return ObjMainMenu;
        }
        public List<SubMenu> GetSubMenu()
        {
            List<SubMenu> ObjSubMenu = new List<SubMenu>();
            ObjSubMenu.Add(new SubMenu { MainMenuID = 1, SubMenuItem = "sub menu1", SubMenuControllerURL = "#", SubMenuActionURL = "#" });
            ObjSubMenu.Add(new SubMenu { MainMenuID = 1, SubMenuItem = "sub menu2", SubMenuControllerURL = "#", SubMenuActionURL = "#" });
            ObjSubMenu.Add(new SubMenu { MainMenuID = 1, SubMenuItem = "sub menu3", SubMenuControllerURL = "#", SubMenuActionURL = "#" });


            ObjSubMenu.Add(new SubMenu { MainMenuID = 2, SubMenuItem = "sub menu1", SubMenuControllerURL = "Home", SubMenuActionURL = "Index" });
            ObjSubMenu.Add(new SubMenu { MainMenuID = 2, SubMenuItem = "sub menu2", SubMenuControllerURL = "#", SubMenuActionURL = "#" });
            ObjSubMenu.Add(new SubMenu { MainMenuID = 2, SubMenuItem = "sub menu3", SubMenuControllerURL = "#", SubMenuActionURL = "#" });
            return ObjSubMenu;
        }
    }

----------------------- MainMenu.cs ------

public class MainMenu :LayoutViewModel
    {

        public int ID;
        public string MainMenuItem;
        public string MainMenuURL;
    }

------------------ SubMenu.cs --------------------

 public class SubMenu :LayoutViewModel
    {
        public int MainMenuID;
        public string SubMenuItem;
        public string SubMenuControllerURL;
        public string SubMenuActionURL;
    }

------------------------- MenuController ------------

 public class MenuController : Controller
    {
        //
        // GET: /Menu/
        public ActionResult Index()
        {
            HomeViewModel model = new HomeViewModel();           

            return View("Index",model);
        }
    }

------------------ Index.cshtml-菜单控制器-----------------

@{
    ViewBag.Title = "Index";
}

<h2>Index</h2>
Menu - Index

---------------------- Js = -----------------------

$(document).ready(function () {
    $("#accordian h3").click(function () {
        $("#accordian ul ul").slideUp();
        if (!$(this).next().is(":visible")) {
            $(this).next().slideDown();
        }
    });
});

------------------------ css文件------------------------ -

#accordian {
    background: #4D6974;
    width: 300px;
    margin: 50px auto 0 auto;
    color: white;
   position:absolute;
   height:400px;
    /*Shadow */
    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: 30px;
        line-height: 30px;
        padding: 0 15px;
        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: 20px;
            line-height: 30px;
            padding: 0 10px;
            /*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: 15px;
        line-height: 27px;
        display: block;
        padding: 0 15px;
        /*transition for  hover animation*/
        transition: all 0.15s;
    }
        /*hover effect on links*/
        #accordian ul ul li a:hover {
            background: #003545;
            border-left: 10px solid red;
        }
    /* hide the non active */
    #accordian ul ul {
        display: none;
    }

    #accordian li.active ul {
        display: block;
    }

-----错误出现在_layout.cshtml的以下位置，模型始终为null

 <li>
                    @{
        foreach (var MenuItem in Model._homeViewModel.LeftMenuModel)
        {
            var SubMenuItem = Model._homeViewModel.LeftSubMenuModel.Where(m => m.MainMenuID == MenuItem.ID);

            <h3><a href="@MenuItem.MainMenuURL"> @MenuItem.MainMenuItem </a></h3>

Answer 1

如果只是布局页面的问题，也许您需要重新考虑如何构造视图模型。 关于模型的顺序，似乎有些错误。 它的结构应该更接近以下内容：

@model ViewModels.LayoutViewModel.LeftSubMenuFinal

您也可以将其渲染为布局内的局部视图。 就像是：

@{
   Html.RenderPartial("your view", your_model);
}

在带有多个类的asp.net mvc中的布局中传递模型

问题描述

1 个解决方案

解决方案1
0 2017-03-29 16:41:18

在带有多个类的asp.net mvc中的布局中传递模型

问题描述

1 个解决方案

解决方案1 0 2017-03-29 16:41:18

解决方案1
0 2017-03-29 16:41:18