Data Binding in Xamarin.Forms

Question

I want all the records created in ASP.NET Web Application to be shown in my Mobile App Xamarin.Forms. What's happening to my program is that I was able to create records in my Web Application but I wasn't able to make it bind it in my Xamarin.Forms Mobile app. I have created a MainViewModel that will get the records from the Web Application which I have binded in my MainPage. What can I do to show all the records I have created? These are my codes. Any help will be highly appreciated. Thank you so much.

MainPageMain.xaml

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
         xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
         xmlns:local="clr-namespace:XamarinDemoApp"
         x:Class="XamarinDemoApp.MainPageMain"
         xmlns:ViewModels="clr-namespace:XamarinDemoApp.ViewModels;assembly=XamarinDemoApp"
         BackgroundColor="Teal"
         Title=" Title Bar">



 <ContentPage.BindingContext>
  <ViewModels:MainViewModel/>
   </ContentPage.BindingContext>


  <StackLayout Orientation="Vertical">

    <ListView ItemsSource="{Binding EmployeesList}"
          HasUnevenRows="True">
     <ListView.ItemTemplate>
      <DataTemplate>
      <ViewCell>
        <StackLayout Orientation="Horizontal">
          <Label Text="{Binding Name}"
                  FontSize="24"/>
          <Label Text="{Binding Department}"
                  FontSize="24"/>

        </StackLayout>

      </ViewCell>

     </DataTemplate>

     </ListView.ItemTemplate>



  </ListView>

   <Label Text="This is the Main Page"/>

   </StackLayout>
 </ContentPage>

MainViewModel.cs

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Linq;
using System.Runtime.CompilerServices;
using System.Text;
using System.Threading.Tasks;
using XamarinDemoApp.Models;
using XamarinDemoApp.Services;

namespace XamarinDemoApp.ViewModels
    {
public class MainViewModel : INotifyPropertyChanged
{    


    private List<Employee> _employeesList;

    public List<Employee> EmployeesList
    {
        get {return _employeesList;}
        set 
        {
            _employeesList = value;
            OnPropertyChanged();
        }
    }



    public MainViewModel()
    {

        InitializeDataAsync();
    }

    private async Task InitializeDataAsync()
    {
        var employeesServices = new EmployeesServices();

        EmployeesList = await employeesServices.GetEmployeesAsync();
    }

    public event PropertyChangedEventHandler PropertyChanged;

    protected virtual void OnPropertyChanged([CallerMemberName] string propertyName = null)
    {
           PropertyChanged.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }


    }
}

Answer 1

In your code you are using List<Employee> as a source to your listview.

Refer this link. It says :

If you want the ListView to automatically update as items are added, removed and changed in the underlying list, you'll need to use an ObservableCollection. ObservableCollection is defined in System.Collections.ObjectModel and is just like List, except that it can notify ListView of any changes

Update your code to use ObservableCollection.

ObservableCollection<Employee> employees= new ObservableCollection<Employee>();

// Convert/Add your list in observable collection
foreach (Employee e in EmployeesList )
{ 
    employees.Add(new Employee { Name=e.Name,Department=e.Department } )
}

After that you can set this as a source to your ListView.

UPDATE

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Linq;
using System.Runtime.CompilerServices;
using System.Text;
using System.Threading.Tasks;
using XamarinDemoApp.Models;
using XamarinDemoApp.Services;

namespace XamarinDemoApp.ViewModels
    {
public class MainViewModel : INotifyPropertyChanged
{    


    private ObservableCollection<Employee> _employeesList;

    public ObservableCollection<Employee> EmployeesList
    {
        get {return _employeesList;}
        set 
        {
            _employeesList = value;
            OnPropertyChanged();
        }
    }



    public MainViewModel()
    {

        InitializeDataAsync();
    }

    private async Task InitializeDataAsync()
    {
        var employeesServices = new EmployeesServices();

        var EmployeesListNew = await employeesServices.GetEmployeesAsync();

        foreach (Employee e in EmployeesListNew )
        { 
            EmployeesList.Add(new Employee { Name=e.Name,Department=e.Department } )
        }
    }

    public event PropertyChangedEventHandler PropertyChanged;

    protected virtual void OnPropertyChanged([CallerMemberName] string propertyName = null)
    {
           PropertyChanged.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }


    }
}