[Blazor] MVVM Pattern 사용하기

WPF MVVM 패턴처럼 c#코드 부분과 razor 페이지를 구분하여 처리하는 방법입니다.

ViewModel 정의
MvvmVewModel.cs

using Prism.Events;

namespace Blazor.PrismTest.ViewModels
{
    public class MvvmVewModel
    {
        public int Count { get; set; }

        public MvvmVewModel(IEventAggregator ea)
        {

        }

        public void IncrementCount()
        {
            Count += 1;
        }
    }
}

생성자의 인자인 IEventAggregator 는 종속성 주입된 경우 생성자에 인자로 넣어 사용할수 있습니다.

Program.cs 에서 MvvmVewModel 종속성 주입

builder.Services.AddScoped<MvvmVewModel>();

MvvmPage.razor

@page "/mvvmpage"
@using Blazor.PrismTest.ViewModels

@inject MvvmVewModel viewmodel

<h3>MvvmPage</h3>

<p role="status">Current count: @viewmodel.Count</p>

<button class="btn btn-primary" @onclick="viewmodel.IncrementCount">Click me</button>

앞서 주입한 MvvmVewModel 를 주입하고
아래처럼 viewmodel 에 있는 프로퍼티와 메서드를 사용할 수 있습니다.
프로퍼티는 메서드 호출시 증가분이 반영되여 화면이 반영됩니다.

실행결과

[Source]
https://github.com/kei-soft/Blazor.AppTest/tree/master/Blazor.PrismTest