How do I send and display Get Requests in .NET MAUI?

Question

I'm trying to implement a small app using .NET MAUI, but I keep getting errors at runtime

System.Net.WebException: 'Unable to resolve host "reqres.in": No address associated with hostname'

Sometimes I receive the error sounding like:

System.InvalidCastException: 'Specified cast is not valid.'

To display the response I used the ListView-control, and finally the CollectionView

I installed Newtonsoft.Json using Nuget Package Manager.

The code-behind file contains the following code:

private const string url = "https://reqres.in/api/users";
private HttpClient _Client = new HttpClient();
private ObservableCollection<User> userCollection;

    protected override async void OnAppearing()
    {
        
        base.OnAppearing();

        var httpResponse = await _Client.GetAsync(url);

        if (httpResponse.IsSuccessStatusCode)
        {
            Response responseData = JsonConvert.DeserializeObject<Response>(await httpResponse.Content.ReadAsStringAsync());
            userCollection = new ObservableCollection<User>(responseData.Users);
            User_List.ItemsSource = userCollection;
        }
    }

public class User
{
    [JsonProperty("id")]
    public int Id { get; set; }

    [JsonProperty("email")]
    public string Email { get; set; }

    [JsonProperty("first_name")]
    public string FirstName { get; set; }

    [JsonProperty("last_name")]
    public string LastName { get; set; }

    [JsonProperty("avatar")]
    public string AvatarURI { get; set; }

    public string FullName
    {
        get { return $"{FirstName} {LastName}"; }
    }
}

public class Response
{
    [JsonProperty("page")]
    public int Page { get; set; }

    [JsonProperty("per_page")]
    public int PerPage { get; set; }

    [JsonProperty("total")]
    public int Total { get; set; }

    [JsonProperty("total_pages")]
    public int TotalPages { get; set; }

    [JsonProperty("data")]
    public ObservableCollection<User> Users { get; set; }
}

The XAML file's content is:

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
         xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
         x:Class="TabbedPageTest.TeamMembersPage"
         BackgroundColor="{DynamicResource SecondaryColor}">
  <StackLayout>
    <Label Text="Team Members"/>
    <CollectionView x:Name="User_List" HeightRequest="400" >
        <CollectionView.ItemTemplate>
            <DataTemplate>
                <ImageCell ImageSource="{Binding AvatarURI}" Text="{Binding FullName}" Detail="{Binding Email}"/>
            </DataTemplate>
        </CollectionView.ItemTemplate>
    </CollectionView>
    <Button Text="Back" Clicked="OnBackButtonClicked" VerticalOptions="CenterAndExpand" />
  </StackLayout>
</ContentPage>

Answer 1

When I use the ListView control instead of CollectionView, the app runs successfully and no errors are shown.

I mentioned that I used the ListView control, which I didn't test properly.

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="TabbedPageTest.TeamMembersPage"
             BackgroundColor="{DynamicResource SecondaryColor}">
    <StackLayout>
        <Label Text="Team Members"/>
        <ListView x:Name="User_List" 
                  HeightRequest="400"
                  ItemSelected="OnListItemSelected">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <ImageCell ImageSource="{Binding AvatarURI}" Text="{Binding FullName}" Detail="{Binding Email}"/>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
        <Button Text="Back" Clicked="OnBackButtonClicked" VerticalOptions="CenterAndExpand" />
    </StackLayout>
</ContentPage>