Blazor WASM中如何从JSON文件获取指定ID的单条记录

步骤1：修正数据模型与JSON获取逻辑 #

你的JSON文件是作品数组，但当前代码用单个artWork对象接收会导致反序列化失败，先调整代码：

@code {
    // 存储所有作品列表
    private List<artWork>? allArtWorks;
    // 存储当前详情页的单条作品
    private artWork? currentArtWork;

    // 接收路由传来的artworkID参数
    [Parameter]
    public string? artworkID { get; set; }

    protected override async Task OnInitializedAsync()
    {
        // 获取所有作品数组
        allArtWorks = await Http.GetFromJsonAsync<List<artWork>>("data/artwork.json");
        
        if (allArtWorks != null && int.TryParse(artworkID, out int id))
        {
            // 根据ID筛选对应作品
            currentArtWork = allArtWorks.FirstOrDefault(art => art.artworkID == id);
        }
    }

    public class artWork
    {
        public int artworkID { get; set; }
        public string? artworkName { get; set; }
        public string? artworkFilename { get; set; }
        public string? description { get; set; }
        public string? artworkMediumID { get; set; }
        public string? price { get; set; }
        public string? width { get; set; }
        public string? height { get; set; }
    }
}

步骤2：确认路由配置 #

确保portfoliodetail页面的路由包含artworkID参数，在组件顶部添加：

@page "/portfoliodetail/{artworkID}"

步骤3：处理无匹配作品的情况 #

在页面模板中添加判断，当找不到对应作品时给出提示：

@if (currentArtWork == null)
{
    <p>未找到对应的作品</p>
}
else
{
    <div>
        <h3>@currentArtWork.artworkName</h3>
        <p>@currentArtWork.description</p>
        <!-- 渲染其他作品详情字段 -->
    </div>
}

关键说明 #

• 用[Parameter]装饰artworkID属性，Blazor会自动从路由中提取参数值。
• 用int.TryParse处理类型转换，避免非数字ID引发异常。
• FirstOrDefault返回匹配ID的第一个作品，无匹配时返回null，适配无数据场景。

内容的提问来源于stack exchange，提问作者Stephen