How to get data from Web API to Xamarin forms Picker?

Question

I'm developing a Xamarin APP and I want to load a Picker with data from a Web API that has Server Database. I tried to Google this but most of the articles don't show the content of source "Services class" that use Get async Method, Model class and ViewModel. I would be very grateful if someone could help me with an example.

This is my Controller in ASP.NET Web API

// GET: api/TipoUsers
public IQueryable<TipoUser> GetTipoUsers()
{
    return db.TipoUsers;
}

Model class

public class TipoUsuario
{
    public int IdTipoUsuario { get; set; }
    public string Nome { get; set; }
}

ViewModel class

public class UsuarioViewModel
{
    public ObservableCollection<TipoUsuario> tipos { get; set; }

    public UsuarioViewModel() {    
        Task<List<TipoUsuario>> task = ApiService.ObterTipoUsuarios();

        tipos = new ObservableCollection<TipoUsuario>(task.Result);    
    }
}

Xaml Page

<Picker Title="Selecione o Tipo de Usuario"
     ItemsSource="{Binding tipos}"
     ItemDisplayBinding="{Binding Nome}"/>

Xaml.cs

{
    [XamlCompilation(XamlCompilationOptions.Compile)]
    public partial class UsuarioPage : ContentPage
    {
        public UsuarioPage()
        {
            InitializeComponent();
            BindingContext = new UsuarioViewModel();
        }
    }
}

Service class

public class ApiService
{
    public const string Url = "http://thisismysite:44342/";
    public static async Task<List<TipoUsuario>> GetTipoUsers()
    {
        try
        {
            HttpClient client = new HttpClient();
            string url = Url + "/api/TipoUsers";
            string response = await client.GetStringAsync(url);
            List<TipoUsuario> tipos = JsonConvert.DeserializeObject<List<TipoUsuario>>(response);
            return tipos;
        }
        catch (Exception)
        {

            throw;
        }
    }
}

when I debug the app it just doesn't load the screen.

This is extensively documented. Xamarin provides three complete samples with walkthroughs - docs.microsoft.com/en-us/xamarin/xamarin-forms/data-cloud/…. — Jason
You haven't told us anything useful about your API - what it's signature is, does it require auth, is it RESTful or SOAP or something else? And I just gave you a link to several examples. — Jason
So show us your code and ask specific questions about the problem you're having — Jason
reading How to Ask will give you an overview of the site guidelines — Jason

Gary Connell Gary Connell · Accepted Answer · 2020-09-09T07:21:26

This can happen for a few reasons, I would check your async method isn’t throwing an exception that you aren’t able to see. Async methods return a Task object and if an exception is thrown inside it will be visible in the returned object in Task.Exception.

https://docs.microsoft.com/en-us/dotnet/standard/parallel-programming/exception-handling-task-parallel-library

Also property changed events aren’t called when you set an ObserableCollection to a new instance, you want to add and remove from the collection.

You want to change:

public UsuarioViewModel() {    
    Task<List<TipoUsuario>> task = ApiService.ObterTipoUsuarios();

    tipos = new ObservableCollection<TipoUsuario>(task.Result);    
}

to something like:

public UsuarioViewModel() {    
    Task<List<TipoUsuario>> task = ApiService.ObterTipoUsuarios();

    var temptipos = task.Result;
    foreach(var tipo in temptipos)
    {
        tipos.Add(tipo);
    }
}

How to get data from Web API to Xamarin forms Picker?

1 Answers