導航到頁面時從API加載資料的最佳實踐？

我正在開發一個 UWP 應用程式，該應用程式獲取趨勢動漫串列，其個人資料圖片系結到水平ListView. 我已經在Page_Loaded事件中進行了 API 呼叫。問題是，一旦導航到該頁面，內容就會被加載，但布局沒有更新 ListView。難道我做錯了什么。如果我錯了，那么呼叫 API 請求并將資料系結到 ListView 的正確程式是什么？

這是我的資料類：

    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 序列化..

請幫我...

uj5u.com熱心網友回復：

看起來你系結了錯誤的屬性，請像下面這樣編輯你的系結。

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

標籤：C＃ 。网 xml uwp

上一篇：如何在UWP應用程式C#中將值從ContentDialog傳遞到Page？

下一篇：Xamarin.Forms不同設備上同一應用程式內的兩個頁面之間的通信