Blazor アプリケーションのライフサイクルに関するメソッド/イベントについて紹介します。
概要
Blazorアプリケーションでページが表示される際にrazorコンポーネントの表示が実行されます。実行時にはイベントが実行され、ページ表示時に必要な初期アk処理を実装できます。この記事では、razorコンポーネントの基底クラスのComponentBase クラスのイベントのメソッドを紹介しつつ、それぞれのメソッドがどの順序で呼び出されるかを紹介します。
プログラム
下記のプログラムを作成します。
事前準備 : ASP.NET Core Web アプリケーションの作成
ASP.NET Core Webアプリケーションを作成します。プロジェクトの作成は
こちらの記事を参照して下さい。
Razorアプリケーションの基本ファイルの作成
App.razor, _Imports.razor, フォールバックページの Pages/_Host.cshtml のファイルを作成します。コートは下記のとおりです。
<Router AppAssembly="@typeof(Program).Assembly">
<Found Context="routeData">
<RouteView RouteData="@routeData" />
</Found>
<NotFound>
<LayoutView>
<p>Sorry, there's nothing at this address.</p>
</LayoutView>
</NotFound>
</Router>
@using System.Net.Http
@using Microsoft.AspNetCore.Authorization
@using Microsoft.AspNetCore.Components.Authorization
@using Microsoft.AspNetCore.Components.Forms
@using Microsoft.AspNetCore.Components.Routing
@using Microsoft.AspNetCore.Components.Web
@using Microsoft.JSInterop
今回のコードではモデルファイル"_Host.cshtml.cs"を作成していますが、モデルファイルは無くてもかまいません。
@page
@model BlazorLifecycle.Pages._HostModel
@namespace BlazorLifecycle.Pages
<!DOCTYPE html>
<html lang="ja">
<head>
</head>
<body>
<app>
@(await Html.RenderComponentAsync<App>(RenderMode.ServerPrerendered))
</app>
<script src="_framework/blazor.server.js"></script>
</body>
</html>
画面の作成
画面を作成します。Pages フォルダ内に Main.razor ファイルを作成します。合わせて Main.razor.cs ファイルも作成します。コードは下記になります。
@pageディレクティブを追加し"/Main"のルーティング先に指定します。また、@inherties ディレクティブを記述し MainModelクラスを参照できる設定にします。
@page "/Main"
@inherits MainModel
<h3>Main</h3>
<p>メイン画面です。</p>
@code {
}
Main.razor.cs には、OnInitialized, OnInitializedAsync, OnParametersSet, OnParametersSet, OnParametersSetAsync, OnAfterRender, OnAfterRenderAsync，ShouldRender のメソッドを実装します。いずれのメソッドも基底クラスのComponentBaseに実装されているメソッドでオーバーライドして実装します。イベントの処理では Debug.WriteLine メソッドを呼び出しメソッドが呼び出された旨のメッセージのログを出力します。
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Components;
using System.Diagnostics;
namespace BlazorLifecycle.Pages
{
public class MainModel : ComponentBase
{
protected override void OnInitialized()
{
Debug.WriteLine("OnInitialized が実行されました。");
}
protected override async Task OnInitializedAsync()
{
Debug.WriteLine("OnInitializedAsync が実行されました。");
await Task.Delay(1000);
}
protected override void OnParametersSet()
{
Debug.WriteLine("OnParametersSet が実行されました。");
}
protected override async Task OnParametersSetAsync()
{
Debug.WriteLine("OnParametersSetAsync が実行されました。");
await Task.Delay(1000);
}
protected override void OnAfterRender(bool firstRender)
{
Debug.WriteLine("OnAfterRender が実行されました。" + firstRender.ToString());
}
protected override async Task OnAfterRenderAsync(bool firstRender)
{
Debug.WriteLine("OnAfterRenderAsync が実行されました。" + firstRender.ToString());
await Task.Delay(1000);
}
protected override bool ShouldRender()
{
Debug.WriteLine("ShouldRender が実行されました。");
return true;
}
}
}
実装完了後のソリューションエクスプローラーの状態です。
実行結果
プロジェクトを実行し Webブラウザで
(アプリケーションルートURL)/Main のURLにアクセスします。下図の画面が表示されます。
Visual Studio の出力ウィンドウを確認します。メッセージが出力されています。
メッセージの出力は下記になります。
OnInitialized が実行されました。
OnInitializedAsync が実行されました。
OnAfterRender が実行されました。True
OnAfterRenderAsync が実行されました。True
OnParametersSet が実行されました。
OnParametersSetAsync が実行されました。
ShouldRender が実行されました。
OnAfterRender が実行されました。False
OnAfterRenderAsync が実行されました。False
ShouldRender が実行されました。
OnAfterRender が実行されました。False
OnAfterRenderAsync が実行されました。False
同期メソッドと非同期メソッド、(OnInitializedメソッドの場合は、OnInitialized メソッドとOnInitializedAsync メソッド)の呼び出し順は先に同期メソッドである、OnInitializedメソッドの呼び出しが実行され、その後非同期メソッドのOnInitializedAsync のメソッドが呼び出されます。OnAfterRender, OnParametersSet, OnAfterRenderのイベントの場合も同様で、同期メソッドが呼び出された後に、非同期メソッドが呼び出されます。~
呼び出し順は OnInitialized, OnAfterRender, OnParametersSet, ShouldRender, OnAfterRender の順になります。ページ表示時の初回のOnAfterRenderは第一引数の値が Trueになり、以後の呼び出しでは第一引数の値はFalseになります。ShouldRenderが呼び出されレンダリングが実行された後にOnAfterRender が呼び出されます。
著者
iPentecのメインプログラマー
C#, ASP.NET の開発がメイン、少し前まではDelphiを愛用
最終更新日: 2022-01-08
作成日: 2019-11-09
