时间戳

首页 > 解决方案 > 如何从 Blazor 中的不同 API 路由获取另一个列表的列表？

c# - 如何从 Blazor 中的不同 API 路由获取另一个列表的列表？

问题描述

我碰到了一堵砖墙，我想知道如何解决这个问题。我正在尝试学习 Blazor，并且正在使用开放 API 来接收有关《权力的游戏》之家及其所有宣誓成员的数据。所以我基本上试图收到的是另一个列表中的一个列表，但有两条不同的路线。我的预期输出是单击房屋名称，并且应将另一个列表与成员一起添加到我的表中

预期产出

House Targaryen - Daenerys Targaryen
                - Aegon Targaryen

ETC...

房屋路线https://anapioficeandfire.com/api/houses/378 人物路线https://anapioficeandfire.com/api/characters/33

    @page "/fetchdata"
@using System.Text.Json.Serialization
@using System.Text.Json
@inject HttpClient Http


<h1>Game of Thrones</h1>

<p>This component demonstrates fetching data from the server.</p>

@if (houses == null)
{
    <p>
        <em>Loading...</em>
    </p>
}
else
{
    <table class="table">
        <thead>
        <tr>
            <th>Houses</th>
        </tr>
        </thead>
        <tbody>
        @foreach (var house in houses.Take(5))
        {
            <tr>
                <td>@house.Name</td>
                @foreach (var character in house.SwornMembers.Take(5))
                {
                    <td>
                        <tr>@character</tr>
                    </td>
                }
            </tr>
        }
        </tbody>

    </table>
}

@code {
    List<House> houses;
    List<Character> characters;

    protected override async Task OnInitializedAsync()
    {
        houses = await Http.GetFromJsonAsync<List<House>>("https://anapioficeandfire.com/api/houses/");

        Console.WriteLine(houses);
    }

    public class House
    {
        public string Name { get; set; }
        public List<Character> SwornMembers { get; set; }
    }

    public class Character
    {
        public string Name { get; set; }
        public string Gender { get; set; }
        public string Culture { get; set; }
        public string Born { get; set; }
    }

}

标签： c#.netapiforeachblazor

解决方案

通过快速浏览 api，您无法通过 ?id=1,2,3,4 之类的方式加载多个字符。

就像 timur 说的，你必须打一堆GetFromJSONAsync电话。如果您查看 json 响应，则 SwornMembers 属性不是对象，而是您必须单独加载的 URL。在您的 House 课程中，更改List<Character>为List<string>

然后创建一个接受 url 的 CharacterFromApi 组件。<CharacterFromApi URL="@character"/>

@foreach (var character in house.SwornMembers.Take(5))
{
    <td>
        <tr><CharacterFromApi URL="@character"/></tr>
    </td>
}

//FYI the usings can be moved into the _Imports.razor file
@using System.Text.Json.Serialization
@using System.Text.Json
@inject HttpClient Http

<div>
   @(Character?.Name)
</div>

@code {
    [Parameter] 
    public string URL { get; set; }   

    Character Character { get; set; }

    protected override async Task OnInitializedAsync()
    {
        Character = await Http.GetFromJsonAsync<Character>(URL);
    }

    public class Character
    {
        public string Name { get; set; }
        public string Gender { get; set; }
        public string Culture { get; set; }
        public string Born { get; set; }
    }
}

推荐阅读