Xamarin Forms - How to display data binded (List from HttpClient)?

Question

Can't display data in list view after json deserialization. How do i need to set it up in order to see it?

I'm data binding my reponse from http client using binding context so i can use it in my list view.

MainPage.xaml

<ContentPage
        Title="Home"
     >
        <Grid>
            <ListView ItemsSource="{Binding .}">
            <ListView.ItemTemplate>
                    <DataTemplate>
                        <StackLayout>
                            <Label Text="{Binding Description}"/>
                            <Label Text="{Binding Value}"/>
                        </StackLayout>
                    </DataTemplate>
                </ListView.ItemTemplate>
            </ListView>
        </Grid>
    </ContentPage>

MainPage.cs

public MainPage()
        {
            DataService ds = new DataService();

            BindingContext = ds.GetBillsAsync();

            InitializeComponent();

            Chart1.Chart = new BarChart { Entries = entries, LabelTextSize = (float)Convert.ToDouble(Device.GetNamedSize(NamedSize.Large, typeof(Label))), BackgroundColor = SKColors.Transparent };



        }

DataService.cs

public class DataService
    {
        HttpClient client = new HttpClient();

        public async Task<List<Bill>> GetBillsAsync()
        {
            try
            {
                string url = "my url";

                var response = await client.GetStringAsync(url).ConfigureAwait(continueOnCapturedContext: false); ;
                var bills = JsonConvert.DeserializeObject<List<Bill>>(response);
                return bills;
            }
            catch (Exception e)
            {
                throw e;
            }
        }
    }

I'm not getting any error messages, except for this output message "Binding: System.Threading.Tasks.Task`1[System.Collections.Generic.List`1[Test.Models.Bill]] can not be converted to type 'System.Collections.IEnumerable'" which i don't think it is the problem since i can see my list being populated correctly when i'm debugging.

Can you help me please?

Thank you in advance

Answer 1

Nikhil's method is one way ,if you only want to set the List which request from http client to the listview,you could binding to the ListView's ItemsSource property.

in the MainPage.xaml.cs :

public partial class MainPage: ContentPage
{
   DataService ds = new DataService();
   public MainPage()
    {

        InitializeComponent();
        Chart1.Chart = new BarChart { Entries = entries, LabelTextSize = (float)Convert.ToDouble(Device.GetNamedSize(NamedSize.Large, typeof(Label))), BackgroundColor = SKColors.Transparent };
    }

   protected override async void OnAppearing()
    {
        base.OnAppearing();
        listview.ItemsSource = await ds.GetBillsAsync();
    }
}

in MianPage.xaml:

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
         xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
         xmlns:d="http://xamarin.com/schemas/2014/forms/design"
         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
         mc:Ignorable="d"
         Title="Home"
         x:Class="App18.MainPage">
  <ContentPage.Content>
    <StackLayout>
        <ListView x:Name="listview">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <StackLayout>
                        <Label Text="{Binding Description}"/>
                        <Label Text="{Binding Value}"/>
                    </StackLayout>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
    </StackLayout>
 </ContentPage.Content>
</ContentPage>

Answer 2

You need to change the GetBillsAsync Method to retrieve the Array and then convert into List using Array.ToList() with System.Linq.

You need to implement a ViewModel for this. You can use the NuGet MVVM helpers for the BaseViewModel or implement your own.

using System.Windows.Input;
using MvvmHelpers.Interfaces;

namespace NameSpace.ViewModel
{
    public partial class HomeViewModel : BaseViewModel
    {

        private ObservableCollection<Bill> _listOfbills = new ObservableCollection<Bill>();
        public ObservableCollection<Bill> ListOfbills
        {
            get => _listOfbills;
            set => SetProperty(ref _listOfbills, value);
        }
        public HomeViewModel()
        {
            DataService ds = new DataService();
            ListOfbills = ds.GetBillsAsync()
        }
    }
}

Then your MainPage becomes:-

HomeViewModel vm; public MainPage() {

            BindingContext = vm = new HomeViewModel();

            InitializeComponent();

            Chart1.Chart = new BarChart { Entries = entries, LabelTextSize = (float)Convert.ToDouble(Device.GetNamedSize(NamedSize.Large, typeof(Label))), BackgroundColor = SKColors.Transparent };



        }

Then in the Xaml you can change this line as follows :-

<ListView ItemsSource="{Binding ListOfbills}">

These changes should work. Let me know if you face difficulties. Thanks!