Razor Pagesで複数のグループのラジオボタンを作成する - ASP.NET Core

Razor Pagesで複数のグループのラジオボタンを作成するコードを紹介します。

概要

こちらの記事ではRazorPagesでラジオボタンを利用するコードを紹介しました。画面の構成によっては複数のグループのラジオボタンを利用したい場合があります。この記事では、Razor Pagesで複数のラジオボタンを利用するコードを紹介します。

方針

Razor Pagesではラジオボタンのinputタグのasp-forに設定したプロパティ名称がページ表示時のnameに設定されます。 HTMLでラジオボタンを複数のグループに分ける場合は、nameの値を変えてグループ分けるするため、グループごとにasp-for属性に設定するプロパティを変更すれば、複数のグループに分けられます。

プログラム例

コード

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

RadioButtonMultiGroup.cshtml

@page
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@model RazorPagesRadioButton.Pages.RadioButtonMultiGroupModel
@{
}
<html>
<body>
  <p>RadioButton のデモ(動的配置)</p>
  <form method="post">
    @foreach (RazorPagesRadioButton.Pages.RadioButtonMultiGroupModel.RadioItem i in Model.itemList) {
      <input type="radio" asp-for="RadioButtonGroup1SelectItem" id="Radio_@i.id" value="@i.id" />
      <label for="Radio_@i.id">@i.caption</label>
      <br />
    }
    <hr />
    <input type="radio" id="provision1" asp-for="RadioButtonGroup2SelectItem" value="Shopin" /><label for="provision1">店内</label>
    <input type="radio" id="provision2" asp-for="RadioButtonGroup2SelectItem" value="Takeout" /><label for="provision2">持ち帰り</label>
    <hr />
    <input type="radio" id="place1" asp-for="RadioButtonGroup3SelectItem" value="Tokyo" /><label for="place1">東京</label>
    <input type="radio" id="place2" asp-for="RadioButtonGroup3SelectItem" value="Sapporo" /><label for="place2">札幌</label>
    <input type="radio" id="place3" asp-for="RadioButtonGroup3SelectItem" value="NewYork" /><label for="place3">New York</label>

    <hr />
    <input type="submit" value="POST" />
  </form>
  <hr />
  <div>@Model.OutMessage</div>
</body>
</html>

RadioButtonMultiGroup.cshtml.cs

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

namespace RazorPagesRadioButton.Pages
{
  public class RadioButtonMultiGroupModel : PageModel
  {
    [BindProperty]
    public int RadioButtonGroup1SelectItem { get; set; }
    [BindProperty]
    public string RadioButtonGroup2SelectItem { get; set; }
    [BindProperty]
    public string RadioButtonGroup3SelectItem { get; set; }

    public string OutMessage { get; set; }

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

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

    public RadioButtonMultiGroupModel()
    {
      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} - {1} : {2}が選択されました", RadioButtonGroup1SelectItem, RadioButtonGroup2SelectItem, RadioButtonGroup3SelectItem);
    }

  }
}

Program.cs

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

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