从 Blazor WASM 中的 JSON 数据文件返回单个记录

Question

Blazor 新手，我正在迁移旧网站以帮助学习。

这是一个经典的列出所有项目，点击项目查看详细场景

我已经使用以下内容列出了一页“作品集”中的所有项目（效果完美）

@code {
    private artWork[]? artWorks;

    protected override async Task OnInitializedAsync()
    {
       
            artWorks = await Http.GetFromJsonAsync<artWork[]>("data/artwork.json");
       
    }

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

}

我每个人都有一个像这样

@foreach (var artWork in artWorks)
{

<div class="art-wrapper">
    <div class="img-thumb">
        <a href="img/artwork/@artWork.artworkFilename" ToolTip="@artWork.artworkName - By Trevor Bollen" title="@artWork.artworkName - By Trevor Bollen">
            <img src="img/artwork/@artWork.artworkFilename.Replace(".jpg", "_thumb.jpg")" title="@artWork.artworkName - By Trevor Bollen" alt="@artWork.artworkName - By Trevor Bollen" />
        </a>
    </div>
    <div class="art-info">
        <h3>@artWork.artworkName</h3>
        <p><b>Medium:</b> @artWork.artworkMediumID </p>
        <p><b>Size:</b> @artWork.width x @artWork.height (cm) </p>
        <p><b>Price:</b> £@artWork.price</p>
    <p><a href="portfoliodetail/@artWork.artworkID"><img src="img/btn-detail-sml.jpg" Class="btnViewDetail" AlternateText="Click here to view artwork details" ToolTip="Click here to view artwork details" /></a></p>
    </div>
</div>


}

通过参数链接到投资组合详细信息页面。我的问题是，在此页面上如何使用传递的 ID 从 JSON 中获取单个记录？到目前为止我有以下但不知道如何过滤或通过ID获取

@code {
private artWork? artWorks;

protected override async Task OnInitializedAsync()
{
   
        artWorks = await Http.GetFromJsonAsync<artWork>("data/artwork.json");
   
}

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

}

数据示例如下所示。

Answer 1

这是一个相当简单的示例，使用服务来获取和缓存 Json 数据并提供获取集合或单个对象的方法。

这个例子是基于获取这个简单的记录：

public record CountryRecord(string Country, string Continent);

用于获取和缓存数据的存储库服务：

public class CountryRepository
{
    private readonly IHttpClientFactory _httpClientFactory;
    private List<CountryRecord> _countries = new();
    private Task? _getDataTask;
    private object _lock = new();

    public CountryRepository(IHttpClientFactory httpClientFactory)
    {
        _httpClientFactory = httpClientFactory;
    }

    public async ValueTask<IEnumerable<CountryRecord>> GetItemsAsync()
    {
        await GetData();
        return _countries;
    }

    public async ValueTask<CountryRecord?> GetItemAsync(string country)
    {
        await GetData();
        return _countries.FirstOrDefault(item => item.Country.Equals(country));
    }

    private Task GetData()
    {
        if (_getDataTask is not null)
            return _getDataTask;

        // ensures only one process can start the Task
        lock (_lock)
        {
            if (_getDataTask is null)
                _getDataTask = this.GetHttpDataAsync();
        }

        return _getDataTask;
    }

    private async Task GetHttpDataAsync()
    {
        var httpClient = _httpClientFactory.CreateClient();
        var countries = await httpClient.GetFromJsonAsync<List<CountryRecord>>("https://localhost:7191/sample-data/countries.json");
        ArgumentNullException.ThrowIfNull(countries, "Json file not found.");
        _countries = countries;
    }
}

以及注册的服务：

builder.Services.AddHttpClient();
builder.Services.AddSingleton<CountryRepository>();

您现在可以将服务注入到任何页面/组件中，并通过调用

GetItemsAsync

获取完整集合或通过调用

GetItemAsync

获取单个项目。