Profile Page Not Binding Even Data loaded from API

Question

Profile Page Not Binding Even Data loaded from API

Samir Alghazaly 1

I am new in Xamarin forms
and I am trying to build an app to load data from API and do some operations on this data
when I built the mainpage for showing profile data ,data already loaded from API but not bonded in the view
although when loading a list of items in a listview in the same view or another on it's bounded successfully
I am using MVVM

Kyle Wang 5,531 Microsoft External Staff

@Samir Alghazaly It is difficult to find the cause of the problem without code. Can you provide a simple demo? For example, your View and ViewModel files. Note: If you are binding "property", make sure you have implemented interface INotifyPropertyChanged.

class MainPageViewModel : INotifyPropertyChanged  
{  
    // ...  
    Student selectedStudent;  
    public Student SelectedStudent  
    {  
        get => selectedStudent;  
        set  
        {  
            selectedStudent = value;  
            OnPropertyChanged("SelectedStudent");  
        }  
    }  
  
    public event PropertyChangedEventHandler PropertyChanged;  
  
    protected void OnPropertyChanged(string propertyName)  
    {  
        var handler = PropertyChanged;  
        if (handler != null)  
            handler(this, new PropertyChangedEventArgs(propertyName));  
    }  
}

If you are binding a list, make sure using ObservableCollection.

public ObservableCollection<Student> Students { get; set; }

Samir Alghazaly 1

@KyleXu-MSFT Thanks alot for your kindly reply following are code parts

for ViewModel

 public class ProfileViewModel : BaseViewModel  
    {  
  
        public class ProfileViewModel : BaseViewModel  
        {  
            VwStudent _StudenProfileData = new VwStudent();  
            public VwStudent StudenProfileData  
            {  
                get  
                {  
                    return _StudenProfileData;  
                }  
                set  
                {  
                    SetProperty(ref _StudenProfileData, value);  
                }  
            }  
  
            public ICommand LoadProfileCommand { get; }  
  
            public ProfileViewModel()  
            {  
                LoadProfileCommand = new Command(async () => await GetStudentProfileData());  
            }  
            public async Task GetStudentProfileData()  
            {  
                IsBusy = true;  
                  
                _StudenProfileData = (await new VwStudentService().GetByStudentId(150)).FirstOrDefault();  
  
                SetProperty(ref _StudenProfileData, StudenProfileData);  
  
  
                IsBusy = false;  
  
  
            }  
  
        }  
    }

Samir Alghazaly 1

and for the ContetntPage

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="BeneficiarySystem.Views.ProfilePage" 

             >


    <ContentPage.Content>
        <StackLayout>
            <Label Text="{Binding StudenProfileData.StudentName}"
                VerticalOptions="CenterAndExpand" 
                HorizontalOptions="CenterAndExpand" />
        </StackLayout>
    </ContentPage.Content>
</ContentPage>

for code behind

 public partial class ProfilePage : ContentPage
    {
        public ProfilePage()
        {
            InitializeComponent();
           BindingContext = new ProfileViewModel();
        }

        protected override void OnAppearing()
        {
            (BindingContext as ProfileViewModel).LoadProfileCommand.Execute(null);

            base.OnAppearing();
        }
    }

Samir Alghazaly 1

and for the BaseViewModel Class as follow

 public class BaseViewModel : INotifyPropertyChanged
    {
        public IDataStore<Item> DataStore => DependencyService.Get<IDataStore<Item>>();

        bool isBusy = false;
        public bool IsBusy
        {
            get { return isBusy; }
            set { SetProperty(ref isBusy, value); }
        }

        string title = string.Empty;
        public string Title
        {
            get { return title; }
            set { SetProperty(ref title, value); }
        }

        protected bool SetProperty<T>(ref T backingStore, T value,
            [CallerMemberName] string propertyName = "",
            Action onChanged = null)
        {
            if (EqualityComparer<T>.Default.Equals(backingStore, value))
                return false;

            backingStore = value;
            onChanged?.Invoke();
            OnPropertyChanged(propertyName);
            return true;
        }

        #region INotifyPropertyChanged
        public event PropertyChangedEventHandler PropertyChanged;
        protected void OnPropertyChanged([CallerMemberName] string propertyName = "")
        {
            var changed = PropertyChanged;
            if (changed == null)
                return;

            changed.Invoke(this, new PropertyChangedEventArgs(propertyName));
        }
        #endregion
    }

Kyle Wang 5,531 Reputation points Microsoft External Staff

2021-07-06T09:35:55.747+00:00
@Samir Alghazaly When you modify a field, it won't trigger "PropertyChanged". So modify the following code

_StudenProfileData = (await new VwStudentService().GetByStudentId(150)).FirstOrDefault();

to

StudenProfileData = (await new VwStudentService().GetByStudentId(150)).FirstOrDefault();
Samir Alghazaly 1 Reputation point

2021-07-06T10:10:44.27+00:00
Unfortunately it didn't work
I have added a new property StudentName and set it with the student name

StudenProfileData = (await new VwStudentService().GetByStudentId(150)).FirstOrDefault(); StudentName =StudenProfileData.StudentName ;

and change the binding to it in the view
and also didn't work
Kyle Wang 5,531 Reputation points Microsoft External Staff

2021-07-07T01:24:41.733+00:00

@Samir Alghazaly I just copied your code into my test and everything works fine. Did you check if the property is null?

Samir Alghazaly 1

Now it's working fine thanks alot KyleWang
When I changed

public VwStudent StudenProfileData
             {
                 get
                 {
                     return _StudenProfileData;
                 }
                 set
                 {
                     SetProperty(ref _StudenProfileData, value);
                 }
             }

To

public VwStudent StudenProfileData
             {
                 get
                 {
                     return _StudenProfileData;
                 }
                 set
                 {
                     _StudenProfileData=value;
                     OnPropertyChanged();
                 }
             }

it worked fine

Thanks for your cooperation

Your answer

Kyle Wang 5,531 Reputation points Microsoft External Staff

2021-07-06T07:30:03.01+00:00

@Samir Alghazaly It is difficult to find the cause of the problem without code. Can you provide a simple demo? For example, your View and ViewModel files. Note: If you are binding "property", make sure you have implemented interface INotifyPropertyChanged.

class MainPageViewModel : INotifyPropertyChanged { // ... Student selectedStudent; public Student SelectedStudent { get => selectedStudent; set { selectedStudent = value; OnPropertyChanged("SelectedStudent"); } } public event PropertyChangedEventHandler PropertyChanged; protected void OnPropertyChanged(string propertyName) { var handler = PropertyChanged; if (handler != null) handler(this, new PropertyChangedEventArgs(propertyName)); } }

If you are binding a list, make sure using ObservableCollection.

public ObservableCollection<Student> Students { get; set; }
Samir Alghazaly 1 Reputation point

2021-07-06T07:48:19.89+00:00

@KyleXu-MSFT Thanks alot for your kindly reply following are code parts

for ViewModel

public class ProfileViewModel : BaseViewModel { public class ProfileViewModel : BaseViewModel { VwStudent _StudenProfileData = new VwStudent(); public VwStudent StudenProfileData { get { return _StudenProfileData; } set { SetProperty(ref _StudenProfileData, value); } } public ICommand LoadProfileCommand { get; } public ProfileViewModel() { LoadProfileCommand = new Command(async () => await GetStudentProfileData()); } public async Task GetStudentProfileData() { IsBusy = true; _StudenProfileData = (await new VwStudentService().GetByStudentId(150)).FirstOrDefault(); SetProperty(ref _StudenProfileData, StudenProfileData); IsBusy = false; } } }
Samir Alghazaly 1 Reputation point

2021-07-06T07:48:45.227+00:00

and for the ContetntPage

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="BeneficiarySystem.Views.ProfilePage" > <ContentPage.Content> <StackLayout> <Label Text="{Binding StudenProfileData.StudentName}" VerticalOptions="CenterAndExpand" HorizontalOptions="CenterAndExpand" /> </StackLayout> </ContentPage.Content> </ContentPage>

for code behind

public partial class ProfilePage : ContentPage { public ProfilePage() { InitializeComponent(); BindingContext = new ProfileViewModel(); } protected override void OnAppearing() { (BindingContext as ProfileViewModel).LoadProfileCommand.Execute(null); base.OnAppearing(); } }
Samir Alghazaly 1 Reputation point

2021-07-06T07:49:04.057+00:00

and for the BaseViewModel Class as follow

public class BaseViewModel : INotifyPropertyChanged { public IDataStore<Item> DataStore => DependencyService.Get<IDataStore<Item>>(); bool isBusy = false; public bool IsBusy { get { return isBusy; } set { SetProperty(ref isBusy, value); } } string title = string.Empty; public string Title { get { return title; } set { SetProperty(ref title, value); } } protected bool SetProperty<T>(ref T backingStore, T value, [CallerMemberName] string propertyName = "", Action onChanged = null) { if (EqualityComparer<T>.Default.Equals(backingStore, value)) return false; backingStore = value; onChanged?.Invoke(); OnPropertyChanged(propertyName); return true; } #region INotifyPropertyChanged public event PropertyChangedEventHandler PropertyChanged; protected void OnPropertyChanged([CallerMemberName] string propertyName = "") { var changed = PropertyChanged; if (changed == null) return; changed.Invoke(this, new PropertyChangedEventArgs(propertyName)); } #endregion }
Kyle Wang 5,531 Reputation points Microsoft External Staff

2021-07-06T09:35:55.747+00:00

@Samir Alghazaly When you modify a field, it won't trigger "PropertyChanged". So modify the following code

_StudenProfileData = (await new VwStudentService().GetByStudentId(150)).FirstOrDefault();

to

StudenProfileData = (await new VwStudentService().GetByStudentId(150)).FirstOrDefault();
Samir Alghazaly 1 Reputation point

2021-07-06T10:10:44.27+00:00

Unfortunately it didn't work
I have added a new property StudentName and set it with the student name

StudenProfileData = (await new VwStudentService().GetByStudentId(150)).FirstOrDefault(); StudentName =StudenProfileData.StudentName ;

and change the binding to it in the view
and also didn't work
Kyle Wang 5,531 Reputation points Microsoft External Staff

2021-07-07T01:24:41.733+00:00

@Samir Alghazaly I just copied your code into my test and everything works fine. Did you check if the property is null?
Samir Alghazaly 1 Reputation point

2021-07-07T04:03:50.883+00:00

Now it's working fine thanks alot KyleWang
When I changed

public VwStudent StudenProfileData { get { return _StudenProfileData; } set { SetProperty(ref _StudenProfileData, value); } }

To

public VwStudent StudenProfileData { get { return _StudenProfileData; } set { _StudenProfileData=value; OnPropertyChanged(); } }

it worked fine

Thanks for your cooperation

Share via

Profile Page Not Binding Even Data loaded from API

Your answer