Button Click Event not hitting in Dotnet MAUI MVVM

Question

in my simple .NET MAUI MVVM project. Button Click event not hitting. Code is below

XAML

<......

xmlns:vm="clr-namespace:MVVMSqliteCrudNet8.ViewModels"
xmlns:models="clr-namespace:MVVMSqliteCrudNet8.Models"
x:DataType="vm:ProductsViewModel"
x:Class="MVVMSqliteCrudNet8.MainPage"
Title="MVVM SQlite Crud Net8">
<ContentPage.ToolbarItems>
<ToolbarItem Text="{OnPlatform Default='+ Add Product', iOS='+'}"
Command="{Binding SetOperatingProductCommand}"/>
</ContentPage.ToolbarItems>

</Grid>
</Grid>

</ContentPage>

MVVM

using System.Collections.ObjectModel;
using CommunityToolkit.Mvvm.ComponentModel;
using CommunityToolkit.Mvvm.Input;
using MVVMSqliteCrudNet8.Data;
using MVVMSqliteCrudNet8.Models;

namespace MVVMSqliteCrudNet8.ViewModels;
public partial class ProductsViewModel : ObservableObject
{
private readonly DatabaseContext _context;

public ProductsViewModel(DatabaseContext context)
{
_context = context;
}

[ObservableProperty]
private ObservableCollection<Product> _products = new();

[ObservableProperty]
private Product _operatingProduct = new();

[ObservableProperty]
private bool _isBusy;

[ObservableProperty]
private string _busyText;

public async Task LoadProductsAsync()
{
await ExecuteAsync(async () =>
{
var products = await _context.GetAll<Product>();
if (products is not null && products.Any())
{
Products ??= new ObservableCollection<Product>();

foreach (var product in products)
{
Products.Add(product);
}
}
}, "Fetching products...");
}

[RelayCommand]
private void SetOperatingProduct(Product? product) => OperatingProduct = product ?? new();

[RelayCommand]
private async Task SaveProductAsync()
{
if (OperatingProduct is null)
return;

var busyText = OperatingProduct.Id == 0 ? "Creating product..." : "Updating product...";
await ExecuteAsync(async () =>
{
if (OperatingProduct.Id == 0)
{
// Create product
await _context.AddItemAsync<Product>(OperatingProduct);
Products.Add(OperatingProduct);
}
else
{
// Update product
if (await _context.UpdateItemAsync<Product>(OperatingProduct))
{
var productCopy = OperatingProduct.Clone();

var index = Products.IndexOf(OperatingProduct);
Products.RemoveAt(index);

Products.Insert(index, productCopy);
}
else
{
await Shell.Current.DisplayAlert("Error", "Product updation error", "Ok");
return;
}
}
SetOperatingProductCommand.Execute(new());
}, busyText);
}

[RelayCommand]
private async Task DeleteProductAsync(int id)
{
await ExecuteAsync(async () =>
{
if (await _context.DeleteItemAsync<Product>(id))
{
var product = Products.FirstOrDefault(p => p.Id == id);
Products.Remove(product);
}
else
{
await Shell.Current.DisplayAlert("Delete Error", "Product was not deleted", "Ok");
}
}, "Deleting product...");
}

private async Task ExecuteAsync(Func<Task> operation, string? busyText = null)
{
IsBusy = true;
BusyText = busyText ?? "Processing...";
try
{
await operation?.Invoke();
}
catch (Exception ex)
{
string s = ex.Message;
}
finally
{
IsBusy = false;
BusyText = "Processing...";
}
}
}

Code Behind

using MVVMSqliteCrudNet8.ViewModels;

namespace MVVMSqliteCrudNet8
{
public partial class MainPage : ContentPage
{
ProductsViewModel viewModels;
public MainPage(ProductsViewModel _viewModels)
{
InitializeComponent();
BindingContext = viewModels;
viewModels = _viewModels;
}
protected override async void OnAppearing()
{
base.OnAppearing();
await viewModels.LoadProductsAsync();
}
}

}

Mushtaq M A · Answer

Change the following from BindingContext = viewModels; viewModels = _viewModels; to viewModels = _viewModels; BindingContext = viewModels; since the error may be occurred due to the null view model to binding context. hence the MVVM wiring may not happened.