Structure and Architecture

Pages and Components

Razor files and associated code are split on two different file : {nameOfTheComponent}.razor and {nameOfTheComponent}.razor.cs.

Splitting those files provide more readability.

MVVM Pattern

The application is based on the MVVM pattern. Following this pattern provide a highly separation between views and data.

For each razor page/components, creates a view model class with the following naming convention {nameOfTheComponent}ViewModel. Each view model also have its own interface : I{nameOfTheViewModel}. It is needed for the Dependency Injection. Consider registering the type inside the Program.cs file.

A view model can be passed by Injection (preferable for a Page) or by Parameter (preferable for Component).

A folder ViewModels stores all view model, and the structure follow the exact structure as Pages and Components.

For example : The file Components/ModelDashboard/ParameterValues/ParameterDashboard.razor will have the view model _ViewModels/Components/ModelDashboard/ParameterValues/ParameterDashboardViewModel.cs

ReactiveUI

View model are ReactiveObject. For any properties of a View model that the view needs to react, you have to subscribe to that event with the following :

this.Disposables.Add(this.WhenAnyValue(x => x.ViewModel.Property).Subscribe(_ => this.InvokeAsync(this.StateHasChanged)));