Razor PageでRadioButtonを動的に配置する - ASP.NET Core

Razor PageでRadioButtonを動的に配置するコードを紹介します。

概要

RazorPagesでラジオボタンの個数やラベルのテキストを動的に配置したい場合があります。
この記事では、RazorPagesでラジオボタンを動的に配置するコードを紹介します。

プログラム例

コード

以下のコードを記述します。

DynamicRadioButton.cshtml

@page
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@model RazorPagesRadioButton.Pages.DynamicRadioButtonModel
@{
}
<html>
<body>
  <p>RadioButton のデモ(動的配置)</p>
  <form method="post">
    @foreach (RazorPagesRadioButton.Pages.DynamicRadioButtonModel.RadioItem i in Model.itemList) {
      <input type="radio" asp-for="RadioButtonSelectItem" id="Radio_@i.id" value="@i.id" />
      <label for="Radio_@i.id">@i.caption</label>
      <br />
    }
    <input type="submit" value="POST" />
  </form>
  <hr />
  <div>@Model.OutMessage</div>
</body>
</html>

DynamicRadioButton.cshtml.cs

using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;

namespace RazorPagesRadioButton.Pages
{
  public class DynamicRadioButtonModel : PageModel
  {
    [BindProperty]
    public int RadioButtonSelectItem { get; set; }

    public string OutMessage { get; set; }

    public class RadioItem
    {
      public int id;
      public string caption;
    }

    public List<RadioItem> itemList = new List<RadioItem>();

    public DynamicRadioButtonModel()
    {
      itemList.Add(new RadioItem() { id = 1, caption = "ぺんぎんクッキー" });
      itemList.Add(new RadioItem() { id = 2, caption = "らくだキャラメル" });
      itemList.Add(new RadioItem() { id = 3, caption = "ふくろうロールケーキ" });
      itemList.Add(new RadioItem() { id = 4, caption = "しろくまアイス" });
      itemList.Add(new RadioItem() { id = 5, caption = "かるがもサブレ" });
    }

    public void OnGet()
    {
    }

    public void OnPost()
    {
      OutMessage = string.Format("{0:d}が選択されました", RadioButtonSelectItem);
    }

  }
}

Program.cs

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

app.UseRouting();
app.MapRazorPages();
app.Run();

解説

ラジオボタンのIDとラベル文字列を保持するクラスを定義します。

  public class RadioItem
  {
    public int id;
    public string caption;
  }

  public List<RadioItem> itemList = new List<RadioItem>();

選択されたラジオボタンの値を格納するプロパティを定義します。

  [BindProperty]
  public int RadioButtonSelectItem { get; set; }

ページモデルクラスのコンストラクタで、ラジオボタンの情報を作成します。今回は5つの要素を作成します。

    public DynamicRadioButtonModel()
    {
      itemList.Add(new RadioItem() { id = 1, caption = "ぺんぎんクッキー" });
      itemList.Add(new RadioItem() { id = 2, caption = "らくだキャラメル" });
      itemList.Add(new RadioItem() { id = 3, caption = "ふくろうロールケーキ" });
      itemList.Add(new RadioItem() { id = 4, caption = "しろくまアイス" });
      itemList.Add(new RadioItem() { id = 5, caption = "かるがもサブレ" });
    }

ラジオボタンのRazor Page への配置はforeachループで実装します。

    @foreach (RazorPagesRadioButton.Pages.DynamicRadioButtonModel.RadioItem i in Model.itemList) {
      <input type="radio" asp-for="RadioButtonSelectItem" id="Radio_@i.id" value="@i.id" />
      <label for="Radio_@i.id">@i.caption</label>
      <br />
    }