导航到页面时从 API 加载数据的最佳实践？

Question

我正在开发一个 UWP 应用程序，它获取热门动漫列表，其个人资料图片绑定到水平 ListView。我已经在 Page_Loaded 活动中拨打了 API 电话。问题是，一旦导航到该页面，内容就会加载，但布局不会更新 ListView。难道我做错了什么。如果我错了，那么调用 API 请求并将数据绑定到 ListView 的正确过程是什么？

这是我的数据Class:

    public class AnimeObject
    {
        public string Title {get; set;}
        public string coverImage {get; set}
        public int totalEpisodes {get; set}
    }

而且，这是我的 Page_Loaded 事件：

    private async void Page_Loaded(object sender, RoutedEventArgs e)
    {
        ListView.ItemsSource = await apiHandler.RequestAPI();
    }

在这里，RequestAPI 函数返回 List<AnimeObject> 并且 ListView 只是一个数据模板，这是最不用担心的。

编辑：

正如 Nico Zhu 所问，我提供了示例代码。此代码包含 api 这是一个 graphql API.

MainPage.xaml:

<Grid>
    <TextBlock Text="{x:Bind animeDetails.data.Page.media[0].title}"/>
    <TextBlock Text="{x:Bind animeDetails.data.Page.media[0].id}"/>
    <Image Source="{x:Bind animeDetails.data.Page.media[0].coverImage}"/>
</Grid>

MainPage.xaml.cs:

namespace TestAppForNotify
{
    public sealed partial class MainPage : Page
    {
        public dataClass.AnimeObject animeDetails;
        public MainPage()
        {
            this.InitializeComponent();
        }

        private async void Page_Loaded(object sender, RoutedEventArgs e)
        {
            animeDetails = JsonConvert.DeserializeObject<dataClass.AnimeObject>(
                await requestAPI()
            );
        }

        private async Task<string> requestAPI()
        {
            string query = @"
            query{
              Page(perPage: 20, page: 1){
                media(sort: TRENDING_DESC){
                  id
                  title{
                    english
                  }
                  coverImage {
                    extraLarge
                  }
                }
              }
            }";

            var client = new HttpClient();

            var jsonString = new StringContent(
                JsonConvert.SerializeObject(
                    new
                    {
                        query = query
                    }
                ),
                System.Text.Encoding.UTF8,
                "application/json"
            );

            var request = await client
                .PostAsync("https://graphql.anilist.co", jsonString);

            var response = await request
                .Content
                .ReadAsStringAsync();

            Debug.WriteLine(response);

            return response;
        }
    }
}

我使用 Newtonsoft.Json 进行 json 序列化..

请帮助我...

Answer 1

看来您绑定错误属性，请按如下方式编辑您的绑定。

<ListView x:Name=" " Margin="0,50,0,0">
    <ListView.ItemTemplate>
        <DataTemplate>
            <StackPanel Background="White">
                <TextBlock Text="{Binding title.english, Mode=OneWay}" />
                <TextBlock Text="{Binding id, Mode=OneWay}" />
                <Image Source="{Binding coverImage.extraLarge, Mode=OneWay}" Visibility="Visible" />
            </StackPanel>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

代码隐藏

private async void MainPage_Loaded(object sender, RoutedEventArgs e)
{
   
     animeDetails = JsonConvert.DeserializeObject<Model.AnimeObject>(
           await requestAPI()
       );
    AnimeList.ItemsSource = animeDetails.data.Page.media;
}

更新

private Model.AnimeObject _animeDetails;
public Model.AnimeObject animeDetails
{
    get { return _animeDetails; }
    set
    {
        _animeDetails = value;
        OnPropertyChanged();
    }
}

Xaml代码

<StackPanel
    Width="300"
    Height="300"
    Background="White">
    <TextBlock Text="{x:Bind animeDetails.data.Page.media[1].title.english, Mode=TwoWay}" />
    <TextBlock Text="{x:Bind animeDetails.data.Page.media[1].id, Mode=TwoWay}" />
    <Image Source="{x:Bind animeDetails.data.Page.media[1].coverImage.extraLarge, Mode=TwoWay}" />
</StackPanel>

导航到页面时从 API 加载数据的最佳实践？

Best Practice to Load Data from API when navigating to page?

.net

c#

xaml

uwp