Blazor Hybrid の Razor コンポーネント

  • 8 分

開発環境の設定が完了したので、Blazor Hybrid プロジェクトの構造を確認し、新しいページを追加する方法を学習します。

Razor とは

Razor は、Web ページに .NET ベースのコードを埋め込むためのマークアップ構文です。 Razor 構文は、HTML、C#、および通常は @ で始まる Razor 固有の構文で構成されます。 Razor を含んでいるファイルには、一般に .cshtml ファイル拡張子 (Razor Pages と MVC を使用したサーバー側の開発で使用) または .razor 拡張子 (Razor コンポーネント ファイルで使われる場合) が付いています。 Razor 構文は、各種の JavaScript シングルページ アプリケーション (SPA) フレームワーク (Angular、React、VueJs、Svelte など) のテンプレート エンジンに似ています。

Razor コンポーネントとは

Razor コンポーネントは、再利用可能な Web UI を定義します。 Blazor コンポーネントは、SPA フレームワークの React コンポーネントや Angular コンポーネントに似ています。

プロジェクトを調べると、.razor ファイルでさまざまな Razor コンポーネントが定義されているのがわかります。

コンパイル時には、各 Razor コンポーネントが .NET クラスに組み込まれます。 クラスには、状態、レンダリング ロジック、ライフサイクル メソッド、イベント ハンドラーなどの一般的な UI 要素が含まれています。

カウンターを試す

実行中のアプリで、左側のサイドバーの [カウンター] タブを選んで、[カウンター] ページに移動します。 次のページが表示されます。

[カウンター] タブを示すスクリーンショット。

[クリックしてください] ボタンを選択して、ページを更新せずにカウンターを増分します。 Web ページでカウンターを増分するには、通常、JavaScript を記述する必要がありますが、Blazor では C# を使用できます。

Counter コンポーネントの実装は、Components/Pages/Counter.razor で確認できます。

@page "/counter"

<h1>Counter</h1>

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

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

@code {
    private int currentCount = 0;

    private void IncrementCount()
    {
        currentCount++;
    }
}

ブラウザーで /counter の要求があると、上部の @page ディレクティブで指定されているように、Counter コンポーネントによってそのコンテンツがレンダリングされます。

[Click me] (ここをクリック) ボタンを選ぶたび:

  • onclick イベントが発生します。
  • IncrementCount メソッドが呼び出されます。
  • currentCount 変数がインクリメントされます。
  • コンポーネントがレンダリングされ、更新されたカウントが表示されます。

自分の知識をチェックする

1.

Blazor Hybrid アプリで使用される .NET ランタイムはどれですか?

2.

Blazor UI は通常どのように定義されますか?