How to bind and track value changes in a RichTextEditor using a ViewModel in a .NET MAUI Hybrid application?

This article demonstrates how to bind content to the Blazor RichTextEditor in a .NET MAUI Hybrid application using a ViewModel. This approach ensures that any changes in the editor are reflected in the ViewModel, and those changes can be tracked and displayed within the .NET MAUI UI.

ViewModel Implementation

To begin, create a ViewModel (e.g., ViewModel.cs) that implements INotifyPropertyChanged. This will allow the UI to respond to changes in the data model.

public class ViewModel : INotifyPropertyChanged
{
    public event PropertyChangedEventHandler PropertyChanged;

    public void OnPropertyChanged(string propertyName)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }

    private string text = "<a href='https://www.google.com/'>Google!</a>";
    public string Text 
    {
        get { return text; }
        set { text = value; OnPropertyChanged("Text"); }
    }
}

To complete the setup, ensure the ViewModel is registered with the dependency injection container in the .NET MAUI application. This can be done in the MauiProgram.cs file:

...
builder.Services.AddSingleton<ViewModel>();
...

This registration allows the ViewModel to be injected into both the Blazor components and the .NET MAUI pages.

Blazor RichTextEditor Integration

In your Blazor component (e.g., Home.razor), you can bind the RichTextEditor to the ViewModel’s Text property. The following code snippet demonstrates this:

@page "/"
@using Syncfusion.Blazor.RichTextEditor
@using System.ComponentModel
@implements IDisposable
@inject ViewModel ViewModel

<SfRichTextEditor @bind-Value="ViewModel.Text" SaveInterval="1">
</SfRichTextEditor>

@code {
    protected override void OnInitialized()
    {
        base.OnInitialized();
        ViewModel.PropertyChanged += OnValueChanged;
    }

    private void OnValueChanged(object sender, PropertyChangedEventArgs e)
    {
        StateHasChanged();
    }

    public void Dispose()
    {
        ViewModel.PropertyChanged -= OnValueChanged;
    }
}

In this code:

• The ViewModel is injected into the Blazor component using @inject ViewModel ViewModel.
• The SfRichTextEditor binds directly to the Text property of the ViewModel through the @bind-Value directive, enabling two-way data binding.
• The OnValueChanged method updates the UI when the Text property in the ViewModel changes.
• The Dispose method removes the event handler to prevent memory leaks.

MAUI Label Binding

To display the content of the RichTextEditor in a MAUI Label, you can refer to the below code:

XAML:

<Label Text="{Binding Text}" TextType="Html" TextColor="Black" Margin="5" VerticalOptions="Center"/>

C#:

public partial class MainPage : ContentPage
{
    public MainPage(ViewModel viewModel)
    {
        InitializeComponent();
        BindingContext = _viewModel;
    }
}

Output

Download the complete sample from GitHub