iPentec.com / Document / カテゴリ: C# / タグ: ASP.NET Blazor

Blazorアプリケーションでラジオボタンを利用する

概要

Blazorアプリケーションでラジオボタンを利用する場合は、通常のHTMLと同様にinputタグを利用して記述します。ラジオボタンの変更を検出するために @onchange 属性を利用します。

補足

.NET 5以降で利用できるInputRadioGroup, InputRadio コンポーネントを利用した実装方法はこちらの記事を参照してください。

プログラム例

コード

ASP.NET Core アプリケーションを作成し、以下のBlazorアプリケーション用のファイルとコードを準備します。

RadioButton.razor

@page "/RadioButton"
@inherits RadioButtonModel
<h3>RadioButton</h3>
@code {
}
<div>
  <input id="Radio1" name="RadioG" type="radio" checked="true" value="Flag1" @onchange="RadioSelection" /><label for="Radio1">ラジオボタン1</label><br />
  <input id="Radio2" name="RadioG" type="radio" value="Flag2" @onchange="RadioSelection" /><label for="Radio2">ラジオボタン2</label><br />
  <input id="Radio3" name="RadioG" type="radio" value="Flag3" @onchange="RadioSelection" /><label for="Radio3">ラジオボタン3</label><br />
  <input id="Radio4" name="RadioG" type="radio" value="Flag4" @onchange="RadioSelection" /><label for="Radio4">ラジオボタン4</label><br />
  <input id="Radio5" name="RadioG" type="radio" value="Flag5" @onchange="RadioSelection" /><label for="Radio5">ラジオボタン5</label><br />
  <hr />
  <div>@SelectionString</div>
</div>

RadioButton.razor.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Components;

namespace SimpleRadioButton.Pages
{
  public class RadioButtonModel : ComponentBase
  {
    public string SelectionString { get; set; }

    public void RadioSelection(ChangeEventArgs args)
    {
      SelectionString = (string)args.Value;
    }
  }
}

_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

_Host.cshtml

@page
@namespace SimpleRadioButton.Pages
@model SimpleRadioButton.Pages._HostModel
@{
}
<!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

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

Startup.cs

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

namespace SimpleRadioButton
{
  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.UseRouting();
      app.UseStaticFiles();

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

解説

Razorコンポーネントページ "/RadioButton" ページに下記のHTMLコードを記述します。
inputタグで type="radio" を指定してラジオボタンを5つ配置します。またname属性の値を同じ"RadioG" に設定することで、同一のラジオボタンのグループに設定できます。同じラジオボタンのグループに設定されているため、5つのラジオボタンのチェックがそれぞれ排他の状態になります。
最初のラジオボタンにchecked="true"が設定されているため、最初のラジオボタンはデフォルトでチェックされた状態で表示されます。
また @onchange 属性に指定したメソッドはラジオボタンのチェックが変更されたタイミングで呼び出されます。

  <input id="Radio1" name="RadioG" type="radio" checked="true" value="Flag1" @onchange="RadioSelection" /><label for="Radio1">ラジオボタン1</label><br />
  <input id="Radio2" name="RadioG" type="radio" value="Flag2" @onchange="RadioSelection" /><label for="Radio2">ラジオボタン2</label><br />
  <input id="Radio3" name="RadioG" type="radio" value="Flag3" @onchange="RadioSelection" /><label for="Radio3">ラジオボタン3</label><br />
  <input id="Radio4" name="RadioG" type="radio" value="Flag4" @onchange="RadioSelection" /><label for="Radio4">ラジオボタン4</label><br />
  <input id="Radio5" name="RadioG" type="radio" value="Flag5" @onchange="RadioSelection" /><label for="Radio5">ラジオボタン5</label><br />

@inherites ディレクティブを使用して、呼び出されるC#のコードのクラスを継承する指定を razorコンポーネントに追記します。

@inherits RadioButtonModel

ラジオボタンをクリックしてチェック状態が変更された時に呼び出されるコードは @inherites ディレクティブで指定したクラスの @onchange属性で指定されている RadioSelection メソッドが呼び出されます。
RadioSelectionメソッドの第一引数ChangeEventArgsオブジェクトに変更があったラジオボタンの変更情報が与えられます。
ChangeEventArgsオブジェクトのValue プロパティにチェックされたラジオボタンのvalueの値が設定されています。 valueの値を SelectionString プロパティに代入します。

  public class RadioButtonModel : ComponentBase
  {
    public string SelectionString { get; set; }

    public void RadioSelection(ChangeEventArgs args)
    {
      SelectionString = (string)args.Value;
    }
  }

SelectionString プロパティの値はrazorコンポーネントの下記のコードでページ内に表示されます。

  <div>@SelectionString</div>

表示結果

上記のBlazorアプリケーションを実行し、"/RadioButton" ページを表示します。

ラジオボタンをクリックします。4番目のラジオボタンをクリックすると"Flag4"のメッセージがページ下部に表示されます。

別のラジオボタンをクリックし、チェック状態が変わるとページ下部のメッセージがチェックをしたラジオボタンに対応するメッセージに変化します。