BlazorWebAssemblyMVVM 1.1.5

Sommaire

Introduction
Configurer l'application
Concept de base
Cycle de vie d'une ViewModel
Association de données entre la vue et la ViewModel

Introduction

Cette bibliothèque fourni une architecture Model-View-ViewModel pour les applications Blazor WebAssembly. L'implémentation de l'architecture se fait au travers d'un ensemble de classes et de services qui fournissent les comportements de base d'une application réactive.

Configurer l'application

Pour prendre en charge les services nécessaires vous devez ajouter BlazorWebAssemblyMVVM dans votre Program.cs :

public static async Task Main(string[] args)
{
    var builder = WebAssemblyHostBuilder.CreateDefault(args);
    builder.Services.AddBlazorWebAssemblyMVVM();
}

Concept de base

Model

Les classes de Model peuvent être de n'importe quels types référence. Les struct ne sont pas admises.

ViewModel

Les classes de ViewModel doivent hériter de ViewModelBase{TModel} ou de ViewModelListBase{TModel}. Le paramètre générique TModel indique le type de Model associé à cette ViewModel.

ViewModelBase

Les ViewModel héritant de ViewModelBase{TModel} sont associés à une seule instance de Model. On implémente un nouveau type de ViewModelBase{TModel} de cette manière :

public class MyModel
{
}

public class MyViewModel : ViewModelBase<MyModel>
{
}

ViewModelListBase

Les ViewModel héritant de ViewModelListBase{TModel} sont associés à plusieurs instance de Model. Elles sont adaptés à des vue de affichant des listes d'éléments comme des menus. On implémente un nouveau type de ViewModelListBase{TModel} de cette manière :

public class MyModel
{
}

public class MyViewModelList : ViewModelListBase<MyModel>
{
}

Injection de dépendance

On peut utiliser l'injection de dépendance pour instancier les ViewModel dans les vues. Pour cela il faut enregistrer les classes de ViewModel dans la collection de services de l'application :

public static async Task Main(string[] args)
{
    var builder = WebAssemblyHostBuilder.CreateDefault(args);
    builder.Services.AddTransient<MyViewModel>();
}

Cette méthode permet d'automatiser l'instanciation des ViewModel dans les vues et de les mettre à disposition plus tôt dans le cycle de vie de la vue.

On peut également utiliser un pattern interface - implémentation pour l'injection de dépendance. L'implémentation est la suivante :

public interface IMyViewModel : IViewModel<MyModel>
{
}

public class MyViewModel : ViewModelBase<MyModel>, IMyViewModel
{
}

public static async Task Main(string[] args)
{
    var builder = WebAssemblyHostBuilder.CreateDefault(args);
    builder.Services.AddTransient<IMyViewModel, MyViewModel>();
}

View

Les vues sont des composants Blazor et doivent hériter de ViewBase{TViewModel, TModel} ou de InjectedViewBase{TViewModel, TModel}. En héritant de InjectedViewBase{TViewModel, TModel} le système d'injection de dépendance est utilisé pour instancier la ViewModel associée à la vue. Dans le cas d'un héritage de ViewBase{TViewModel, TModel} la création de la ViewModel est à la charge de l'utilisateur.

ViewBase

L'implémentation d'un nouveau type de vue sans injection de dépendance se fait de cette manière :

Code behind

public partial class MyView : ViewBase<MyViewModel, MyModel>
{
}

Composant Blazor

@inherits ViewBase<MyViewModel, MyModel>

InjectedViewBase

L'implémentation d'un nouveau type de vue avec injection de dépendance se fait de cette manière :

Code behind

public partial class MyView : InjectedViewBase<MyViewModel, MyModel>
{
}

Composant Blazor

@inherits InjectedViewBase<MyViewModel, MyModel>

Utiliser la ViewModel

Les composants de vue exposent une property ViewModel que l'on peut utiliser pour associer des données :

@inherits InjectedViewBase<MyViewModel, MyModel>

<div>@ViewModel.Property1</div>
<EditForm Model="new object()">
    <InputText @bind-Value="@ViewModel.Property2"/>
</EditForm>

Cycle de vie d'une ViewModel

Une vue est un composant Blazor qui propose les méthodes surchargeable OnInitialized(), OnInitializedAsync(), OnParametersSet(), OnParametersSetAsync(), OnAfterRender(bool firstRender) et OnAfterRenderAsync(bool firstRender).

Une ViewModel suit le cycle de vie de la vue qui lui est associée et propose les mêmes méthodes, surchargeable également :

public virtual void OnInitialized();
public virtual async Task OnInitializedAsync();
public virtual void OnParametersSet();
public virtual async Task OnParametersSetAsync();
public virtual void OnAfterRender(bool firstRender);
public virtual async Task OnAfterRenderAsync(bool firstRender);

Lorsqu'une de ces six méthodes est appelé dans la vue la méthode correspondante est appelée dans la ViewModel.

De nombreux comportements de base de la bibliothèque sont dépendants de cela et en cas de surcharge des méthodes il faut impérativement conserver l'appel de base :

public partial class MyView : ViewBase<MyViewModel, MyModel>
{
    protected overrride void OnInitialized()
    {
        base.OnInitialized();
        // Mon implémentation
    }
}
public class MyViewModel : ViewModelBase<MyModel>
{
    public overrride void OnInitialized()
    {
        base.OnInitialized();
        // Mon implémentation
    }
}

Association de données entre la vue et la ViewModel

Forcer le rendu de la vue

Quand une donnée change dans la ViewModel on peut forcer le re-rendu de la vue associée avec la méthode StateHasChanged() :

public class MyViewModel : ViewModelBase<MyModel>
{
    public string MyProperty { get; set; }
    public void MyMethod(string value)
    {
        MyProperty = value;
        StateHasChanged(); // Force le rendu de la vue
    }
}

Cette méthode est utile lorsqu'on associé les properties de la ViewModel à la vue :

@inherits ViewBase<MyViewModel, MyModel>

<div>@ViewModel.MyProperty</div>

Simplifier la mise à jour avec la méthode SetProperty

L'exemple du dessus montre comment remettre à jour la vue manuellement en cas de changement d'état de la ViewModel. On peut simplifier cette mécanique en utilisant la méthode protected SetProperty{T}(ref T field, T value, string propertyName) :

public class MyViewModel : ViewModelBase<MyModel>
{
   private string _myProperty;
   public string MyProperty 
   { 
       get => _myProperty;
       set => SetProperty(ref _myProperty, value, nameof(MyProperty));
   }
   public void MyMethod(string value) => MyProperty = value;
}

Cette implémentation fourni le même comportement que l'exemple précédent. On verra par la suite que la méthode SetProperty fourni d'autres comportements qui sont nécessaires au bon fonctionnement de la bibliothèque. C'est une bonne pratique de l'utiliser par défaut.