Blazorのプロジェクト構成を学ぶ

#はじめに

暇な時間にVisual Studio 2019をいじって遊んでたらBlazorなるものを見つけたので、少し動かしてみてました。
ASP.NET MVCやWeb APIはいじったことがありましたが、Blazorは触ったことがないのでちょっと学んでみようと思います。

#プロジェクト構成

Visual Studio 2019を起動し、「新しいプロジェクトの作成」から「Blazor WebAssembly アプリ」を選択して作成します。

プロジェクト構成は以下のようになってました。
※認証ありにしてるのでAuthentication.razorが混ざってます

##Pagesフォルダについて

Pagesフォルダ内には、メニューの選択時に出力されるそれぞれのページファイルが格納されています。

##Counter.razorについて

Blazorのプロジェクトをデバッグ実行したときに、デフォルトで実装されているカウンターアプリのソースコードです。

Counter.razor

@page "/counter"

<h1>Counter</h1>

<p>Current count: @currentCount</p>

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

@code {
    private int currentCount = 0;

    private void IncrementCount()
    {
        currentCount++;
    }

}

@pageはページのURL、@codeは処理を記述するブロックです。

@code内で、currentCountという変数が宣言され、IncrementCountで1ずつ足していく処理が書かれています。
このIncrementCountというメソッドの動きを、ボタンを押すたびに働くようにしてあり、1ずつ足されていったcurrentCountがpタグを使って画面上に表示されます。

「Click me」を押すと、メソッドが働いて加算されたcurrentCountが表示されます。

##現在時刻の表示＆更新機能を実装する

上の動きを使って、Homeに現在時刻の表示と、ボタンを押すことによって時刻が更新される機能を実装します。

Index.razor

@page "/"

<h1>Hello, world!</h1>

<div class="alert alert-warning" role="alert">
    Before authentication will function correctly, you must configure your provider details in <code>Program.cs</code>
</div>

Welcome to your new app.

<SurveyPrompt Title="How is Blazor working for you?" />

<p>現在時刻: @now</p>
<button class="btn btn-primary" @onclick="dispDate">更新する</button>

@code{
    private DateTime now;
    private void dispDate()
    {
        now = DateTime.Now;
    }
}

現在時刻を取得するDateTime型変数nowを宣言して、最新の時刻取得を行うdispDateメソッドを作成し、動きをボタンに持たせます。
そして、pタグで「現在時刻」の隣に変数nowをセット。

更新するボタンを押すたびに、表示されている現在時刻が変化します。

#おわりに
これだけしかまだやってないので何とも言えませんが、結構直感的で使いやすい気がする。

仮想DOM、便利ですねー。