在一个 ASP.NET Core Razor 页面中为两个模型创建一个列表

Question

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

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

例如：

菜单 1

MenuCategory1
MenuCategory2
MenuCategory3

菜单 2

MenuCategory1
MenuCategory2
MenuCategory3

这些是我的模型：

Menu.cs

namespace OrderingApp.Models
{
    public class Menu
    {

        public int Id { get; set; }

        public string Name { get; set; }

    }
}

MenuCategory.cs

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

    }
}

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

Index.cshtml.cs

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

@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>

Answer 1

您应该向代表 MenuCategories 集合的菜单添加导航属性：

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

您应该在 EF 查询中使用 Include 来获取这些：

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

然后你可以遍历它们：

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

https://www.learnentityframeworkcore.com/relationships#navigation-properties