Asp.net core 在一个ASP.NET Core Razor页面中创建两个模型的列表

我正在尝试为我正在开发的餐厅应用程序创建一个页面，其中列出了所有餐厅菜单（食品/饮料/零食等），然后列出了每个菜单下的所有类别（汉堡、比萨饼、较大的、啤酒等）。此页面位于管理区域而非客户区域，允许员工管理菜单和菜单类别

我已经创建了一个razor页面，它列出了所有菜单，并使用for each循环显示在页面上-我的问题是，如何创建链接到每个菜单的所有菜单类别的列表

例如：

菜单1

菜单项1
菜单项2
菜单项3

菜单2

菜单项1
菜单项2
菜单项3

这些是我的模型：

菜单.cs

namespace OrderingApp.Models
{
    public class Menu
    {

        public int Id { get; set; }

        public string Name { get; set; }

    }
}

namespace OrderingApp.Models
{
    public class MenuCategory
    {
        [Key]
        [Required]
        public int Id { get; set; }

        [Required]
        public string Name { get; set; }

        // EF configure foreign keys
        public int MenuId { get; set; }

        [DisplayName("Menu")]
        public Menu Menu { get; set; }

    }
}

namespace OrderingApp.Pages.Admin.ManageMenus
{
    public class IndexModel : PageModel
    {
        private readonly OrderingApp.Data.ApplicationDbContext _context;

        public IndexModel(OrderingApp.Data.ApplicationDbContext context)
        {
            _context = context;
        }

        public IList<Menu> Menu { get; set; }

        public async Task OnGetAsync()
        {
            Menu = await _context.Menus.ToListAsync();
        }
    }
}

MenuCategory.cs

namespace OrderingApp.Models
{
    public class Menu
    {

        public int Id { get; set; }

        public string Name { get; set; }

    }
}

namespace OrderingApp.Models
{
    public class MenuCategory
    {
        [Key]
        [Required]
        public int Id { get; set; }

        [Required]
        public string Name { get; set; }

        // EF configure foreign keys
        public int MenuId { get; set; }

        [DisplayName("Menu")]
        public Menu Menu { get; set; }

    }
}

namespace OrderingApp.Pages.Admin.ManageMenus
{
    public class IndexModel : PageModel
    {
        private readonly OrderingApp.Data.ApplicationDbContext _context;

        public IndexModel(OrderingApp.Data.ApplicationDbContext context)
        {
            _context = context;
        }

        public IList<Menu> Menu { get; set; }

        public async Task OnGetAsync()
        {
            Menu = await _context.Menus.ToListAsync();
        }
    }
}

这是我的页面模型和页面：

Index.cshtml.cs

namespace OrderingApp.Models
{
    public class Menu
    {

        public int Id { get; set; }

        public string Name { get; set; }

    }
}

namespace OrderingApp.Models
{
    public class MenuCategory
    {
        [Key]
        [Required]
        public int Id { get; set; }

        [Required]
        public string Name { get; set; }

        // EF configure foreign keys
        public int MenuId { get; set; }

        [DisplayName("Menu")]
        public Menu Menu { get; set; }

    }
}

namespace OrderingApp.Pages.Admin.ManageMenus
{
    public class IndexModel : PageModel
    {
        private readonly OrderingApp.Data.ApplicationDbContext _context;

        public IndexModel(OrderingApp.Data.ApplicationDbContext context)
        {
            _context = context;
        }

        public IList<Menu> Menu { get; set; }

        public async Task OnGetAsync()
        {
            Menu = await _context.Menus.ToListAsync();
        }
    }
}

namespace OrderingApp.Pages.Admin.managemenu
{
公共类索引模型：PageModel
{
私有只读医嘱app.Data.ApplicationDbContext\u上下文；
公共索引模型（OrderingApp.Data.ApplicationDbContext上下文）
{
_上下文=上下文；
}
公共IList菜单{get；set；}
公共异步任务OnGetAsync（）
{
Menu=wait_context.Menus.toListSync（）；
}
}
}

Index.cshtml

@page
@model OrderingApp.Pages.Admin.ManageMenus.IndexModel


@{
    ViewData["Title"] = "Menus";
    Layout = "~/Pages/Shared/_AdminLayout.cshtml";
}

<h1>@ViewData["Title"]</h1>

<hr />

<p>
    <a class="btn btn-primary" asp-page="Create">Create New</a>
</p>

<div class="card-deck">

    @foreach (var Menu in Model.Menu)
    {
            <div class="card" style="width: 18rem;">
                <img class="card-img-top" data-src="holder.js/100px160" alt="Card image cap">
                <div class="card-body">
                    <h2 class="card-text"> @Html.DisplayFor(modelItem => Menu.Name)</h2>
                    <ul class="list-group list-group-flush">
               
                        **Another for each loop here for menu categories?
                        <li class="list-group-item">** Each item would go here ** </li>**
                  
                    </ul>
                    <div class="card-body">
                        <a class="btn btn-success" asp-page="./Edit" asp-route-id="@Menu.Id">Edit</a>
                        <a class="btn btn-danger" asp-page="./Delete" asp-route-id="@Menu.Id">Delete</a>
                    </div>
                </div>
            </div>
       
    }
</div>

@page
@模型排序app.Pages.Admin.ManageMenus.IndexModel
@{
ViewData[“标题”]=“菜单”；
Layout=“~/Pages/Shared/_AdminLayout.cshtml”；
}
@ViewData[“标题”]


创造新的

@foreach（Model.Menu中的var菜单）
{
@DisplayFor（modelItem=>Menu.Name）

**菜单类别的每个循环都有一个循环？
**每个项目都会放在这里**
**

编辑
删除
}

您应该向表示菜单类别集合的菜单添加导航属性：

namespace OrderingApp.Models
{
    public class Menu
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public List<MenuCategory> MenuCategories { get; set; }
    }
}

然后您可以在其上循环：

<h2 class="card-text"> @Html.DisplayFor(modelItem => Menu.Name)</h2>
<ul class="list-group list-group-flush">
@foreach(var category in Menu.MenuCategories)           
{
    <li class="list-group-item">@categpry.Name</li>**
}              
</ul>

@Html.DisplayFor（modelItem=>Menu.Name）

@foreach（菜单.菜单类别中的变量类别）
{
@categpry.Name
**
}              

---

这正是我想要的，谢谢你的详细回答！