Razor PageでRadioButtonのinputタグの name属性を設定すると、ラジオボタンが動作しない - ASP.NET Core

Razor PageでRadioButtonのinputタグの name属性を設定すると、ラジオボタンが動作しない現象と対処法を紹介します。

現象の確認

Razor Pagesアプリケーションを作成し、下記のRazor Pagesを作成します。

StaticRadioButtonNotWork.cshtml

@page
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@model RazorPagesRadioButton.Pages.StaticRadioButtonNotWorkModel
@{
}
<html>
<body>
  <p>RadioButton のデモ</p>
  <form method="post">
    <input type="radio" name="group1" asp-for="RadioButtonItem" id="Radio1" value="Penguin Cookie" /><label for="Radio1">ぺんぎんクッキー</label><br />
    <input type="radio" name="group1" asp-for="RadioButtonItem" id="Radio2" value="Duck Sable" /><label for="Radio2">かるがもサブレ</label><br />
    <input type="radio" name="group1" asp-for="RadioButtonItem" id="Radio3" value="Owl Candy" /><label for="Radio3">ふくろうキャンディ</label><br />
    <input type="submit" value="POST" />
  </form>
  <hr />
  <div>@Model.OutMessage</div>
</body>
</html>

StaticRadioButtonNotWork.cshtml.cs

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

namespace RazorPagesRadioButton.Pages
{
  public class StaticRadioButtonNotWorkModel : PageModel
  {
    [BindProperty]
    public string RadioButtonItem { get; set; }

    public string OutMessage { get; set; }

    public void OnGet()
    {
    }

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

Program.cs

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

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

プロジェクトを実行し、ページを表示します。下図のページが表示されます。

ラジオボタンをクリックしてチェックをつけます。

チェック後[POST]ボタンをクリックします。下図の画面に切り替わります。ページにメッセージが表示されますが、選択したラジオボタンの値はページに表示されません。

原因

正しく動作するHTMLと比較します。
正しく動作するプログラムでは、asp-for属性に設定したプロパティ名が name の値に設定されています。一方 name属性をRazorPageに記述した場合は、 asp-for属性に設定したプロパティ名はnameに設定されないため、チェックしたラジオボタンのvalueは、aso-forに設定したプロパティに渡されない動作になってしまいます。

name属性を設定したコードのHTML (正しく動作しない)

<html>
<body>
  <p>RadioButton のデモ</p>
  <form method="post">
    <input type="radio" name="group1" id="Radio1" value="Penguin Cookie" data-val="true" data-val-required="The RadioButtonItem field is required." /><label for="Radio1">ぺんぎんクッキー</label><br />
    <input type="radio" name="group1" id="Radio2" value="Duck Sable" /><label for="Radio2">かるがもサブレ</label><br />
    <input type="radio" name="group1" id="Radio3" value="Owl Candy" /><label for="Radio3">ふくろうキャンディ</label><br />
    <input type="submit" value="POST" />
  <input name="__RequestVerificationToken" type="hidden" value="(トークン値)" /></form>
  <hr />
  <div></div>

<!-- Visual Studio Browser Link -->
<script type="text/javascript" src="/_vs/browserLink" async="async" id="__browserLink_initializationData" data-requestId="1f44d7f04e614b69a91724655b05da73" data-requestMappingFromServer="false" data-connectUrl="http://localhost:51907/7ad2b0219e5f40d39daa1613559da066/browserLink"></script>
<!-- End Browser Link -->

<script src="/_framework/aspnetcore-browser-refresh.js"></script></body>
</html>

name属性を設定しないコードのHTML (正しく動作する)

<html>
<body>
  <p>RadioButton のデモ</p>
  <form method="post">
    <input type="radio" id="Radio1" value="Penguin Cookie" data-val="true" data-val-required="The RadioButtonItem field is required." name="RadioButtonItem" /><label for="Radio1">ぺんぎんクッキー</label><br />
    <input type="radio" id="Radio2" value="Duck Sable" name="RadioButtonItem" /><label for="Radio2">かるがもサブレ</label><br />
    <input type="radio" id="Radio3" value="Owl Candy" name="RadioButtonItem" /><label for="Radio3">ふくろうキャンディ</label><br />
    <input type="submit" value="POST"/>
  <input name="__RequestVerificationToken" type="hidden" value="(トークン値)" /></form>
  <hr/>
  <div></div>

<!-- Visual Studio Browser Link -->
<script type="text/javascript" src="/_vs/browserLink" async="async" id="__browserLink_initializationData" data-requestId="50fdd040ff4a4053b1ecb0e625040938" data-requestMappingFromServer="false" data-connectUrl="http://localhost:51907/7ad2b0219e5f40d39daa1613559da066/browserLink"></script>
<!-- End Browser Link -->

<script src="/_framework/aspnetcore-browser-refresh.js"></script></body>
</html>

対処法1: name属性を記述しない

name属性を記述しない方法です。Razor Pageのコードを以下に変更します。

@page
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@model RazorPagesRadioButton.Pages.StaticRadioButtonNotWorkModel
@{
}
<html>
<body>
  <p>RadioButton のデモ</p>
  <form method="post">
    <input type="radio" asp-for="RadioButtonItem" id="Radio1" value="Penguin Cookie" /><label for="Radio1">ぺんぎんクッキー</label><br />
    <input type="radio" asp-for="RadioButtonItem" id="Radio2" value="Duck Sable" /><label for="Radio2">かるがもサブレ</label><br />
    <input type="radio" asp-for="RadioButtonItem" id="Radio3" value="Owl Candy" /><label for="Radio3">ふくろうキャンディ</label><br />
    <input type="submit" value="POST" />
  </form>
  <hr />
  <div>@Model.OutMessage</div>
</body>
</html>

対処法2: asp-for タグヘルパーを利用せず、name属性にプロパティ名を設定する

別の方法では、asp-for タグヘルパーを利用せず、name属性にページモデルクラスのプロパティ名と同じ名称を設定す方法があります。

@page
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@model RazorPagesRadioButton.Pages.StaticRadioButtonNotWorkModel
@{
}
<html>
<body>
  <p>RadioButton のデモ</p>
  <form method="post">
    <input type="radio" name="RadioButtonItem" id="Radio1" value="Penguin Cookie" /><label for="Radio1">ぺんぎんクッキー</label><br />
    <input type="radio" name="RadioButtonItem" id="Radio2" value="Duck Sable" /><label for="Radio2">かるがもサブレ</label><br />
    <input type="radio" name="RadioButtonItem" id="Radio3" value="Owl Candy" /><label for="Radio3">ふくろうキャンディ</label><br />
    <input type="submit" value="POST" />
  </form>
  <hr />
  <div>@Model.OutMessage</div>
</body>
</html>

著者

Penta

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

目次

Razor PageでRadioButtonのinputタグの name属性を設定すると、ラジオボタンが動作しない - ASP.NET Core

現象の確認

原因

対処法1: name属性を記述しない

対処法2: asp-for タグヘルパーを利用せず、name属性にプロパティ名を設定する

関連するページ