将嵌套对象从 Blazor API 返回到 WASM

Question

我正在学习 Blazor，并使用简单的图像查看器创建一个网站。

我有以下类描述图像和相关的任何标签：

public class GalleryImage
{
    public int ID { get; set; }
    public string FileName { get; set; }
    public virtual ICollection<GalleryImageTag> ImageTags { get; set; }
}

public class GalleryImageTag
{
    public int ID { get; set; }
    public string Tag { get; set; }
    public virtual ICollection<GalleryImage> GalleryImages { get; set; }
}

如您所见，它们描述了多对多关系。

在我的 Controller 我有：

[HttpGet("GetGallery")]
public async Task<IActionResult> GetGallery()
{
    List<GalleryImage> galleryImagesDB = await _context.GalleryImages
        //.Include(a => a.ImageTags)
        .ToListAsync();

    return Ok(galleryImagesDB);
}

我的 Blazor 页面有：

private List<GalleryImage> galleryImages = new();

protected override async Task OnInitializedAsync()
{
    try
    {
        galleryImages = await Http.GetFromJsonAsync<List<GalleryImage>>("api/Gallery/GetGallery");
    }
    catch (Exception ex)
    {
        Console.WriteLine($"Error in Gallery.OnInitializedAsync : {ex.Message}");
    }
}

这可以很好地从数据库中检索 GalleryImages 列表。 但是，当我取消注释该行时

.Include(a => a.ImageTags) 

然后它失败了。 如果我在返回时中断，则galleryImages 正确包含一个GalleryImages 列表，并且任何已标记的都包括一个GalleryImageTags 列表。 但我在 Chrome 控制台中收到错误消息：

Gallery.OnInitializedAsync 中的错误：响应状态代码未指示成功：500（内部服务器错误）。

我究竟做错了什么？

客户端和服务器都使用.Net 5.0。

Answer 1

你有一个循环引用。 这将从数据库返回，但会导致序列化错误。 您可以将[JsonIgnore]属性放在 collections 之一上，以防止循环序列化。