如何在单个 razor 页面上连接和显示来自两个模型的数据（无 mvc）

Question

我想加入两个模型（Child 和 Shot），以便可以在单个 razor 页面上显示信息。

这个小型历史视图应用程序基本上在一个 model（模型名称为 Child）中包含客户人口统计数据，并在另一个表中包含客户免疫接种（模型名称为 Shot）。 我有一个索引页面，用户将单击客户 ID 号和客户名称旁边的“查看免疫详细信息”详细信息按钮。 这会将他们带到我希望显示连接数据的页面。

页面上半部分将显示儿童 model 的人口统计信息（ID、姓名、地址、出生日期等），页面下半部分将显示该特定客户的任何免疫信息表（来自镜头模型）。 （免疫日期、剂量、注射说明等）

这是 Child 和 Shot 之间的一对多关系。 一个子记录可以有多个镜头记录。

在审查如何让两个模型显示在一个页面上时，我只看到了不需要通过一个 model 的结果过滤数据的地方。 如上所述，我只需要在详细信息页面上显示与单个客户相关的镜头，而不是镜头表中的所有镜头。

这是我到目前为止的代码：

一、子model：

using System.ComponentModel.DataAnnotations;

namespace HealthyShots.Models
{
    public class Child
    {
        [Key]
        [Display(Name ="Child ID")]
        public int ChildId { get; set; }
        public List<Shot> Shots { get; set; }
        [Display(Name ="Last Name")]
        public string? LastName { get; set; }
        [Display(Name = "First Name")]
        public string? FirstName { get; set; }
        [Display(Name = "MI")]
        public string? MiddleInitial { get; set; }
        [Display(Name = "Full Name")]
        public string FullName
        {
            get
            {
                return LastName + ", " + FirstName + " " + MiddleInitial;
            }
        }
        [DataType(DataType.Date)]
        [DisplayFormat(DataFormatString = "{0:yyyy-MM-dd}")]
        [Display(Name = "Date of Birth")]
        public DateTime? BirthDate { get; set; }
        public string? Addr1 { get; set; }
        public string? Addr2 { get; set; }
        public string? City { get; set; }
        public string? State { get; set; }
        public string? Zip { get; set; }
    }
}

然后，镜头 model：

using System.ComponentModel.DataAnnotations;
using System.ComponentModel.DataAnnotations.Schema;

namespace HealthyShots.Models
{
    public class Shot
    {
        [DatabaseGenerated(DatabaseGeneratedOption.Identity)]
        [Key]
        public int ShotId { get; set; }

        [Required]
        public int ChildId { get; set; }
        public Child Child { get; set; }

        [DataType(DataType.Date)]
        [DisplayFormat(DataFormatString = "{0:yyyy-MM-dd}")]
        [Display(Name = "Immunization Date")]
        public DateTime? Date { get; set; }
        public string? Dose { get; set; }
        [Display(Name = "Shot Number")]
        public int? ShotNo { get; set; }
        [Display(Name ="Shot Description")]
        public string? ShotDesc { get; set; }
    }
}

然后，my.cs（到目前为止）的详细信息 razor 页面：

using HealthyShots.Data;
using HealthyShots.Models;
using Microsoft.AspNetCore.Mvc.RazorPages;
using Microsoft.EntityFrameworkCore;

namespace HealthyShots.Pages.Details
{
    public class DetailsModel : PageModel
    {
        private readonly ApplicationDbContext _db;

        public Child Child { get; set; }
        public Shot Shot { get; set; }
        

        public DetailsModel(ApplicationDbContext db)
        {
            _db = db;
        }
        
        public void OnGet(int Id)
        {
            _db.Child
                .Include(child => child.Shots)
                .FirstOrDefault(child => child.ChildId == Id);
        }

    }
}

而我的 razor 视图：

@page
@model HealthyShots.Pages.Details.DetailsModel

@{
    ViewData["Title"] = "Immunization Details";
}

<h2>Details</h2>

<div>
    <h4>Demographic Information</h4>
    <hr />

        <table class="table table-bordeless" style="width:100%">
            <tr>
                <td style="width: 10%">
                    <div class="mb-3">
                        <label asp-for="Child.ChildId"></label>
                        <input asp-for="Child.ChildId" disabled class="form-control"/>
                    </div>
                </td>
                <td style="width: 30%">
                    <div class="mb-3">
                        <label asp-for="Child.LastName"></label>
                        <input asp-for="Child.LastName" disabled class="form-control"/>
                    </div>
                </td>
                <td style="width: 30%">
                    <div class="mb-3">
                        <label asp-for="Child.FirstName"></label>
                        <input asp-for="Child.FirstName" class="form-control"/>
                    </div>
                </td>
                <td style="width: 5%">
                    <div class="mb-3">
                        <label asp-for="Child.MiddleInitial"></label>
                        <input asp-for="Child.MiddleInitial" disabled class="form-control"/>
                    </div>
                </td>
                <td style="width: 25%">
                    <div class="mb-3">
                        <label asp-for="Child.BirthDate"></label>
                        <input asp-for="Child.BirthDate" type="date" disabled class="form-control"/>
                    </div>
                </td>
            </tr>
        </table>
        <table class="table table-bordeless" style="width:100%">
            <tr>
                <td style="width: 25%">
                    <div class="mb-3">
                        <label asp-for="Child.Addr1"></label>
                        <input asp-for="Child.Addr1" disabled class="form-control"/>
                    </div>
                </td>
                <td style="width: 25%">
                    <div class="mb-3">
                        <label asp-for="Child.Addr2"></label>
                        <input asp-for="Child.Addr2" disabled class="form-control"/>
                    </div>
                </td>
                <td style="width: 25%">
                    <div class="mb-3">
                        <label asp-for="Child.City"></label>
                        <input asp-for="Child.City" disabled class="form-control"/>
                    </div>
                </td>
                <td style="width: 5%">
                    <div class="mb-3">
                        <label asp-for="Child.State"></label>
                        <input asp-for="Child.State" disabled class="form-control"/>
                    </div>
                </td>
                <td style="width: 20%">
                    <div class="mb-3">
                        <label asp-for="Child.Zip"></label>
                        <input asp-for="Child.Zip" disabled class="form-control"/>
                    </div>
                </td>
            </tr>
        </table>
<br />
<br />


    <h4>Immunizations</h4>
    <hr />

          <table class="table table-bordeless" style="width:100%">
            <tr>
                <td style="width: 20%">
                    <div class="mb-3">
                        <label asp-for="Shot.Date"></label>
                        <input asp-for="Shot.Date" type="date" disabled class="form-control"/>
                    </div>
                </td>
                <td style="width: 20%">
                    <div class="mb-3">
                        <label asp-for="Shot.Dose"></label>
                        <input asp-for="Shot.Dose" disabled class="form-control"/>
                    </div>
                </td>
                <td style="width: 60%">
                    <div class="mb-3">
                        <label asp-for="Shot.ShotDesc"></label>
                        <input asp-for="Shot.ShotDesc" disabled class="form-control"/>
                    </div>
                </td>
            </tr>
            }
        </table>

    <a asp-page="/Children/Index">Back to List</a>
</div>

我知道我缺少代码。 我已经在这里搜索并搜索了外键的工作原理，但仍然不完全理解它。 我意识到我必须告诉 Visual Studio Id（在 Child 模型中）必须与 ChildId（在 Shot 模型中）相同，但我不确定在哪里执行此操作或正确的语法是什么。

我还需要一些关于如何在 razor 页面上引用这些项目的指导。 一旦它们通过外键加入，我是否可以像引用单个 model 一样使用 asp 标签助手访问它们？ 就像我到目前为止在我的代码中所做的那样？

提前感谢您提供的任何指导。 我是初学者，所以请在您制定答案时理解这一点。

Answer 1

使用约定创建关系

在 EF Core 中，定义实体关系的一种方法是使用约定。 这意味着您必须向实体添加具有特定名称的特定属性，以便 EF 了解它们之间的关系。

例子：

public class Child
{
    public int ChildId { get; set; }

    public List<Shot> Shots { get; set; }
}

public class Shot
{
    public int ShotId { get; set; }

    public int ChildId { get; set; }
    public Child Child { get; set; }
}

在上述场景中，EF 将自动在Shot和Child之间创建一对多的关系。 一个镜头与一个孩子相关联，但一个孩子可以与多个镜头相关联。 Shot.ChildId将是Child.ChildId的外键。

https://www.learnentityframeworkcore.com/conventions/one-to-many-relationship

从数据库加载相关数据

现在，如果您想从数据库中检索具有所有相关镜头的特定孩子，您可以执行以下操作：

var child = _db.Child
    .Include(child => child.Shots)
    .FirstOrDefault(child => child.ChildId == Id);

Include方法告诉 EF 使用与该孩子相关的所有镜头填充Child.Shots 。

同样，如果您在加载镜头时可以执行以下操作：

var shots = _db.Shot
    .Include(shot => shot.Child)
    .ToList();

https://learn.microsoft.com/en-us/ef/core/querying/related-data/eager

手动配置关系

您还可以手动配置关系：

https://www.learnentityframeworkcore.com/configuration/one-to-many-relationship-configuration