OutWit.Common.MVVM.Blazor 2.0.2

OutWit.Common.MVVM.Blazor

Blazor-specific MVVM components and utilities for building Blazor applications with the MVVM pattern.

Features

• ViewModelBase: Base class combining ComponentBase with INotifyPropertyChanged
• ViewModelBaseAsync: Extended base with async lifecycle support and error handling
• BlazorDispatcher: IDispatcher implementation for UI thread invocation
• SafeObservableCollection: Collection with automatic StateHasChanged callbacks
• Component Extensions: Helper methods for Blazor components

Installation

dotnet add package OutWit.Common.MVVM.Blazor

This automatically includes:

• OutWit.Common.MVVM (base cross-platform package)
• OutWit.Common.Logging

Quick Start

ViewModelBase

The simplest way to create a Blazor component with MVVM support:

@inherits ViewModelBase

<h1>Counter: @Count</h1>
<button @onclick="IncrementCount" disabled="@Busy">
    @(Busy ? "Loading..." : "Increment")
</button>

@code {
    private int _count;
    
    public int Count
    {
        get => _count;
        set => SetProperty(ref _count, value);
    }

    private async Task IncrementCount()
    {
        await RunAsync(async () =>
        {
            await Task.Delay(500); // Simulate work
            Count++;
        });
    }
}

ViewModelBase Features

public class MyViewModel : ViewModelBase
{
    private string _name = "";
    private int _count;

    // Property with automatic change notification
    public string Name
    {
        get => _name;
        set => SetProperty(ref _name, value);
    }

    public int Count
    {
        get => _count;
        set => SetProperty(ref _count, value);
    }

    // Run async operation with automatic Busy state management
    public async Task LoadDataAsync()
    {
        await RunAsync(async () =>
        {
            var data = await FetchDataAsync();
            Name = data.Name;
        });
        // Busy is automatically set to true/false
        // StateHasChanged is called automatically after completion
    }

    // Safe execution with error handling
    public void SafeOperation()
    {
        // Returns default on exception
        var result = Check(() => int.Parse("invalid"), defaultValue: 0);
        
        // Returns false on exception
        var success = Check(() => RiskyOperation());
        
        // Swallows exception
        Check(() => MayThrow());
    }

    // React to property changes
    protected override void OnPropertyChanged(string? propertyName)
    {
        if (propertyName == nameof(Name))
        {
            // Handle name change
        }
    }
}

ViewModelBaseAsync

Extended base class with async initialization and error handling:

@inherits ViewModelBaseAsync

@if (HasError)
{
    <div class="alert alert-danger">@Error</div>
}
else if (Busy)
{
    <div>Loading...</div>
}
else
{
    <div>@Data</div>
}

@code {
    public string? Data { get; private set; }

    // Called during OnInitializedAsync - errors are caught automatically
    protected override async Task InitializeAsync()
    {
        Data = await LoadDataAsync();
    }

    // Optional: Handle initialization errors
    protected override void OnInitializationError(Exception ex)
    {
        // Log error, show notification, etc.
    }
}

SafeObservableCollection

Collection that automatically notifies UI when modified:

@inherits ViewModelBase

<ul>
    @foreach (var item in Items)
    {
        <li>@item</li>
    }
</ul>

@code {
    // Collection with automatic StateHasChanged callback
    public SafeObservableCollection<string> Items { get; private set; } = null!;

    protected override void OnInitialized()
    {
        // Pass StateHasChanged action to automatically refresh UI on changes
        Items = new SafeObservableCollection<string>(() => StateHasChanged());
        Items.Add("Item 1");
        Items.Add("Item 2");
    }

    private void AddItem(string item)
    {
        Items.Add(item); // UI automatically updates
    }
}

Component Extensions

using OutWit.Common.MVVM.Blazor.Utils;

// Force UI update
component.ForceUpdate();

// Run with busy state
await component.RunWithBusyAsync(
    () => _busy,
    v => _busy = v,
    async () => await DoWorkAsync()
);

ViewModelBase API

ViewModelBaseAsync API

Includes all ViewModelBase members plus:

Design Considerations

Why No Source Generator?

Unlike WPF and Avalonia, Blazor doesn't have a DependencyProperty or StyledProperty equivalent. Blazor uses:

• [Parameter] attribute for component parameters (built-in)
• [CascadingParameter] for cascading values (built-in)
• Standard C# properties with INotifyPropertyChanged

The existing Blazor infrastructure handles these patterns well, so a source generator isn't necessary.

Differences from WPF/Avalonia

Related Packages

• OutWit.Common.MVVM - Cross-platform base classes
• OutWit.Common.MVVM.WPF - WPF-specific implementation
• OutWit.Common.MVVM.Avalonia - Avalonia-specific implementation

License

Licensed under the Apache License, Version 2.0. See LICENSE.

Attribution (optional)

If you use OutWit.Common.MVVM.Blazor in a product, a mention is appreciated (but not required), for example: "Powered by OutWit.Common.MVVM.Blazor (https://ratner.io/)".

Trademark / Project name

"OutWit" and the OutWit logo are used to identify the official project by Dmitry Ratner.

You may:

• refer to the project name in a factual way (e.g., "built with OutWit.Common.MVVM.Blazor");
• use the name to indicate compatibility (e.g., "OutWit.Common.MVVM.Blazor-compatible").

You may not:

• use "OutWit.Common.MVVM.Blazor" as the name of a fork or a derived product in a way that implies it is the official project;
• use the OutWit.Common.MVVM.Blazor logo to promote forks or derived products without permission.