Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/syncfusionexamples/how-to-bind-and-track-value-changes-in-a-richtexteditor-using-a-viewmodel-in-a-.net-maui-hybrid-app
This repository contains a sample, explaining how to bind and track value changes in a RichTextEditor using a ViewModel in a .NET MAUI Hybrid application.
https://github.com/syncfusionexamples/how-to-bind-and-track-value-changes-in-a-richtexteditor-using-a-viewmodel-in-a-.net-maui-hybrid-app
blazor blazor-rich-text-editor hybrid-app maui maui-blazor rich-text-editor view-model
Last synced: 4 months ago
JSON representation
This repository contains a sample, explaining how to bind and track value changes in a RichTextEditor using a ViewModel in a .NET MAUI Hybrid application.
- Host: GitHub
- URL: https://github.com/syncfusionexamples/how-to-bind-and-track-value-changes-in-a-richtexteditor-using-a-viewmodel-in-a-.net-maui-hybrid-app
- Owner: SyncfusionExamples
- Created: 2024-08-12T11:51:14.000Z (6 months ago)
- Default Branch: master
- Last Pushed: 2024-08-15T04:28:47.000Z (6 months ago)
- Last Synced: 2024-10-14T05:21:37.838Z (4 months ago)
- Topics: blazor, blazor-rich-text-editor, hybrid-app, maui, maui-blazor, rich-text-editor, view-model
- Language: CSS
- Homepage:
- Size: 187 KB
- Stars: 0
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
This article demonstrates how to bind content to the [Blazor RichTextEditor](https://www.syncfusion.com/blazor-components/blazor-rich-text-editor) in a .NET MAUI Hybrid application using a ViewModel. The 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.
```csharp
public class ViewModel : INotifyPropertyChanged
{
public event PropertyChangedEventHandler PropertyChanged;
public void OnPropertyChanged(string propertyName)
{
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
}
private string text = "Google!";
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:
```csharp
...
builder.Services.AddSingleton();
...
```
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:
```razor
@page "/"
@using Syncfusion.Blazor.RichTextEditor
@using System.ComponentModel
@implements IDisposable
@inject ViewModel ViewModel
@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:**
```xml
```
**C#:**
```csharp
public partial class MainPage : ContentPage
{
public MainPage(ViewModel viewModel)
{
InitializeComponent();
BindingContext = _viewModel;
}
}
```
**Output**
