Blazor MVVM implementation

Author : MD TAREQ HASSAN | Updated : 2020/07/08

MVVM

What is MVVM?
MVVM in Blazor
- The way Blazor is designed, it is MVVM by default
- The .razor components are parsed into C# class
- The C# code (seperate file or same file) would act as ViewModel
Helpful links:
- https://github.com/lchendricks/BlazorMVVM

The Model

Employee.cs

public class Employee
{
	public string FirstName { get; set; }
	public string LastName { get; set; }
	public int Id { get; set; }

	// ... ... ...
}

The View

Foo.razor

@page "/foo"
@inherits FooBase

<p>Id: @Employee.Id</p>

<p>First Name: @Employee.FirstName</p>

The ViewModel

Foo.razor.cs

public class FooBase : ComponentBase
{

	protected EmployeeModel Employee { get; set; }
	
	protected override async Task OnInitializedAsync()
	{
		//Log("OnInitializedAsync is called");
		
		// fetch data from database
		
		Employee =  await GetEmployeeInfo();
	}

	// ... ... ...
}

For any changes made to the properties of the FooBase will be reflected to view automatically.