BlazorWebAssemblyMVVM 1.0.11
This package is no longer maintained. All his functionality is provided by the new package SwiiT.Blazor.MVVM.
See the version list below for details.
dotnet add package BlazorWebAssemblyMVVM --version 1.0.11
NuGet\Install-Package BlazorWebAssemblyMVVM -Version 1.0.11
<PackageReference Include="BlazorWebAssemblyMVVM" Version="1.0.11" />
paket add BlazorWebAssemblyMVVM --version 1.0.11
#r "nuget: BlazorWebAssemblyMVVM, 1.0.11"
// Install BlazorWebAssemblyMVVM as a Cake Addin
#addin nuget:?package=BlazorWebAssemblyMVVM&version=1.0.11
// Install BlazorWebAssemblyMVVM as a Cake Tool
#tool nuget:?package=BlazorWebAssemblyMVVM&version=1.0.11
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.
Product | Versions Compatible and additional computed target framework versions. |
---|---|
.NET | net5.0 is compatible. net5.0-windows was computed. net6.0 was computed. net6.0-android was computed. net6.0-ios was computed. net6.0-maccatalyst was computed. net6.0-macos was computed. net6.0-tvos was computed. net6.0-windows was computed. net7.0 was computed. net7.0-android was computed. net7.0-ios was computed. net7.0-maccatalyst was computed. net7.0-macos was computed. net7.0-tvos was computed. net7.0-windows was computed. net8.0 was computed. net8.0-android was computed. net8.0-browser was computed. net8.0-ios was computed. net8.0-maccatalyst was computed. net8.0-macos was computed. net8.0-tvos was computed. net8.0-windows was computed. |
-
net5.0
- Microsoft.AspNetCore.Components (>= 5.0.0-rc.1.20451.17)
- Microsoft.AspNetCore.Components.Web (>= 5.0.0-rc.1.20451.17)
NuGet packages
This package is not used by any NuGet packages.
GitHub repositories
This package is not used by any popular GitHub repositories.
Version | Downloads | Last updated | |
---|---|---|---|
1.1.5 | 649 | 12/24/2020 | |
1.1.4 | 471 | 12/24/2020 | |
1.1.3 | 481 | 12/21/2020 | |
1.1.2 | 476 | 12/18/2020 | |
1.1.1 | 498 | 12/18/2020 | |
1.1.0 | 552 | 11/16/2020 | |
1.0.27 | 328 | 11/15/2020 | |
1.0.26 | 344 | 11/14/2020 | |
1.0.25 | 306 | 11/5/2020 | |
1.0.24 | 307 | 11/5/2020 | |
1.0.23 | 322 | 11/3/2020 | |
1.0.22 | 357 | 10/13/2020 | |
1.0.21 | 313 | 10/9/2020 | |
1.0.20 | 310 | 10/9/2020 | |
1.0.19 | 415 | 10/8/2020 | |
1.0.18 | 371 | 10/4/2020 | |
1.0.17 | 317 | 9/28/2020 | |
1.0.16 | 320 | 9/28/2020 | |
1.0.15 | 326 | 9/28/2020 | |
1.0.14 | 322 | 9/28/2020 | |
1.0.13 | 350 | 9/28/2020 | |
1.0.12 | 387 | 9/25/2020 | |
1.0.11 | 347 | 9/24/2020 | |
1.0.10 | 306 | 9/24/2020 | |
1.0.9 | 321 | 9/24/2020 | |
1.0.8 | 325 | 9/24/2020 | |
1.0.7 | 336 | 9/22/2020 | |
1.0.6 | 337 | 9/22/2020 | |
1.0.5 | 621 | 9/9/2020 | |
1.0.4 | 559 | 9/9/2020 | |
1.0.3 | 555 | 9/9/2020 | |
1.0.2 | 575 | 9/7/2020 | |
1.0.1 | 510 | 9/7/2020 |