iPentec.com / Doc / C# / ASP.NET Blazor

InputRadioGroup, InputRadio コンポーネントを利用してBlazorアプリケーションでラジオボタンを実装する

InputRadioGroup, InputRadio コンポーネントを利用してBlazorアプリケーションでラジオボタンを実装するコードを紹介します。

概要

こちらの記事ではBlazorアプリケーションでラジオボタンを表示してチェック状態を取得するコードを紹介しました。紹介したコードで問題なく動作しますが、.NET 5以降では、 InputRadio コンポーネントを利用するとさらに手軽にRadioButtonを実装できます。
この記事では、.NET 6を利用して、InputRadio コンポーネントを利用してラジオボタンを表現するコードを紹介します。

プログラム

こちらの記事で紹介している手順でBlazorアプリケーションを作成します。

コード

Program.cs, App.razor, Pages/_Host.cshtml に関しては、単純なBlazorアプリケーションのコードと同じです。

Program.cs

var builder = WebApplication.CreateBuilder(args);
builder.Services.AddRazorPages();
builder.Services.AddServerSideBlazor();
var app = builder.Build();

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

app.Run();

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>

Pages/_Host.cshtml

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

ラジオボタンのチェック項目を示すEnumを定義します。今回は別ファイルにしていますが、ほかのC#のコードファイル中に記述しても問題はないです。

RadioButtonEnum.cs

namespace SimpleRadioButtonComponent
{
  public class RadioButtonEnum
  {
     public enum ItemKind { Cookie,　Candy, Icecream, Cake }
  }
}

画面のrazorコンポーネントです。

Index.razor

@page "/"
@using static RadioButtonEnum;

@code {
  private IndexModel em = new();
  private string message = "";

  private void mySubmit(){
    switch (em.Product){
      case ItemKind.Cookie:
        message = "ぺんぎんクッキーが選択されました";
        break;
      case ItemKind.Candy:
        message = "かるがもキャンディーが選択されました";
        break;
      case ItemKind.Icecream:
        message = "しろくまアイスが選択されました";
        break;
      case ItemKind.Cake:
        message = "らっこケーキが選択されました";
        break;
    }
  }
    //
  }

<EditForm Model="@em" OnSubmit="@mySubmit">
<InputRadioGroup Name="product" @bind-Value="em.Product">
    <InputRadio Name="product" Value="@ItemKind.Cookie" id="r01"/><label for="r01">ぺんぎんクッキー</label><br/>
    <InputRadio Name="product" Value="@ItemKind.Candy" id="r02"/><label for="r02">かるがもキャンディー</label><br/>
    <InputRadio Name="product" Value="@ItemKind.Icecream" id="r03"/><label for="r03">しろくまアイス</label><br/>
    <InputRadio Name="product" Value="@ItemKind.Cake" id="r04"/><label for="r04">らっこケーキ</label><br/>
</InputRadioGroup>

 <button type="submit">Submit</button>
 <p>@message</p>

</EditForm>

Index.razorの画面で利用する編集モデルのクラスです。

IndexModel.cs

using System.ComponentModel.DataAnnotations;
using Microsoft.AspNetCore.Components;

namespace SimpleRadioButtonComponent.Pages
{
  public class IndexModel
  {
    [Required, EnumDataType(typeof(RadioButtonEnum.ItemKind))]
    public RadioButtonEnum.ItemKind? Product { get; set; } = null;
  }
}

解説

@page "/" により、アプリケーションルートURLアクセス時に表示されます。
入力フォーム全体をEditForm タグで囲みます。EditFormタグの Model属性にモデルインスタンスを指定します。 OnSubmitはフォームがサブミットされた際のアクションです。今回の例では、mySubmit 関数を呼び出します。
InputRadioGroupタグがラジオボタン(InputRadio タグ)を束ねるグループになります。@bind-value 属性にチェックされている来ぞボタンの値を示すプロパティ名を指定します。今回の例では、IndexModelクラスに実装されている、Productプロパティを指定しています。IndexModel`クラスのオブジェクトインスタンスはコードブロックの private IndexModel em = new(); によって作成されています。

補足

2つのコードは同等です。

private IndexModel em = new();

private IndexModel em = new IndexModel();

InputRadio タグがラジオボタンのコントロールになります。今回は4つのラジオボタンを用意しています。 Value 属性にラジオボタンがチェックされた際に、InputRadioGroupタグの@bind-value属性で指定したプロパティに設定される値を指定します。下記の例では[ぺんぎんクッキー]のラジオボタンがクリックされ、チェックされた場合は、em.Product プロパティの値が、ItemKind.Cookie になります。

<InputRadioGroup Name="product" @bind-Value="em.Product">
    <InputRadio Name="product" Value="@ItemKind.Cookie" id="r01"/><label for="r01">ぺんぎんクッキー</label><br/>
    !<-- 中略 -->
</InputRadioGroup>

Submitボタンがクリックされると、mySubmit() メソッドが呼び出されます。メソッド内で編集モデルの Product プロパティの値を確認し、チェックされているラジオボタンに応じたメッセージを画面に表示します。

モデルのインスタンスはIndex.razorのコードブロックの冒頭で作成されます。 EditForm タグのModel属性でインスタンスオブジェクトを指定し編集フォームにモデルを割り当てています。
モデルには、Product プロパティが実装されており、ラジオボタンのチェック状態がこのプロパティに格納されます。

@code {
  private IndexModel em = new();
  /* 中略 */
}

<EditForm Model="@em" OnSubmit="@mySubmit">

実行結果

上記のアプリケーションを実行します。Webブラウザが起動し、下図のページが表示されます。

[しろくまアイス]のラジオボタンをクリックしてチェックをつけます。

チェック後、[Submit] ボタンをクリックします。ボタンをクリックするとページ下部に「しろくまアイスが選択されました」のメッセージが表示されます。ラジオボタンのどの項目にチェックがついていたかを検出できています。

別の項目([ぺんぎんクッキー])をクリックしてチェック後、[Submit]ボタンをクリックします。ページ下部のメッセージが変化し、現在選択されているラジオボタンのメッセージになります。

InputRadioGroup, InputRadio コンポーネントを利用してラジオボタンを実装できました。

著者

Penta

iPentecのメインプログラマー
C#, ASP.NET の開発がメイン、少し前まではDelphiを愛用

目次

InputRadioGroup, InputRadio コンポーネントを利用してBlazorアプリケーションでラジオボタンを実装する

概要

プログラム

コード

解説

実行結果

関連するページ