Blazor を使用して、ASP.NET Core を使用した最初の Web アプリをビルドします

Windows Linux macOS

カウンターを試す

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

カウンター ページには、ページに表示されているカウント数を増やすための [こちらをクリック] ボタンが表示されます。

こちらをクリック ボタンを選択すると、ページを更新することなくカウントを増加させることができます。Web ページでカウンターを増やすには、通常は JavaScript を記述する必要がありますが、Blazor では C# を使用することができます。

Counter コンポーネントの実装は、Components/Pages ディレクトリ内にある Counter.razor ファイルにあります。

Components/Pages/Counter.razor
@page "/counter"
@rendermode InteractiveServer

<PageTitle>Counter</PageTitle>

<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++;
    }
}

上部の @page ディレクティブの指定に従って、ブラウザーで /counter を要求すると、Counter コンポーネントがその内容をレンダリングします。@rendermode ディレクティブは、コンポーネントの対話型サーバー レンダリングを有効にして、ブラウザーからユーザー インターフェイス イベントを処理できるようにします。

Click me ボタンが選択されるたび:

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