How to Capture Selected CheckBox Items and Update a List with MVVM in .Net maui

Question

This is my first time working on a MAUI app and struggling with a scenario where I need to capture the selected CheckBox items from a collection and store their relevant Section objects into a list when I click a button (I've seen some people add to the model boolean property to see if the item is selected or not but i didn't do that) .

I have a CollectionView that displays a list of Sections:

Here is the Section Model : (i called it 'Rayon' because it wouldn't let me name it Section)

public class Rayon
    {
        [Key]
        public int Id { get; set; }
        public string SectionName { get; set; } = null!;
        public ICollection SectionSuppliers { get; set; } = null!;
        public ICollection Products { get; set; } = null!;
    }`
And here is my view model : 
`public partial class CreateSupplierPageViewModel : ObservableObject
{

/* This is the list that i want to Add or remove Sections from whenever i check or uncheck one of the checkboxs */ 
    private ObservableCollection _selectedSections;
        public ObservableCollection SelectedSections
        {
            get => _selectedSections;
            set
            {
                _selectedSections = value;
            }
        }

        public ObservableCollection Sections { get; set; } = new ObservableCollection();

public async Task GetSectionsList()
        {
            var sectionList = new List();

            var sectionUrl = "https://localhost:7282/api/Sections/GetSections";

            using (var client = new HttpClient())
            {
                var Apiresponse = await client.GetAsync(sectionUrl);

                if (Apiresponse.StatusCode == System.Net.HttpStatusCode.OK)
                {
                    var content = await Apiresponse.Content.ReadAsStringAsync();
                    sectionList = JsonConvert.DeserializeObject>(content);
                }

            }

            if (sectionList?.Count > 0)
            {
                foreach (var section in sectionList)
                {
                    Sections.Add(section);
                }
            }
        }

/*This method is used simply because i couldn't call GetSectionsList directly in the constructor to avoid deadlocks */

public static async Task Create()
        {
            var it = new CreateSupplierPageViewModel();
            await it.Initialize();
            return it;
        }

        private async Task Initialize()
        {
            await GetSectionsList();
        }
        public CreateSupplierPageViewModel()
        {
            SelectedSections = new ObservableCollection();
        }
}

I'm looking for guidance on how to capture the selected Sections when the button is clicked. Any help or code samples would be greatly appreciated. Thank you!

I tried Looking in the net for a solution but whatever i find just confuses me because i don't know what or where should i place the code that i find in the solutions . i tried also using chat gpt but it whatever solution it provides it doesn,t work

Jessie Zhang -MSFT · Accepted Answer

Yes, you can add a bool field to the model (Rayon.cs) of list Sections and bind it to the CheckBox. This is also the method we often use.

Of course, if you really want to trigger the selecting event, you can use EventToCommandBehavior to achieve this.

I created a demo and tried to achieve this function with two methods above.

You can refer to the following code:

MainPage.xaml

MyViewModel.cs

public class MyViewModel 
{
    public ObservableCollection Sections { get; set; } = new ObservableCollection();

    public ICommand GetResultCommand { get; set; }
    public ICommand UpdateThisItemCommand { get; set; }


    public MyViewModel() {
        Sections.Add(new Rayon { SectionName= "section_1"});
        Sections.Add(new Rayon { SectionName= "section_2"});
        Sections.Add(new Rayon { SectionName= "section_3"});


        GetResultCommand = new Command(getResult);

        UpdateThisItemCommand = new Command(checkboxcommand);

    }

    private void checkboxcommand(Rayon obj)
    {
        if (obj != null)
        {
            if (obj.IsChecked)
            {
                // you also need to add some other logic codes here

               
            }
           
        }
    }

    private void getResult()
    {
        foreach (var section in Sections)
        {
            if (section.IsChecked) { 
                System.Diagnostics.Debug.WriteLine(section.SectionName);
            }
        }
    }
}

Rayon.cs

public class Rayon: INotifyPropertyChanged 
{
    public string SectionName { get; set; }

    private bool _isChecked;
    public bool IsChecked
    {
        set { SetProperty(ref _isChecked, value); }
        get { return _isChecked; }
    }

    bool SetProperty(ref T storage, T value, [CallerMemberName] string propertyName = null)
    {
        if (Object.Equals(storage, value))
            return false;
        storage = value;
        OnPropertyChanged(propertyName);
        return true;
    }
    protected void OnPropertyChanged([CallerMemberName] string propertyName = null)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
    public event PropertyChangedEventHandler PropertyChanged;
}

Note:

Here, we need to install nuget CommunityToolkit.Maui and initialize the package correctly.

For more information, you can check document: Get started.

How to Capture Selected CheckBox Items and Update a List with MVVM in .Net maui

Answers (1)

Related Questions