Blazor アプリケーションにボタンを配置してクリックイベントを実装する

Blazor アプリケーションにボタンを配置してクリックイベントを実装する手順とコードを紹介します。

手順 (.NET 6)

事前準備

Blazorアプリケーションを作成し、ルーティングコンポーネント、フォールバックページ(ホストページ)、メイン画面(ページ)のRazorコンポーネントを作成します。今回は "SimpleButtonNET6" というプロジェクト名で作成しています。プロジェクトの作成手順の詳細はこちらの記事を参照してください。

Program.cs ファイルの記述

Program.cs ファイルは基本のBlazorアプリケーションのコードのままで問題ありません。app.UseStaticFiles(); を忘れないよう注意します。

フォールバックページの追加

フォールバックページを追加します。ファイル名は "_Host.cshtml" にします。
<script src="_framework/blazor.server.js"></script>の記述を忘れないでください。このJavaScritptファイルへの参照がないと正しく動作しません。

_Host.cshtml

@page
@namespace SimpleButtonNET6.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>

App.razor / _Imports.razor ファイルの追加

App.razorと_Imports.razor ファイルを追加します。_Imports.razor は using を集約するファイルです。詳しくはこちらの記事を参照してください。

_Imports.razor

@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

App.razor

<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>

Index.razor ファイルの追加

アプリケーションの画面のIndex.razorファイルをPagesディレクトリに追加します。
ボタンはbuttonタグで表現します。クリック時に実行するメソッド名を @onclick 属性に指定します。~ ボタンのクリックにより、'@code' ブロックの ButtonClick() メソッドが呼び出され実行されます。ButtonClickメソッド内では、messageText 変数にボタンがクリックされた旨のメッセージを代入しています。
@page "/" の記述により、アプリケーションルートのURLにアクセスすると、Index.razorページのコンテンツが表示されます。

Index.razor

@page "/"
<h3>Index</h3>
<div>
    <button @onclick="ButtonClick">Button1</button>
    <p>@messageText</p>
</div>
@code {
    string messageText;

    void ButtonClick()
    {
        messageText = "ボタンがクリックされました。";
    }
}

実行結果

プロジェクトを実行します。Webブラウザが起動し、アプリケーションルートのURLにアクセスし、下図のページが表示されます。 Index.razorファイルのコンテンツが表示されます。

[Button1]をクリックします。ボタンがクリックされた旨のメッセージがページ下部に表示されます。ボタンのクリックにより、ButtonClick()メソッドが実行され、messageTextに代入された文字列がページに表示される動作が確認できます。

手順 (.NET Core / .NET 5)

事前準備

Blazorアプリケーションを作成し、ルーティングコンポーネント、フォールバックページ(ホストページ)、メイン画面(ページ)のRazorコンポーネントを作成します。今回は "SimpleButton" というプロジェクト名で作成しています。プロジェクトの作成手順の詳細はこちらの記事を参照してください。
画面のIndex.razorの@page ディレクティブには "/" を指定し起動時に表示される画面に設定します。

SignalRを利用できる状態にする

ボタンのクリックイベントなどを取得できるようにするため、SignalRを利用できる状態にします。
Startup.cs ファイルのConfigureメソッド内にapp.UseStaticFiles();を記述してフレームワークのJavaScriptなどのライブラリが利用できる状態にします。

Startup.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Builder;
using Microsoft.AspNetCore.Hosting;
using Microsoft.AspNetCore.Http;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Hosting;

namespace SimpleButton
{
  public class Startup
  {
    // This method gets called by the runtime. Use this method to add services to the container.
    // For more information on how to configure your application, visit https://go.microsoft.com/fwlink/?LinkID=398940
    public void ConfigureServices(IServiceCollection services)
    {
      services.AddRazorPages();
      services.AddServerSideBlazor();
    }

    // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
    public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
    {
      if (env.IsDevelopment()) {
        app.UseDeveloperExceptionPage();
      }

      app.UseStaticFiles();
      app.UseRouting();

      app.UseEndpoints(endpoints =>
      {
        endpoints.MapBlazorHub();
        endpoints.MapFallbackToPage("/_Host");
      });
    }
  }
}

続いて、フォールバックページに <script src="_framework/blazor.server.js"></script> を記述し Blazor Server のJavaScriptを読み込みます。

_Host.cshtml

@page
@namespace SimpleButton.Pages
<!DOCTYPE html>
<html lang="ja">
<head>
    <base href="~/" />
</head>
<body>
    <app>
        @(await Html.RenderComponentAsync<App>(RenderMode.ServerPrerendered))
    </app>
    <script src="_framework/blazor.server.js"></script>
</body>
</html>

ボタンの追加

画面にボタンを追加します。メインのページのIndex.razor ファイルを編集します。
@using Microsoft.AspNetCore.Components.Web のusingを追加しボタンコントロールが利用できる状態にします。このusingを記述しない場合はbuttonタグはHTMLのボタンコントロールになり、@onclick属性が動作しません。usingを追加することでASP.NET Core のコンポーネントとして利用可能になります。
buttonタグでは @onclick属性を記述します。値にはクリックにより呼び出しされる関数名を記述します。下記のコードではボタンがクリックされると ButtonClick 関数を呼び出す動作になります。
@codeディレクティブ内にボタンがクリックされた際に実行されるコードのButtonClick関数を記述します。今回のコードでは string型のmessageText変数に「ボタンがクリックされました。」の文字列を代入しています。messageText変数はページのボタンの下部の段落<p>@messageText</p>のコードにより、変数の値がページに表示される動作になっているため、ボタンをクリックするとボタンの下に「ボタンがクリックされました。」のメッセージが表示されます。

Index.razor

@page "/"
@using Microsoft.AspNetCore.Components.Web
<h3>Index</h3>
<div>
    <button class="" @onclick="ButtonClick">Button1</button>
    <p>@messageText</p>
</div>
@code {
    string messageText;

    void ButtonClick()
    {
        messageText = "ボタンがクリックされました。";
    }
}