ASP.NET Core Razor Pages如何关联数据库表筛选指定专辑的曲目

问题解决方案 #

你遇到的问题根源是AlbumTracks页面后端没有接收从albums.cshtml跳转时传递的AlbumId参数，也没有对曲目数据做筛选，所以会返回全量曲目数据，只需要按以下两步调整代码即可：

第一步：修改AlbumTracks.cshtml.cs 后端逻辑 #

需要新增参数接收路由传递的专辑ID，再用该ID过滤曲目数据：

using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;
using Microsoft.EntityFrameworkCore;
using Project.Models;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;

namespace Project.Pages
{
    public class AlbumTracksModel : PageModel
    {
        private readonly Chinook db;

        public AlbumTracksModel(Chinook injectedContext)
        {
            db = injectedContext;
        }
        public IEnumerable<Track> Tracks { get; set; }
        // 新增Album属性，用于前端展示当前专辑信息
        public Album Album { get; set; }

        public async Task<IActionResult> OnGetAsync(int id)
        {
            // 校验传入的专辑ID是否合法
            Album = await db.Albums.FindAsync(id);
            if (Album == null)
            {
                return NotFound();
            }
            ViewData["Title"] = $"Chinook Web Site - {Album.Title} 曲目";
            // 只筛选对应专辑的曲目
            Tracks = await db.Tracks
                .Where(t => t.AlbumId == id)
                .ToListAsync();
            return Page();
        }
    }
}

如果你的Track模型里的专辑外键字段名为AlbumID（大小写不同），把Where条件里的字段名改成和模型一致即可。

第二步：修改AlbumTracks.cshtml 前端页面 #

需要给页面指定路由参数约束，匹配albums.cshtml传递的ID参数：

@page "{id:int}"
@using Project.Models
@model Project.Pages.AlbumTracksModel
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

<div class="row">
    <h1 class="display-2">@Model.Album.Title - 曲目列表</h1>
    <table class="table">
        <thead class="thead-inverse">
            <tr>
                <th>曲目ID</th>
                <th>曲目名称</th>
            </tr>
        </thead>

        <tbody>
            @foreach (Track track in Model.Tracks)
            {
                <tr>
                    <td>@track.TrackId</td>
                    <td>@track.Name</td>
                </tr>
            }
        </tbody>
    </table>
</div>
@* <div class="row">
    <p>Enter a name & TrackID for a new track:&nbsp;</p>
    <form method="POST">
        <div><input asp-for="Track.Name" /></div>
        <div><input asp-for="Track.TrackId" /></div>
        <input type="submit" />
    </form>
</div> *@
<div>
    <a asp-page="/Albums/Index">返回专辑列表</a> | <a asp-page="/Index">Home</a>
</div>

内容的提问来源于stack exchange，提问作者double-happiness