Radio buttons

RadioButton.cshtml.cs

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

namespace WorkStandard.Pages.controls
{
    public class RadioButtonModel : PageModel
    {
        [BindProperty]
        public string? EraName { get; set; } = "Heisei"; //Heisei is the default selection.
        public string[] EraNameItems = new[] {"Meiji", "Taisho", "Showa", "Heisei", "Reiwa"};

        public void OnPost()
        {
            System.Diagnostics.Debug.WriteLine($"The Selected era name is {EraName}");
        }
    }
}

→ Where Debug.WriteLine appear

Misc: These are Japanese era names. The A.D. 2024 is Reiwa 5. The Heisei switched to Reiwa at 1 May 2019.

RadioButton.cshtml

@page
@model WorkStandard.Pages.controls.RadioButtonModel

<form method="post">

    @foreach (string item in Model.EraNameItems)
    {
        string id = nameof(Model.EraName) + item;
        <div class="mb-3 form-check">
            <input asp-for="EraName" 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>

The CSS classes...

• mb-3 Set little margin at bottom.→ Spacing
• form-check form-check-input Give the input a Bootstrap look. → Radios
• form-check form-check-label Give the label a Bootstrap look.→ Radios
• btn btn-primary Give the button a Bootstrap look to indicate that it's a key feature.→ Buttons

RadioButton.cshtml.cs

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

namespace WorkStandard.Pages.controls
{
    public class RadioButtonModel : PageModel
    {
        [BindProperty]
        public string? EraName { get; set; } = "Heisei"; //Heisei is the default selection.
        public string[] EraNameItems = new[] {"Meiji", "Taisho", "Showa", "Heisei", "Reiwa"};

        public void OnPost()
        {
            System.Diagnostics.Debug.WriteLine($"The Selected era name is {EraName}");
        }
    }
}

→ Where Debug.WriteLine appear

Misc: These are Japanese era names. The A.D. 2024 is Reiwa 5. The Heisei switched to Reiwa at 1 May 2019.

RadioButton.cshtml

@page
@model WorkStandard.Pages.controls.RadioButtonModel

<form method="post">

    @foreach (string item in Model.EraNameItems)
    {
        string id = nameof(Model.EraName) + item;
        <div class="mb-3 form-check-inline">
            <input asp-for="EraName" 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>

The CSS classes...

• mb-3 Set little margin at bottom.→ Spacing
• form-check form-check-input Give the input a Bootstrap look. → Radios
• form-check form-check-label Give the label a Bootstrap look.→ Radios
• btn btn-primary Give the button a Bootstrap look to indicate that it's a key feature.→ Buttons

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? EraName { get; set; } = "Heisei"; //Heisei is the default selection.
        public string[] EraNameItems = new[] { "Meiji", "Taisho", "Showa", "Heisei", "Reiwa" };

        [BindProperty]
        [Required(ErrorMessage = "Gender cannot be omitted.")]
        public string? Gender { get; set; }
        public string[] GenderItems = new[] { "Male", "Female", "Others" };

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

            System.Diagnostics.Debug.WriteLine($"The era name is {EraName}, the gender is {Gender}");
        }
    }
}

→ Where Debug.WriteLine appear

Misc: These are Japanese era names. The A.D. 2024 is Reiwa 5. The Heisei switched to Reiwa at 1 May 2019.

Misc: In japan, there are many input forms to select Japanese era year of birth.I think it is especially common in the bureaucracy. Please check your birth era at here.

RadioButtonGroups.cshtml

@page
@model WorkStandard.Pages.controls.RadioButtonGroupsModel

<form method="post">

    @* Era Name *@
    <fieldset>
        <legend class="col-form-label">Select the year of birth.</legend>
        @foreach (string item in Model.EraNameItems)
        {
            string id = nameof(Model.EraName) + item;
            <div class="mb-3 form-check-inline">
                <input asp-for="EraName" type="radio" class="form-check-input" value="@item" id="@id" />
                <label for="@id" class="form-check-label">@item</label>
            </div>
        }
    </fieldset>

    @* Gender *@
    <fieldset>
        <legend class="col-form-label">Select your current gender.</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 {
    @{
        //Enable client side validation.
        await Html.RenderPartialAsync("_ValidationScriptsPartial");
    }
}

Note: The radio buttons which is specified same variable by asp-for become same group. Alternative way is specifying name attribute of HTML.

Note: You can enable input validation on the client side by calling Html.RenderPartialAsync. In this example, gender is checked at client side. The gender is also checked by server side, so client side check is not mandatory.

The CSS classes...

• mb-3 Set little margin at bottom.→ Spacing
• form-check form-check-input Give the input a Bootstrap look. → Radios
• form-check form-check-label Give the label a Bootstrap look.→ Radios
• text-danger The string become red to indicate danger.→ Theme colors
• btn btn-primary Give the button a Bootstrap look to indicate that it's a key feature.→ Buttons