データバインディングとイベント

6 分

コンポーネントレンダリングロジックを定義し、UI イベントを処理する方法を調べましょう。

C# 式の値をレンダリングする

Razor で C# 式の値をレンダリングする場合、先頭に @ 文字を使用します。たとえば、次のように Counter コンポーネントは currentCount フィールドの値をレンダリングできます。

<p role="status">Current count: @currentCount</p>

Razor は通常、C# 式がいつ終了し、HTML の記述に戻ったかを判断できます。ただし、括弧を使用して式の開始と終了を明示的に指定することもできます。

<p role="status">Current count: @(currentCount)</p>

制御フローを追加する

通常の C# ステートメントを使用して、コンポーネントレンダリングロジックに制御フローを追加できます。たとえば、次のように C# の if ステートメントを使用して、一部のコンテンツを条件付きでレンダリングできます。

@if (currentCount > 3)
{
    <p>You win!</p>
}

また、C# を使用して、データをループし、項目の一覧をレンダリングすることもできます。

<ul>
    @foreach (var item in items)
    {
        <li>@item.Name</li>
    }
</ul>

イベントを処理する

Blazor コンポーネントは、多くの場合、UI イベントを処理します。 UI 要素からイベントのイベントコールバックを指定するには、@on で始まり、イベント名で終わる属性を使用します。たとえば、次のように @onclick 属性を使用して、ボタンクリックイベント用のハンドラーとして IncrementCount メソッドを指定できます。

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

@onchange や @oninput など、その他の HTML イベント用の C# イベントハンドラーを指定することもできます。イベント処理メソッドは、同期または非同期にすることができます。また、C# ラムダ式を使用して、イベントハンドラーをインラインで定義することもできます。

<button class="btn btn-primary" @onclick="() => currentCount++">Click me</button>

イベントハンドラーメソッドは、必要に応じて、イベントに関する情報を含むイベント引数を受け取ることができます。たとえば、次のように変更された入力要素の値にアクセスできます。

<input @onchange="InputChanged" />
<p>@message</p>

@code {
    string message = "";

    void InputChanged(ChangeEventArgs e)
    {
        message = (string)e.Value;
    }
}

イベントハンドラーが実行されると、Blazor はコンポーネントを新しい状態で自動的にレンダリングするため、入力の変更後にメッセージが表示されます。

データバインディング

多くの場合、UI 要素の値をコード内の特定の値にバインドする必要があります。 UI 要素の値が変更されると、コードの値が変更され、コードの値が変更されると、UI 要素によって新しい値が表示されます。 Blazor のデータバインディングサポートにより、この種の双方向データバインディングを簡単に設定できます。

@bind 属性を使用して、コード内の特定の値に UI 要素をバインドします。次に例を示します。

<input @bind="text" />
<button @onclick="() => text = string.Empty">Clear</button>
<p>@text</p>

@code {
    string text = "";
}

入力の値を変更すると、text フィールドが新しい値で更新されます。また、[クリア] ボタンをクリックして text フィールドの値を変更すると、入力の値もクリアされます。

Razor ディレクティブ

Razor ディレクティブは、Razor 構文の予約キーワードであり、Razor ファイルのコンパイル方法に影響を与えます。 Razor ディレクティブは常に文字 @ で始まります。 @page や @code など、一部の Razor ディレクティブは新しい行の先頭で使用され、@bind などの他のディレクティブは属性として要素に適用できます。 Razor ディレクティブの完全な一覧については、Razor 構文リファレンスを参照してください。

インタラクティビティを有効にする

コンポーネントから UI イベントを処理し、データバインディングを使用するには、コンポーネントが "対話型" である必要があります。既定では、Blazor コンポーネントはサーバーから静的にレンダリングされます。つまり、コンポーネントは要求に応答して HTML を生成し、それ以外の場合は UI イベントを処理できません。コンポーネントを対話型にするには、@rendermode ディレクティブを使用して対話型レンダリングモードを適用します。

@rendermode ディレクティブは、コンポーネント定義に適用できます。

@rendermode InteractiveServer

または、コンポーネントインスタンスに適用できます。

<Counter @rendermode="InteractiveServer" />

現在、Counter コンポーネントはこのアプリ内で唯一の対話型コンポーネントであり、対話型サーバーレンダリングを使用します。対話型サーバーレンダリングでは、ブラウザーとの WebSocket 接続経由でサーバーからの UI イベントを処理します。 Blazor はこの接続を介して UI イベントをサーバーに送信するので、イベントをアプリコンポーネントで処理することができます。その後、Blazor は、レンダリングされた更新内容を使用してブラウザー DOM の更新を処理します。

Diagram of Blazor interactive server rendering.

または、Blazor コンポーネントで InteractiveWebAssembly レンダリングモードを使用して、クライアントから対話形式でレンダリングすることもできます。このモードでは、コンポーネントコードがブラウザーにダウンロードされ、WebAssembly ベースの .NET ランタイムを使用してクライアント側で実行されます。

Diagram of Blazor interactive WebAssembly rendering.

どの対話型レンダリングモードを使用するかは、アプリの要件によって異なります。現在、この Blazor プロジェクトはサーバーベースのレンダリング用にのみ設定されているため、このモジュールでは、静的で対話型のサーバーレンダリングを引き続き使用します。

続行

データ バインディングとイベント