@code { int number1 = 5; int number2 = 10; }

パラメーターは、[EditorRequired]属性で必須とすることができます。

以下に示す例をご覧ください。

Child Component

The sum of number is : @(num1 + num2)

@code { [Parameter] [EditorRequired] public int num1 { get; set; }

[Parameter] [EditorRequired] public int num2 { get; set; } }

[EditorRequired]属性を使用しながら、[Parameter]属性を使用する必要があります。

コンポーネントを呼び出す際に必要なパラメーターを与えなければ、コンパイル時の警告が表示されます。

また、コンポーネントのパラメーターにデフォルト値を設定することも可能です。

以下に示す例をご覧ください。

@page “/welcome”

WelcomeMessage

@code { [Parameter] public string WelcomeMessage { get; set; } = “Welcome”; }

Razorコンポーネントのライフサイクル

Razor のコンポーネントは、作成されてから削除されるまで、一連のライフサイクルイベントを経ます。ライフサイクルには、同期と非同期のメソッドがあります。Blazor フレームワークでは、ライフサイクルメソッドをオーバーライドすることで、コンポーネントに対して追加の操作を行うことができます。

SetParametersAsync

このメソッドは、パラメーターが設定される前に呼び出されます。これは、親コンポーネントまたはコンポーネントルートから供給されたパラメーターを設定します。コンポーネントのパラメーターに値を設定するには、base.SetParametersAsync()メソッドを呼び出す必要があります。そうでなければ、パラメーターを操作するための独自のコードを記述する必要があります。

OnInitialize

このメソッドは、パラメーターが設定される前に呼び出されます。親から初期パラメーターを受け取った後、コンポーネントが起動できるようになったときに呼び出されます。

非同期バージョンはOnInitializedAsyncと呼ばれます。非同期処理を行い、その処理が完了した時点でコンポーネントを更新したい場合は、OnInitializedAsyncをオーバーライドしてください。

OnParametersSet

このメソッドは、パラメーターが設定された後に呼び出されます。このメソッドは、コンポーネントが親からパラメーターを受け取り、受け取った値がプロパティに割り当てられたときに呼び出されます。このメソッドは、パラメーターが更新されるたびに実行されます。非同期バージョンはOnParametersSetAsyncと呼ばれます。

OnAfterRender

このメソッドは、コンポーネントのレンダリングが終了した後、つまり HTML がすでに表示された後に呼び出されます。このメソッドは、レンダリングされた DOM 要素を使用するサードパーティの JavaScript ライブラリをアクティブにするなど、コンポーネントの初期化に必要な追加ステップを実行するために使用されます。このメソッドは、コンポーネントがレンダリングされるたびに実行されます。非同期バージョンはOnAfterRenderAsyncとして知られています。

StateHasChanged

このメソッドは、コンポーネントの状態が変更されたことを通知し、コンポーネントを再レンダリングします。EventCallbackの処理においては、このメソッドは自動的に呼び出され、親コンポーネントを再レンダリングします。

このメソッドを呼び出すと、コンポーネントをいつでもレンダリングできるようになります。しかし、StateHasChangedの呼び出しが多すぎると、アプリケーションに不必要なレンダリングコストを追加することになります。

例を挙げます

以下のようにベースクラスLifecycle.razor.csを作成しました。

using Microsoft.AspNetCore.Components; namespace BlazorTutorial.Client.Pages; public class LifecycleBase : ComponentBase { public override async Task SetParametersAsync(ParameterView parameters) { Console.WriteLine(“SetParametersAsync-start”); await base.SetParametersAsync(parameters); Console.WriteLine(“SetParametersAsync-end”); } protected override void OnInitialized() { Console.WriteLine(“OnInitialized-start”); base.OnInitialized(); Console.WriteLine(“OnInitialized-end”); } protected override async Task OnInitializedAsync() { Console.WriteLine(“OnInitializedAsync-start”); await base.OnInitializedAsync(); Console.WriteLine(“OnInitializedAsync-end”); } protected override void OnParametersSet() { Console.WriteLine(“OnParametersSet-start”); base.OnParametersSet(); Console.WriteLine(“OnParametersSet-end”); } protected override async Task OnParametersSetAsync() { Console.WriteLine(“OnParametersSetAsync-start”); await base.OnParametersSetAsync(); Console.WriteLine(“OnParametersSetAsync-end”); } protected override void OnAfterRender(bool firstRender) { Console.WriteLine(“OnAfterRender({0})-start”, firstRender); base.OnAfterRender(firstRender); Console.WriteLine(“OnAfterRender({0})-end”, firstRender); } protected override async Task OnAfterRenderAsync(bool firstRender) { Console.WriteLine(“OnAfterRenderAsync({0})-start”, firstRender); await base.OnAfterRenderAsync(firstRender); Console.WriteLine(“OnAfterRenderAsync({0})-end”, firstRender); } }

以下のように、RazorコンポーネントLifecycle.razorを作成しました。

@page “/lifecycle” @inherits WelcomeBase

Blazor component lifecycle example

アプリケーションを実行し、ライフサイクル・コンポーネントに移動すると、以下のようにブラウザ・コンソールに出力が表示されます。

この出力は、RazorコンポーネントのLifecycleメソッドの実行順序を示しています。

4

Blazorカスケード値及びパラメーター

1章 | 2章 | 3章 | 4章 | 5章 | 6章 | 7章 | 8章 | 9章

カスケード値とパラメーターは、あるコンポーネントからそのすべての子孫のコンポーネントにデータを渡すことを可能にします。コンポーネントはコンポーネントを使用してカスケード接続された値を提供することができます。

親コンポーネントが提供するカスケード値を利用するために、子コンポーネントは [CascadingParameter] 属性を用いてカスケードパラメーターを宣言することができます。

カスケード接続された値は、データ型によってカスケード接続されたパラメーターに束縛されます。同じ型の複数の値をカスケード接続したい場合は、それぞれの[CascadingParameter]属性に一意な名前を指定します。

例を挙げます

以下のように、コンポーネントChild.razorを作成します。

Child Component

The sum of number is : @(num1 + num2)

@code { [CascadingParameter(Name = “FirstNumber”)] public int num1 { get; set; }

[CascadingParameter(Name = “SecondNumber”)] public int num2 { get; set; } }

以下のように、コンポーネントParent.razorを作成します。

@page “/parent”

Parent Component

@code { int number1 = 5; int number2 = 10; }

子コンポーネントを呼び出して、カスケード接続された値を渡しています。子コンポーネントは、Nameプロパティを使ってパラメーター値をバインドします。

コンポーネント階層をまたぐデータの受け渡し

カスケードパラメータを使って、コンポーネント階層を越えてデータを渡すことができます。

例を挙げます

以下のように、コンポーネントGrandChild.razorを作成します。

Grand Child Component

The product of number is : @(num1 \* num2)

@code { [CascadingParameter(Name = “FirstNumber”)] public int num1 { get; set; }

[CascadingParameter(Name = “SecondNumber”)] public int num2 { get; set; } }

以下のように、コンポーネントChild.razorを作成します。

Child Component

The sum of number is : @(num1 + num2)

@code { [Parameter] public int num1 { get; set; }

[Parameter] public int num2 { get; set; } }

ParentコンポーネントからGrandChildコンポーネントに、カスケード接続された値を渡しています。カスケード・パラメータの名前は、ChildとGrandChildの両方のコンポーネントで同じであることに注意してください。

実行すると、以下のような出力が表示されます。

5

Blazorのデータバインディング

1章 | 2章 | 3章 | 4章 | 5章 | 6章 | 7章 | 8章 | 9章

単方向データバインディング

単方向データバインディングは、プロパティの値をHTML DOM要素にバインドすることができます。その逆はできません。プロパティやフィールド変数をHTMLタグに結びつけるには、@記号を先頭に付けてプロパティまたはフィールド変数名を渡す必要があります。

以下に示す例をご覧ください。

@page “/databinding”

One way data binding

@SampleText

@code { string SampleText = “This is a sample text depicting one-way data-binding”; }

C#のフィールド変数SampleTextは、@マークを用いてHTML DOMにバインドされています。

双方向データバインディング

双方向データバインディングによって、プロパティやフィールド変数の値をHTML DOM要素にバインドしたり、逆にHTML DOMからの入力プロパティやフィールド変数にバインドしたりすることができます。双方向データバインディングを実現するには、@bind 属性を使用します。

HTML要素の@bind:event=“{EVENT}“属性（{EVENT}はDOMイベントのプレースホルダー）を使って、DOMイベントにC#プロパティをバインドすることができます。

以下に示す例をご覧ください。

@page “/databinding”

Two way data binding

You name is: @Name

@code { string Name { get; set; } }

入力フィールドの値は、Nameプロパティにバインドされます。データバインディングは、入力フィールドの oninput イベントがトリガーされたとき、つまりテキストボックスの値が変更されたときに行われます。

注：属性バインディングは、大文字と小文字を区別します。つまり、@bind, @bind:event は有効ですが、@Bind, @Bind:EVENT などの大文字を使った構文は無効です。

要素で複数の選択肢を束ねる 複数選択から得られる値を、配列型のC#プロパティにバインドすることができます。 以下に示す例をご覧ください。 @page “/databinding” Select one or more days: Monday Tuesday Wednesday Thursday Friday

Selected Days: @string.Join(", ", SelectedDays)

@code { public string[] SelectedDays { get; set; } = new string[] { };

void SelectedDaysChanged(ChangeEventArgs e) { if (e.Value is not null) { SelectedDays = (string[])e.Value; } } }

選択された値は、要素の@onchangeイベントを使って文字列の配列にバインドされます。 フォーマットされたsringにバインドする データバインディングは、@bind:format=“{FORMAT STRING}“という構文を使って、フォーマットされた文字列で動作します。 フォーマットされたデータバインディングは、以下の.NETタイプでサポートされています。 System.DateTime System.DateTimeOffset 以下に示す例をご覧ください。 @page “/databinding” Formatted string The Sample date is:

@code { DateTime SampleDate { get; set; } = new DateTime(2023, 1, 14); }

日付は、@bind:format属性で指定されたフォーマットで表示されます。

カスタムバインディングフォーマットは、getおよびsetアクセサを使用して指定することができます。

以下に示す例をご覧ください。

@page “/databinding”

<input @bind=“SalaryValue” />

Formatted string

decimalValue: @salary

@code { decimal salary = 123456;

string SalaryValue { get => salary.ToString(“0.000”); set { if (Decimal.TryParse(value, out var number)) { salary = Math.Round(number, 3); } } } }

文字列プロパティSalaryValueは、入力要素に小数点以下3桁まででバインドされます。

コンポーネントパラメータを用いたバインディング

子コンポーネントのプロパティを、その親コンポーネントのプロパティにバインドすることができます。データバインディングは複数のレベルで行われるため、このシナリオは連鎖バインディングと呼ばれます。

ここで、{PROPERTY}はバインドするプロパティのプレースホルダーです。子コンポーネントから親コンポーネントのプロパティの更新をサポートするために、イベントハンドラと値を提供する必要があります。

例を挙げます。

以下のように、コンポーネントChild.razorを作成します。

Child Component

Child Message: @Message

@code { [Parameter] public string Message { get; set; }

[Parameter] public EventCallback MessageChanged { get; set; }

private async Task UpdateMessageFromChild() { await MessageChanged.InvokeAsync(“Message from child component”); } }

文字列型のコンポーネントパラメータと、コンポーネントパラメータと同じ型のEventCallbackを宣言しています。

EventCallbackの名前は、{PARAMETER NAME}Changedという構文に従わなければなりません。 {PARAMETER NAME}はコンポーネントパラメータ名のプレースホルダです。他の命名形式を使用すると、ランタイムエラーが発生します。

上記の例では、コンポーネントパラメータは Message、EventCallback は MessageChanged という名前になっています。

以下のように、コンポーネントParent.razorを作成します。

@page “/parent”

Parent Component

@code { string MesssageFromParent = “Message from parent component”; }

C#のプロパティMesssageFromParentは、ChildコンポーネントのMessageパラメータにバインドされています。Child コンポーネントの Message パラメータは、Message パラメータと同じタイプの MessageChanged イベントを持つので、バインド可能です。

実行すると、以下のような出力が表示されます。

ボタンをクリックするとすぐに、下の画像のようにメッセージが更新されます。

6

Blazorのイベントハンドリング

1章 | 2章 | 3章 | 4章 | 5章 | 6章 | 7章 | 8章 | 9章

HTML 属性に @on{EVENT} という名前で、delegate 型の値を追加します。この属性の値は、Blazor コンポーネントによってイベントハンドラとして扱われます。

Blazor がサポートするイベントハンドラには、@onclick, @onchange, @onselect, @onfocus, @onkeyup 等があります。

例

<button @onclick=“ButtonClicked”>Click me

@code { void ButtonClicked() { Console.WriteLine(“button clicked”); } }

ボタンをクリックすると、ButtonClickedメソッドが呼び出されます。

非同期イベント処理

以下に示す例をご覧ください。

<button @onclick=“ButtonClicked”>Click me

@code { async Task ButtonClicked() { await Task.Delay(1000); Console.WriteLine(“button clicked”); } }

ButtonClickedメソッドは、ボタンがクリックされたときに非同期で呼び出されます。

イベント引数の使用

以下に示す例をご覧ください。

<select class=“form-control col-md-4” @onchange=“SelectGender”>

@code { protected string Gender { get; set; }

protected void SelectGender(ChangeEventArgs e) { Gender = e.Value.ToString(); } }

SelectGender メソッドを select 要素の onchange イベントにバインドしています。

イベントメソッド定義におけるイベント引数の指定は任意です。イベント引数をメソッド内で使用する場合のみ、必須となります。

イベント処理にラムダ式を使用する

ラムダ式を使って、イベント属性に無名関数を割り当てることができます。

以下に示す例をご覧ください。

@for (int i = 1; i < 4; i++) { int textboxNumber = i;

@onfocus="@(() => FocusTextbox(textboxNumber))" />

@code { protected string Gender { get; set; }

protected void FocusTextbox(int textboxNumber) { Console.WriteLine($“You have selected textbox number {textboxNumber}”); } }

for ループを使用して 3 つのテキスト ボックス コントロールを作成します。各テキストボックスの onfocus イベントで FocusTextbox メソッドを呼び出すには、ラムダ式を使用しています。

EventCallback

EventCallbackは、複数のコンポーネントにまたがるイベントを公開するために使用することができます。これは、子コンポーネントでイベントが発生したときに、親コンポーネントのメソッドを呼び出すのに役立ちます。

EventCallbackという構文でイベントパラメータを指定することで、EventCallbackを強く型付けすることができます。

例- EventCallback

例題をもとにEventCallbackを理解しましょう。

以下のように、コンポーネントChild.razorを作成します。

Child Component

@code { [Parameter] public EventCallback ChildClick { get; set; } }

以下のように、別のコンポーネントParent.razorを作成します。

Parent Component

@message

@code { string message { get; set; } void ChildClickHandler() { message = “Child event has occurred”; } }

子コンポーネントにEventCallbackパラメーターを作成しました。ボタンのonclickイベントハンドラは、ParentComponentからEventCallbackデリゲートを受信するように設定されています。

ParentComponentは、子コンポーネントのEventCallbackであるChildClickを、そのChildClickHandlerメソッドに設定します。

子コンポーネントのボタンをクリックすると、親コンポーネントのChildClickHandlerメソッドが呼び出されます。文字列プロパティのメッセージが更新され、ParentComponentに表示されます。

既定のアクションを止める

イベントの既定のアクションを阻止するには、@on{DOM EVENT}:preventDefault ディレクティブ属性を使用します。この属性は、ブール値を引数として受け取ります。もし、引数を指定しなければ、デフォルトの値であるtrueが指定されたのと同じになります。

以下に示す例をご覧ください。

<input value=“@name” @onkeydown=“KeyDownHandler” @onkeydown:preventDefault />

@code { private string name { get; set; } private void KeyDownHandler(KeyboardEventArgs e) { // 何らかの処理 } }

Boolean型の値はプロパティにバインドすることができるので、ユーザーの要求に基づいてイベントの既定のアクションを制御することができます。

以下に示す例をご覧ください。

<input @onkeydown=“KeyDownHandler” @onkeydown:preventDefault=“shouldPreventDefault” />

@code { private bool shouldPreventDefault = true; }

イベント伝達を停止する

HTML要素がその親要素にイベントを伝達することがあります。

Blazor では、@on{DOM EVENT}:stopPropagation ディレクティブ属性を使って、イベントの伝達を停止させることができます。この属性は、引数としてブール値を受け取ります。引数を指定しない場合は、デフォルトの値である true が指定されたのと同じになります。

以下に示す例をご覧ください。

<button @onclick:stopPropagation>Click

Boolean型の値はプロパティにバインドすることができるので、ユーザーの要求に基づいてイベントの伝達を制御することができます。

<button @onclick:stopPropagation=“shouldStopPropagation”>Click

@code { private bool shouldStopPropagation = true; }

7

ルーティング＆ナビゲーション

1章 | 2章 | 3章 | 4章 | 5章 | 6章 | 7章 | 8章 | 9章

App.razor ファイルで使用される Router コンポーネントは、Blazor アプリケーションのコンポーネントへのルーティングを可能にします。

Blazor アプリケーションを作成すると、App.razor ファイルに以下のようなコードが記述されます。

<Router AppAssembly=“@typeof(App).Assembly > <RouteView RouteData=“@routeData” DefaultLayout=“@typeof(MainLayout)” / > <FocusOnNavigate RouteData=“@routeData” Selector=“h1” / > NotFound

Sorry, there's nothing at this address.

Router コンポーネントは、現在のナビゲーション状態に対応するルートデータを供給するために使用されます。FocusOnNavigateコンポーネントは、ユーザーがあるコンポーネントから別のコンポーネントに移動するときに、CSSセレクタに一致する要素にフォーカスを設定するために使用されます。これにより、スクリーンリーダーと互換性のある、アクセシブルなルーティング機構を作成することができます。

NotFound プロパティは、要求されたルートでデータが見つからない場合に、カスタムコンテンツを表示するために使用されます。

ページディレクティブを使用して、Razor コンポーネントのルートを定義します。また、1つのコンポーネントに対して、複数の異なる @page ディレクティブを使用することができます。

以下に示す例をご覧ください。

@page “/route1” @page “/home/route1”

This component is accessible via multiple routes.

2つの異なるコンポーネントに同じルートを設定することはできません。これを行うと、ランタイムエラーが発生します。

ルートパラメーター

ルートパラメーターを定義することで、同じ名前のコンポーネントパラメータに入力することができます。1つのルートは複数のパラメータを持つことができます。

以下に示す例をご覧ください。

@page “/home/{Name}/{Message}”

Hello @Name

@Message

@code { [Parameter] public string Name { get; set; }

[Parameter] public string Message { get; set; } }

コンポーネントのルートパラメータプロパティは、public として定義する必要があります。それ以外のアクセス修飾子を使用すると、コンパイル時にエラーになります。

ルートパラメーター名は 大文字と小文字を区別しませんので、以下のように使用することができます。

@page “/home/{name}/{message}”

Hello @NAME

@MESSAGE

@code { [Parameter] public string NAME { get; set; }

[Parameter] public string MESSAGE { get; set; } }

Blazor はオプションのルートパラメータもサポートしています。ルートパラメータをオプションとしてマークするには、?記号を付けます。

以下に示す例をご覧ください。

@page “/home/{name}/{message?}”

Hello @Name

@Message

@code { [Parameter] public string Name { get; set; }

[Parameter] public string Message { get; set; } }

オプションのパラメーターは複数持つことができます。

以下のルートは 有効です。

@page “/home/{name}/{message?}/{text?}”

オプションでないパラメーターは、オプションのパラメーターの後に出現させることはできません。オプションのパラメーターの後にオプションでないパラメーターを追加すると、ランタイムエラーが発生します。

次のルートは無効です。

@page “/home/{name?}/{message}“

ルート制約

ルート制約を使用して、ルート上で型の一致を強制することができます。

以下に示す例をご覧ください。

@page “/home/{name}/{userID:int}/{isAdmin:bool}”

Hello @Name

User ID: @userID

isAdmin: @isAdmin

@code { [Parameter] public string Name { get; set; }

[Parameter] public int userID { get; set; }

[Parameter] public bool isAdmin { get; set; } }

このコンポーネントのルートは、以下の条件を満たした場合にマッチします。

• ルートには、name パラメーターに値を指定する必要があります。
• ルートには userID パラメーターの値を指定する必要があり、int 型であることが必要です。
• ルートには isAdmin パラメーターの値を指定する必要があり、bool 型である必要があります。

このパターンにマッチするルートの例としては、次のようなものがあります。 – “/home/John/1234/true”

 オプションのパラメーターでも同様に、ルート制約を使用することができます。

例

@page “/home/{name}/{userID:int}/{isAdmin:bool?}”

NavigationManager

NavigationManagerクラスを使用すると、C#コードでナビゲーションを処理することができます。このクラスはNavigateToメソッドを提供し、コンポーネントのルートをパラメータとして受け取り、ユーザーをあるコンポーネントから別のコンポーネントにリダイレクトさせます。

例を挙げます。

以下のようにベースクラスRouting.razor.csを作成します。

using Microsoft.AspNetCore.Components; namespace BlazorWasmDemo.Client.Pages; public class RoutingBase : ComponentBase { [Inject] public NavigationManager NavigationManager { get; set; } [Parameter] public string Name { get; set; } protected void NavigateAway() { NavigationManager.NavigateTo(“parent/1234”); } }

Routing.razorコンポーネント内に以下のコードを追加します。

@page “/home/{name}”

@inherits RoutingBase

Hello @Name

ボタンのクリックでNavigateAwayメソッドを呼び出すことにします。これは、ユーザーをルート「/parent/1234」にリダイレクトします。

NavigateToメソッドには、オプションでforceLoadというBooleanパラメータがあります。このパラメータに真の値を渡すと、ブラウザはサーバーから新しいページを再読み込みします。

キャッチオールのルートパラメーター

キャッチオールのルートパラメーターは、ルーティングパラメーターが明示的に定義されていない場合に、様々なルートを処理するために使用することができます。

以下に示すコンポーネントの例をご覧ください。

@page “/home/{*routeParams}”

@code { [Parameter] public string? RouteParams { get; set; } }

このコンポーネントでは、以下のルートが有効です。

• /home/John
• /home/123
• /home/John/123/345/USA/true

キャッチオールのルートパラメーターは，以下の条件を満たす必要があります。

• 同じ名前の対応するコンポーネントパラメータを持つ必要があります。この名前は大文字と小文字を区別しません。
• 文字列型である必要があります。ルート制約をかけることはできません
• URLの末尾に存在する必要があります。

NavLinkコンポーネント

ナビゲーションリンクを作成する際に、HTMLの属性の代わりにNavLinkコンポーネントを使用することができます。これは、現在のURLがhrefプロパティに一致するかどうかに基づいて、アクティブなCSSクラスの有無を切り替えます。これにより、ユーザーは、利用可能なすべてのナビゲーションリンクのうち、どのページがアクティブであるかを理解することができます。

例

NavLinkコンポーネントのMatch属性には、2つの値を指定することができます。

• NavLinkMatch.All:  現在のURL全体に一致する場合のみ、NavLinkをアクティブにします。
• NavLinkMatch.Prefix:  現在のURLの先頭部分に一致すれば、NavLinkをアクティブにします。これはデフォルト値です。

クエリー文字列

[SupplyParameterFromQuery] 属性と [Parameter] 属性を併用することで、ルートのクエリ文字列からコンポーネントパラメータへ入力するように指定することができます。

@page “/movie”

@Name

@Genre

[Parameter] [SupplyParameterFromQuery] public string? Genre { get; set; } }

このコンポーネントの有効なルートは “/movie?name=avatar&genre=science%20fiction” とすることができます。[SupplyParameterFromQuery] 属性Name プロパティを使用して、クエリパラメータの名前を指定することもできます。

例:

[Parameter] [SupplyParameterFromQuery(Name=“Category”)] public string? Genre { get; set; }

この場合、有効なルートは /movie?name=avatar&category =science%20fiction” となります。

コンポーネントのクエリパラメーターは、以下のデータ型をサポートしています。

• bool
• DateTime
• decimal
• double
• float
• Guid
• int
• long
• string

NavigationManagerクラスのGetUriWithQueryParameterメソッドを使用すると、現在のURLから1つまたは複数のクエリーパラメーターを追加、更新、削除することができます。

このメソッドの構文は GetUriWithQueryParameter(“{NAME}”, {VALUE}) で、{NAME} はクエリパラメーターの名前を表すプレースホルダー、{VALUE} はクエリパラメーターの値を表すプレースホルダーです。はクエリパラメーターの値のプレースホルダーです。このメソッドは文字列の値を返します。

クエリパラメーターが既に現在の URI に存在する場合、このメソッドはその値を更新します。クエリパラメーターが現在の URI に存在しない場合、このメソッドは指定された値で新しいパラメーターを追加します。

例:

@page “/movie” @inject NavigationManager Navigation

@Name

@Genre

NewURI: @NewURI

@code { string NewURI { get; set; }

[Parameter] [SupplyParameterFromQuery] public string? Name { get; set; }

[Parameter] [SupplyParameterFromQuery(Name = “Category”)] public string? Genre { get; set; }

void UpdateCurrentURI() { NewURI = Navigation.GetUriWithQueryParameter(“name”, “Top Gun”); } void NavigateToNewURI() { Navigation.NavigateTo(NewURI); } }

ボタンをクリックすると、クエリパラメーター「name」の値が更新されます。

もし、URIに新しいクエリーパラメーターを追加したい場合は、以下のようにコードを更新すればよいです。

NewURI = Navigation.GetUriWithQueryParameter(“language”, “English”);

URIから既存のクエリパラメーターを削除したい場合は、以下のように値をnullに設定します。

NewURI = Navigation.GetUriWithQueryParameter(“name”, (string)null);

GetUriWithQueryParametersメソッドを使用すると、URIから複数のパラメータを同時に追加、更新、削除することができます。

以下に示す例をご覧ください。

NewURI = Navigation.GetUriWithQueryParameters(new Dictionary<string, object?> { [“name”] = “Top Gun”, [“category”] = “Action”, [“language”] = “English”, });

これにより、既存のクエリーパラメーターである名前とカテゴリーが更新され、新しいクエリーパラメーターである言語が追加され、値が英語に設定されます。

Blazorレイアウト

レイアウトとは、ナビゲーションメニュー、ヘッダー、フッターなど、複数のコンポーネントに共通する UI 機能を含む Blazor コンポーネントのことです。

アプリケーションの既定のレイアウトは、App.razor ファイル内の Router コンポーネントで定義されています。

@pageディレクティブを持つルーディング可能なコンポーネントのレイアウトを指定するには、@layoutディレクティブを使用します。コンポーネントで直接レイアウトを指定すると、Routerコンポーネントで設定されたアプリケーションの既定のレイアウトは上書きされます。

以下に示す例をご覧ください。

@layout CustomLayout @page “/layout-demo”

Custom layout demo.

Blazor はレイアウトの入れ子をサポートしています。コンポーネントはレイアウトを参照することができ、そのレイアウトは別のレイアウトを参照します。これは、多階層のメニュー構造を作るのに役立ちます。

カスタムレイアウトコンポーネントの作成

コンポーネントがレイアウトコンポーネントとして機能するためには、次の2つの条件を満たす必要があります。

• LayoutComponentBase クラスから継承する必要があります。このクラスは、レイアウト内のコンテンツをレンダリングするために使用されるBodyプロパティを定義しています。
• ボディコンテンツがレンダリングされる場所を指定する必要があります。これは、Razor の構文 @Body を使って行います。

以下に示す例をご覧ください。

@inherits LayoutComponentBase

@Body

8

依存性注入

1章 | 2章 | 3章 | 4章 | 5章 | 6章 | 7章 | 8章 | 9章

依存性注入（DI）は、クラスとその依存関係の間で制御の逆転（IoC）を実現するためのソフトウェア設計パターンです。

Blazorアプリに登録されたサービスを Blazor コンポーネントに直接注入することができます。カスタムサービスは、DI経由で利用できるようにBlazorアプリに登録する必要があります。

サービス寿命

Blazorのサービスは、その登録時に、以下の3種類のライフタイム(サービス寿命)のうちいずれかを指定します。

• **Singleton:**すべてのコンポーネントで共有されるサービスのインスタンスを1つ作成します
• **Transient:**コンポーネントがサービスを要求するたびに、サービスの新しいインスタンスを作成します。
• **Scoped:**ウェブリクエストごとにサービスのインスタンスを一つ作成します。
  • Blazor WebAssembly アプリは、Scoped ライフタイムをサポートしていません。Scoped ライフタイムで登録されたサービスは、Blazor WebAssembly アプリ上は Singleton ライフタイムサービスのように動作します。
  • Blazor Server アプリは、HTTP リクエスト間の Scoped ライフタイムをサポートしますが、クライアント側に読み込まれたコンポーネントとサーバー間の SignalR 接続におけるメッセージごとのライフタイムには対応しません。

既定のBlazorサービス

Blazorアプリでよく利用されるサービスは、以下の表の通りです。

Blazor WebAssemblyアプリにサービスを追加する

Program.cs ファイルを使用して、Blazor WebAssembly アプリと Blazor Server アプリの両方に対してカスタムサービスを登録することができます。

Blazor WebAssemblyアプリのProgram.csファイルのコードサンプルを見てください。

var builder = WebAssemblyHostBuilder.CreateDefault(args);

builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });

await builder.Build().RunAsync();

Blazor Server アプリの Program.cs ファイルのコードサンプルを見てください。

var builder = WebApplication.CreateBuilder(args);

builder.Services.AddRazorPages(); builder.Services.AddServerSideBlazor(); builder.Services.AddSingleton();

var app = builder.Build();

app.UseRouting();

app.Run();

Blazor コンポーネントにサービスを注入する

コンポーネントへのサービスのインジェクションは，以下の2つの方法で行うことができます．

• ベースクラスで[Inject]属性を使用する。
• コンポーネントで @inject 命令を使用する。

1つのコンポーネントに複数のサービスを注入することができます。

以下に示すRazorコンポーネントの例を見てください。

@page “/movie” @inject NavigationManager Navigation

<button @onclick=“NavigateToPage”>Go To Page

@code { void NavigateToPage() { Navigation.NavigateTo(“/home”); } }

ベースクラスについては、以下に示す例を見てください。

using Microsoft.AspNetCore.Components; namespace BlazorWasmDemo.Client.Pages; public class RoutingBase : ComponentBase { [Inject] public NavigationManager NavigationManager { get; set; } = default!; [Inject] HttpClient Http { get; set; } = default!;}

注入されたサービスは、コンポーネントが初期化されるときに利用可能になることが期待されます。したがって、null免除演算子 (default!) を使用して規定の即値を割り当てています。nullではない値で初期化しないと、コンパイラは「Non-nullable property must contain a non-null value when exiting constructor」という警告メッセージを表示します。あるいは .NET SDKバージョン7以降であれば、C#11から追加されたrequired修飾子を用いることで、null免除演算子に頼ることなく、以下のように記述できます。

Blazor サービスでの依存性注入の使用

コンストラクタのインジェクションを利用して、サービスを別のサービスに注入することができます。[Inject]属性や@injectディレクティブはサービスクラスで使用することはできません。

以下に示す例をご覧ください。

public class MyCustomService { private readonly HttpClient _httpClient; private readonly NavigationManager _navigationManager ; public MyCustomService(HttpClient httpClient, NavigationManager navigationManager) { _httpClient = httpClient; _navigationManager = navigationManager; } }

9

JavaScript 相互運用

1章 | 2章 | 3章 | 4章 | 5章 | 6章 | 7章 | 8章 | 9章

JavaScriptの相互運用性、別名JavaScript interopは、.NETのメソッドからJavaScriptの関数を呼び出したり、JavaScriptの関数から.NETのメソッドを呼び出すことができる機能です。

.NETからJavaScriptの関数を呼び出す

IJSRuntimeインターフェースを使って、.NETからJavaScriptの関数を呼び出すことができます。

IJSRuntime インターフェースは、以下の2つのメソッドを提供します。

• InvokeAsync: Promiseを含む何らかの値やオブジェクトを返すJavaScript関数を呼び出すために使用します。
• InvokeVoidAsync:voidまたはundefinedを返すJavaScriptの関数を呼び出すために使用します。

カスタムJavaScriptコードは、Blazor WebAssembly アプリであれば wwwroot/index.html に、Blazor ServerアプリであればPages/_Host.cshtmlに、追加することができます。

例を挙げます。

getArraySum関数は、パラメータとして配列を受け取り、その配列の全要素の合計を返します。

コンポーネント JSDemoBase.razor を作成し、ベースクラス JSDemoBase.razor.cs に次のコードを追加します。

using Microsoft.AspNetCore.Components; using Microsoft.JSInterop;

namespace BlazorWasmDemo.Client.Pages; public class JSDemoBase : ComponentBase { [Inject] protected IJSRuntime JSRuntime { get; set; } = default!; protected int sumOfArray = 0; private int[] arrayItems = new int[] { 2, 4, 6, 8, 10 }; protected async Task GetSumOfArray() { sumOfArray = await JSRuntime.InvokeAsync(“getArraySum”, arrayItems); } }

InvokeAsyncメソッドを使って、JavaScript関数 “getArraySum” を呼び出します。JavaScript関数”getArraySum”は合計を返し、それがint型のフィールド変数sumOfArrayに代入されます。

このGetSumOfArrayメソッドは、以下のようにボタンクリックで呼び出すことができます。

@page “/calljsmethod” @inherits JSDemoBase

<button @onclick=“GetSumOfArray”>Get Array Sum

The sum of array elements is : @sumOfArray

JavaScriptの内蔵メソッドを呼び出すには、次のようなコードを使用します。

protected async Task ShowAlert() {    await JSRuntime.InvokeVoidAsync(“alert”, “I am invoked from .NET code”); } protected async Task ShowArrayItems() {    await JSRuntime.InvokeVoidAsync(“console.table”, arrayItems); }

上記のShowAlertメソッドでは、文字列のパラメーターを渡してalert関数を呼び出しています。ShowArrayItemsメソッドは、JavaScriptのconsole.table関数を呼び出して、表示するarrayItemsを渡しています。

HTML要素への参照をキャプチャする

ElementReference構造体を使用すると、コンポーネント内のHTML要素への参照を取得することができます。これは、レンダリングされた要素への参照を表すために使用されます。

HTML要素への参照をコンポーネントに取り込むには、HTML要素に@ref属性を追加する必要があります。また、@ref属性の値と一致する名前のElementReference型のフィールドを定義します。

このElementReferenceをJavaScriptコードに渡すには、JavaScript 相互運用機能を使用します。JavaScriptコードはDOM操作に使用できるHTMLElementのインスタンスを受け取ることになります。

例を挙げます。

以下のJavaScript コードを追加します。

この関数は、HTML 要素の参照を受け取り、その値をアラートボックスに表示します。

この関数を呼び出すには、ベースクラス内に次のコードを追加します。

protected ElementReference name; protected async Task ShowName() { await JSRuntime.InvokeVoidAsync(“showValue”, name); }

および以下のコードのように、HTML要素の@ref属性を使って、ElementReferenceのインスタンスを取得します。

<button class=“btn btn-primary” @onclick=“ShowName”>Show Name <input type=“text” @ref=“name” class=“form-control” placeholder=“Enter your name” />

JavaScriptの関数から.NETの静的メソッドを呼び出す

DotNet.invokeMethodやDotNet.invokeMethodAsync関数を使って、JavaScriptから静的な.NETメソッドを呼び出すことができます。

呼び出す.NETメソッドは、以下の条件を満たす必要があります。

• publicかつstaticに宣言する必要があります。
• [JSInvokable]属性で装飾されている必要があります。

この条件を満たした.NETメソッドを JavaScriptから呼び出すには、その.NET静的メソッドの識別子、C#メソッドを含むアセンブリの名前、および必要な引数を渡します。

関数の構文は次のとおりです - DotNet.invokeMethodAsync(‘{ASSEMBLY NAME}’, ’{.NET METHOD Name}’, {ARGUMENTS});

各部分の説明を以下に記します。

• {ASSEMBLY NAME}は、アプリケーション・アセンブリ名のプレースホルダーです。
• {.NET METHOD Name}は呼び出す.NETメソッドのプレースホルダーです。
• {ARGUMENTS}は、呼び出される.Netメソッドが必要とする引数のプレースホルダーです。これはオプションのパラメータです。

例を挙げます。

JSDemoBase.razor.cs ファイルに次のコードを追加します。

using Microsoft.AspNetCore.Components; using Microsoft.JSInterop;

namespace BlazorTutorial.Client.Pages; public class JSDemoBase: ComponentBase { [Inject] protected IJSRuntime JSRuntime { get; set; } = default!; protected void InvokeJSMethod(){ JSRuntime.InvokeVoidAsync(“printMessageToConsole”); } [JSInvokable]public static Task PrintMessage(){ return Task.FromResult(“I am invoked from JavaScript.”); } }

上記のInvokeJSMethodメソッドは、JavaScript関数であるprintMessageToConsoleを呼び出します。PrintMessage メソッドは、[JSInvokable] 属性を持っており、且つ public および static として宣言されています。これによって、JavaScript 関数printMessageToConsoleは、.NET静的メソッドPrintMessageを呼び出します。

JSDemoBase.razor ファイルに、以下のようにボタンを追加します。

<button @onclick=“InvokeJSMethod”>Invoke static .NET method

以下のJavaScript コードを追加します。

JavaScript 関数、printMessageToConsoleを上記のとおり定義し、DotNet.invokeMethodAsync 関数を使って C# メソッド PrintMessage を呼び出しています。アセンブリの名前は “BlazorTutorial.Client”として渡しています。

コンポーネントのインスタンスメソッドの呼び出し

以下の手順で、Blazorコンポーネントの.NETインスタンスメソッドを呼び出すことができます。

• DotNetObjectReference.Create を使って、JavaScript関数に渡すことのできる.NETオブジェクト参照を作成します。
• .NETオブジェクト参照のinvokeMethodまたはinvokeMethodAsyncメソッドを使って、コンポーネントのインスタンスメソッドの呼び出しを行います。
• コンポーネントが破棄されるタイミングで、.NETオブジェクトへの参照も破棄します。

例を挙げます。

以下のJavaScriptコードを追加します。

function displayMessageCallerJS(objectRef, value) { objectRef.invokeMethodAsync(‘DisplayMessage’, value); }

関数 displayMessageCallerJS を追加し、objecRef およびvalue という名前の2つのパラメーターを受け取るようにしました。この関数は、引数に渡されたobjectRefが参照している.NETオブジェクト (コンポーネント) のDisplayMessageインスタンスメソッドを呼び出し、引数としてvalueを渡します。

JSDemoBase.razor.cs ファイルに次のコードを追加します。

public class JSDemoBase : ComponentBase, Idisposable { private DotNetObjectReference? objectRef;

protected string message = “Click the button.”;

protected override void OnInitialized() { objectRef = DotNetObjectReference.Create(this);; }

protected void InvokeDisplayMessageCallerJS(string value) { JSRuntime.InvokeVoidAsync(“displayMessageCallerJS”, objectRef, value); }

private void DisplayMessage(string value) { message = value; StateHasChanged(); }

public void Dispose() { objectRef?.Dispose(); }

.NETオブジェクトへの参照であるDotNetObjectReference型のフィールド変数objectRefを宣言しています。OnInitializedライフサイクルメソッドの中で、DotNetObjectReference.Create 静的メソッドを呼び出し、このコンポーネント自身を参照する.NETオブジェクト参照を生成してobjectRefに代入しています。InvokeDisplayMessageCallerJS メソッドは、文字列パラメータを受け取ります。そして、このメソッドは、JavaScript関数であるdisplayMessageCallerJSを呼び出し、このコンポーネント自身を参照する.NETオブジェクト参照objectRefと、文字列パラメータを渡します。

[JSInvokable] 属性を持つ DisplayMessageというインスタンスメソッドを作成し、文字列のパラメータを受け取るようにします。このインスタンスメソッドは、JS関数displayMessageCallerJSから呼び出されることになります。DisplayMessageは、パラメータの値を変数 message に代入し、Statehaschanged() を呼び出して、コンポーネントに状態の変化を通知します。

最後に、このコンポーネントが破棄されるタイミングで、このコンポーネント自身を参照する.NETオブジェクト参照も破棄するようIDisposableインターフェースを実装し、このコンポーネントのDispose メソッドの中で、.NETオブジェクト参照のDisposeメソッドを呼び出します。

JSDemoBase.razor ファイルに、以下のようにボタンを追加します。

<button @onclick=”@(()=>InvokeDisplayMessageCallerJS(“The Button is clicked”))“>Call JS Method

@message

ボタンクリック時に、InvokeDisplayMessageCallerJSメソッドを呼び出し、パラメーターとして文字列の値を渡します。更新されたメッセージの値が画面に表示されます。

1章 Blazorの基本

2章 Blazorサーバー vs WASM vs ハイブリッド

3章 Blazorコンポーネント

4章 Blazorカスケード値及び パラメータ

5章 Blazorのデータバインディング

6章 Blazorのイベントハンドリング

7章 ルーティング＆ナビゲーション

8章 依存性注入

9章 JavaScript相互運用

続けて読む

下記フォームをご入力の上、続きをお読みください。