client-side-Blazor で MVVM してみた

Blazor で 超単純な MVVM ハンズオン

Transcript

1. client-side-Blazor で MVVM してみた 株式会社スタディスト 有冨 隼
2. ⾃⼰紹介 有冨 隼 / Shun Aritomi 株式会社スタディスト開発部 仕事内容 Windows アプリ開発 (WPF)
3. 話すこと Blazor で 超単純な MVVM ハンズオン View への ViewModel を DI する⽅法 View でコードビハインド使う⽅法 A simple MVVM implementation in client side Blazor. https://itnext.io/a-simple-mvvm- implementation-in-client-side-blazor- 8c875c365435
4. 話さないこと Blazor の概要 MVVM の概要 MVVM における Model 部分の話
5. Blazor で MVVM しよう
6. 準備 .NET Core 3.0 のインストール Visual Studio 2019 のインストール Visual Studio の拡張機能 https://marketplace.visualstudio.com/items? itemName=aspnet.blazor
7. ⽬次 View を作る ViewModelを作る BindableBase を作る ViewModel 本体を作る View と ViewModel を紐付ける @inject を追加する DI コンテナへ登録する コードビハインド
8. View を作る input:2つ / output:1つ のシンプルな画⾯ Views/Sample.razor @page "/sample" <h1>Sample Page</h1> <input /> + <input /> = <input readonly />
9. こんな⾒た⽬
10. ViewModel を作る (1) BindableBase クラスを作る INotifyPropertyChanged を実装 SetProperty` メソッドを実装 OnPropertyCanged メソッドを実装 View <-> ViewModel 間の変更通知を実現する 不要でした
11. ViewModel を作る (2) BindableBase を継承したクラスを作る 継承不要でした
12. namespace WebApplication.ViewModels { public class SampleViewModel { public int Value1 { get; set; } public int Value2 { get; set; } public int Result => Value1 + Value2; } }
13. View と ViewModel を紐付ける (1) View に @inject キーワードで DI する input 項⽬は @bind キーワードに @ で値をセット output 項⽬は @ で値をセット @page "/sample" @using WebApplication.ViewModels @inject SampleViewModel ViewModel <h1>Sample Page</h1> <input @bind=@ViewModel.Value1 /> + <input @bind=@ViewModel.Value2 /> = <input readonly value=@ViewModel.Result />
14. View と ViewModel を紐付ける (2) @inject で⾃動的に DI してもらうため DI コンテナへの登録も必要 Startup.cs への追記 public void ConfigureServices(IServiceCollection services) { services.AddTransient<SampleViewModel>(); }
15. View に inject って書くの 嫌じゃない︖
16. View に inject って書くの 嫌じゃない︖ →実はコードビハインドで書ける
17. コードビハインド (1) [Viewファイル名].cs ファイルを作る (Views/Sample.razor.cs) View 側で @ で書いたキーワードは属性で記述する using Microsoft.AspNetCore.Components; using WebApplication.ViewModels; namespace WebApplication.Views { public class SampleBase : ComponentBase { [Inject] public SampleViewModel ViewModel { get; set; } } }
18. コードビハインド (2) View へ @inherits キーワードで紐付ける @page "/samples" @inherits SampleBase <h1>Sample Page</h1> <input @bind=@ViewModel.Value1 /> + <input @bind=@ViewModel.Value2 /> = <input readonly value=@ViewModel.Result />
19. 最終的にこんな感じになる デモ https://github.com/shuntaro4/SampleBlazor
20. まとめ Blazor でも MVVM できる Blazor でも コードビハインド的にかける まだ preview だけど、雰囲気良さそう