チェックボックスに値を設定する

この例では送信ボタンをクリックすると、１つ目のチェックボックス(みかん)はチェック状態になり、2つ目のチェックボックス(バナナ)は非チェック状態になります。

CheckBoxSetValue.cshtml.cs

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

namespace WorkStandard.Pages.controls
{
    public class CheckBoxSetValueModel : PageModel
    {
        [BindProperty]
        [DisplayName("みかん")]
        public bool IsMikan { get; set; }

        [BindProperty]
        [DisplayName("バナナ")]
        public bool IsBanana { get; set; } = true; //バナナは初期値を チェック状態 にします。

        public void OnPost()
        {
            System.Diagnostics.Debug.WriteLineIf(IsMikan, "みかんは チェック状態 です。");
            System.Diagnostics.Debug.WriteLineIf(IsBanana, "バナナは チェック状態 です。");

            //みかんをチェック状態、バナナを非チェック状態にします。
            ModelState.Remove(nameof(IsMikan));
            ModelState.Remove(nameof(IsBanana));

            IsMikan = true;
            IsBanana = false;
        }
    }
}

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

CheckBoxSetValue.cshtml

@page
@model WorkStandard.Pages.controls.CheckBoxSetValueModel

<form method="post">
    <div class="mb-3 form-check">
        <input asp-for="IsMikan" class="form-check-input" />
        <label asp-for="IsMikan" class="form-check-label"></label>
    </div>
    <div class="mb-3 form-check">
        <input asp-for="IsBanana" class="form-check-input" />
        <label asp-for="IsBanana" class="form-check-label"></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の外観にして、主要な機能であることを示します。→ ボタン