Razor Pages でRadioButton を利用する - ASP.NET Core

Razor Pages でRadioButton を利用するコードを紹介します。

概要

Razor PagesにRadioButtonを配置し、選択したRadioButtonの値を取得します。

プログラム例

コード

以下のコードを作成します。

StaticRadioButton.cshtml

@page
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@model RazorPagesRadioButton.Pages.StaticRadioButtonModel
@{
}
<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>

StaticRadioButton.cshtml.cs

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

namespace RazorPagesRadioButton.Pages
{
  public class StaticRadioButtonModel : 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();

解説

Razor PagesのRadioButtonコードが以下になります。
POST時に値を代入するページモデルのプロパティをasp-for属性に指定します。 POST時に選択されている RadioButtonの valueの値がasp-for属性に設定した、RadioButtonItemプロパティに設定されます。

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

ページモデルクラスでは、Radio Buttonのasp-for属性で指定しているRadioButtonItem プロパティを宣言します。[BindProperty]属性を設定しています。

    [BindProperty]
    public string RadioButtonItem { get; set; }

ページモデルクラスのPostメソッドは以下のコードとします。POST時に選択されているRadioButtonの値をページに表示する動作です。

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

実行結果

プロジェクトを実行し、(アプリケーションルート)/StaticRadioButton のURLにアクセスします。下図のページが表示されます。

ラジオボタン、またはラジオボタン右側のラベルをクリックしてラジオボタンにチェックをつけます。

[POST]ボタンをクリックします。下図のページ表示に切り替わります。[かるがもサブレ]のRadioButtonに設定されているvalueの値 "Duck Sable" の文字列ページの下部に表示されます。

[ふくろうキャンディ]のRadioButtonをチェックして[POST]ボタンをクリックした場合の結果です。 [ふくろうキャンディ]のRadioButtonに設定されているvalueの値 "Owl Candy" の文字列がページの下部に表示されます。

[ぺんぎんクッキー]のRadioButtonをチェックして[POST]ボタンをクリックした場合の結果です。 [ぺんぎんクッキー]のRadioButtonに設定されているvalueの値 "Penguin Cookie" の文字列がページの下部に表示されます。

デフォルトの選択を設定する場合

デフォルトの選択を設定する場合には、input タグに checked 属性を記述する方法と asp-for 属性のプロパティに選択したい値を代入する方法があります。

checked 属性を記述する

Razor Pagesのinputタグにchecked="checked"を追記します。

@page
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@model RazorPagesRadioButton.Pages.StaticRadioButtonDefaultCheckModel
@{
}
<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" checked="checked"/><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番目のRadioButtonがチェックされた状態になります。

asp-for 属性のプロパティに値を設定する

RadioButtonのasp-for 属性のプロパティに選択したいRadioButtonのvalueの値を代入します。

コード

Razor Pageを作成し、以下のコードを記述します。

StaticRadioButtonDefaultCheck.cshtml

@page
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@model RazorPagesRadioButton.Pages.StaticRadioButtonDefaultCheckModel
@{
}
<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>

StaticRadioButtonDefaultCheck.cshtml.cs

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

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

    public string OutMessage { get; set; }

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

解説

ページ表示時に、RadioButtonItem プロパティに "Penguin Cookie"を代入します。この処理により[ぺんぎんクッキー]のラジオボタンがデフォルトで選択された状態になります。

    public void OnGet()
    {
      RadioButtonItem = "Penguin Cookie";
    }

実行結果

プロジェクトを実行しページを表示します。1番目の[ぺんぎんクッキー]のRadioButtonがチェックされた状態になります。

RadioButtonのデフォルトの選択を設定できました。

著者

Penta

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

目次

Razor Pages でRadioButton を利用する - ASP.NET Core

概要

プログラム例

コード

解説

実行結果

デフォルトの選択を設定する場合

checked 属性を記述する

asp-for 属性のプロパティに値を設定する

コード

解説

実行結果

関連するページ