C# サンプル集

ラジオボタン

2024/3/29

この記事は ASP.NET Core Razor Pages を対象にしています。

この記事内のサンプルは、プロジェクトテンプレート「ASP.NET Core Web アプリ」を使用して、PagesフォルダーにこのRazorページを追加する前提です。

ラジオボタン
横並びのラジオボタン
複数のラジオボタンのグループ

ラジオボタン

RadioButton.cshtml.cs

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

namespace WorkStandard.Pages.controls
{
    public class RadioButtonModel : PageModel
    {
        [BindProperty]
        public string? Nengo { get; set; } = "平成"; //初期状態で 平成 を選択します。
        public string[] NengoItems = new[] {"明治", "大正", "昭和", "平成", "令和"};

        public void OnPost()
        {
            System.Diagnostics.Debug.WriteLine($"年号は {Nengo}");
        }
    }
}

→ Debug.WriteLineが表示される場所

RadioButton.cshtml

@page
@model WorkStandard.Pages.controls.RadioButtonModel

<form method="post">

    @foreach (string item in Model.NengoItems)
    {
        string id = nameof(Model.Nengo) + item;
        <div class="mb-3 form-check">
            <input asp-for="Nengo" type="radio" class="form-check-input" value="@item" id="@id" />
            <label for="@id" class="form-check-label">@item</label>
        </div>
    }

    <div>
        <input type="submit" class="btn btn-primary" />
    </div>
</form>

主なCSSクラスの効果

mb-3 下に少し余白(margin)を設けます。→ 余白
form-check form-check-input inputをBootstrapのラジオボタンの外観にします。→ ラジオボタン
form-check form-check-label labelをBootstrapのラジオボタンのスラベルの外観にします。→ ラジオボタン
btn btn-primary ボタンをBootstrapの外観にして、主要な機能であることを示します。→ ボタン

横並びのラジオボタン

RadioButton.cshtml.cs

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

namespace WorkStandard.Pages.controls
{
    public class RadioButtonModel : PageModel
    {
        [BindProperty]
        public string? Nengo { get; set; } = "平成"; //初期状態で 平成 を選択します。
        public string[] NengoItems = new[] {"明治", "大正", "昭和", "平成", "令和"};

        public void OnPost()
        {
            System.Diagnostics.Debug.WriteLine($"年号は {Nengo}");
        }
    }
}

→ Debug.WriteLineが表示される場所

RadioButton.cshtml

@page
@model WorkStandard.Pages.controls.RadioButtonModel

<form method="post">

    @foreach (string item in Model.NengoItems)
    {
        string id = nameof(Model.Nengo) + item;
        <div class="mb-3 form-check-inline">
            <input asp-for="Nengo" type="radio" class="form-check-input" value="@item" id="@id" />
            <label for="@id" class="form-check-label">@item</label>
        </div>
    }

    <div>
        <input type="submit" class="btn btn-primary" />
    </div>
</form>

主なCSSクラスの効果

mb-3 下に少し余白(margin)を設けます。→ 余白
form-check-inline form-check-input inputをBootstrapの横並びラジオボタンの外観にします。→ 横並びチェックボックス
form-check-inline form-check-label labelをBootstrapのラジオボタンの外観にします。→ ラジオボタン
btn btn-primary ボタンをBootstrapの外観にして、主要な機能であることを示します。→ ボタン

複数のラジオボタンのグループ

RadioButtonGroups.cshtml.cs

using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;
using System.ComponentModel.DataAnnotations;

namespace WorkStandard.Pages.controls
{
    public class RadioButtonGroupsModel : PageModel
    {
        [BindProperty]
        public string? Nengo { get; set; } = "平成"; //初期状態で 平成 を選択します。
        public string[] NengoItems = new[] { "明治", "大正", "昭和", "平成", "令和" };

        [BindProperty]
        [Required(ErrorMessage = "性別は省略できません。")]
        public string? Gender { get; set; }
        public string[] GenderItems = new[] { "男", "女", "その他" };

        public void OnPost()
        {
            if (!ModelState.IsValid)
            {
                return;
            }

            System.Diagnostics.Debug.WriteLine($"年号は {Nengo}, 性別は{Gender}");
        }
    }
}

→ Debug.WriteLineが表示される場所

RadioButtonGroups.cshtml

@page
@model WorkStandard.Pages.controls.RadioButtonGroupsModel

<form method="post">

    @* 年号 *@
    <fieldset>
        <legend class="col-form-label">出生時の年号を選択してください。</legend>
        @foreach (string item in Model.NengoItems)
        {
            string id = nameof(Model.Nengo) + item;
            <div class="mb-3 form-check-inline">
                <input asp-for="Nengo" type="radio" class="form-check-input" value="@item" id="@id" />
                <label for="@id" class="form-check-label">@item</label>
            </div>
        }
    </fieldset>

    @* 性別 *@
    <fieldset>
        <legend class="col-form-label">現在の性別を選択してください。</legend>
        @foreach (string item in Model.GenderItems)
        {
            string id = nameof(Model.Gender) + item;
            <div class="mb-3 form-check-inline">
                <input asp-for="Gender" type="radio" class="form-check-input" value="@item" id="@id" />
                <label for="@id" class="form-check-label">@item</label>
            </div>
        }
        <div>
            <span asp-validation-for="Gender" class="text-danger"></span>
        </div>
    </fieldset>

    <div>
        <input type="submit" class="btn btn-primary" />
    </div>
</form>

@section Scripts {
    @{
        //クライアント側での検証を有効にします。
        await Html.RenderPartialAsync("_ValidationScriptsPartial");
    }
}

メモ：asp-for で同じ変数を指定しているものが同じラジオボタンのグループになります。asp-for の代わりに HTML の name属性を自分で指定してもグループ化できます。

メモ：Html.RenderPartialAsyncを呼び出すと入力チェックをクライアント側でも行うことができます。この例の場合、性別の省略チェックです。サーバー側にもチェックロジックを入れているので、クライアント側チェックは必須ではありません。

主なCSSクラスの効果

mb-3 下に少し余白(margin)を設けます。→ 余白
form-check-inline form-check-input inputをBootstrapの横並びラジオボタンの外観にします。→ 横並びチェックボックス
form-check-inline form-check-label labelをBootstrapのラジオボタンの外観にします。→ ラジオボタン
text-danger 文字を赤くして、危険であることを示します。→ テーマカラー
btn btn-primary ボタンをBootstrapの外観にして、主要な機能であることを示します。→ ボタン

English