C# サンプル集

チェックボックス

2024/3/26

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

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

チェックボックス
横並びのチェックボックス
チェックしない場合エラーにする
動的に複数のチェックボックスを生成する(チェックボックスリスト)

チェックボックス

CheckBox.cshtml.cs

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

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

        [BindProperty]
        [DisplayName("バナナ")]
        public bool IsBanana { get; set; } = true;

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

            if (IsMikan)
            {
                System.Diagnostics.Debug.WriteLine("みかんが選択されています。");
            }

            if (IsBanana)
            {
                System.Diagnostics.Debug.WriteLine("バナナが選択されています。");
            }
        }
    }
}

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

CheckBox.cshtml

@page
@model WorkStandard.Pages.controls.CheckBoxModel

<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の外観にして、主要な機能であることを示します。→ ボタン

横並びのチェックボックス

CheckBoxInline.cshtml.cs

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

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

        [BindProperty]
        [DisplayName("バナナ")]
        public bool IsBanana { get; set; } = true;

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

            if (IsMikan)
            {
                System.Diagnostics.Debug.WriteLine("みかんが選択されています。");
            }

            if (IsBanana)
            {
                System.Diagnostics.Debug.WriteLine("バナナが選択されています。");
            }
        }
    }
}

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

CheckBoxInline.cshtml

@page
@model WorkStandard.Pages.controls.CheckBoxInlineModel

<form method="post">
    <div class="mb-3 form-check-inline">
        <input asp-for="IsMikan" class="form-check-input" />
        <label asp-for="IsMikan" class="form-check-label"></label>
    </div>
    <div class="mb-3 form-check-inline">
        <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-inline form-check-input inputをBootstrapの横並びチェックボックスの外観にします。→ 横並びチェックボックス
form-check-inline form-check-label labelをBootstrapのチェックボックスラベルの外観にします。→ チェックボックス
btn btn-primary ボタンをBootstrapの外観にして、主要な機能であることを示します。→ ボタン

チェックしない場合エラーにする

CheckBoxRequired.cshtml.cs

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

namespace WorkStandard.Pages.controls
{
    public class CheckBoxRequiredModel : PageModel
    {
        [BindProperty]
        [DisplayName("利用規約に同意します。")]
        [AllowedValues(true, ErrorMessage = "先に進むには利用規約に同意してください。")]
        public bool IsKakuninOK { get; set; }

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

            System.Diagnostics.Debug.WriteLine($"チェックされています。{IsKakuninOK}");
        }
    }
}

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

CheckBoxRequired.cshtml

@page
@model WorkStandard.Pages.controls.CheckBoxRequiredModel

<form method="post">
    <div class="mb-3">
        <div class="form-check">
            <input asp-for="IsKakuninOK" class="form-check-input" />
            <label asp-for="IsKakuninOK" class="form-check-label"></label>
        </div>
        <div>
            <span asp-validation-for="IsKakuninOK" class="text-danger"></span>
        </div>
    </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のチェックボックスラベルの外観にします。→ チェックボックス
text-danger 文字を赤くして、危険であることを示します。→ テーマカラー
btn btn-primary ボタンをBootstrapの外観にして、主要な機能であることを示します。→ ボタン

動的に複数のチェックボックスを生成する(チェックボックスリスト)

CheckBoxList.cshtml.cs

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

namespace WorkStandard.Pages.controls
{
    public class CheckBoxListModel : PageModel
    {
        //このListの内容を画面上でチェックボックスにします。
        public List<string> SourceItems { get; set; } = new List<string>();

        //BindPropertyの効果で、チェックされた項目はここに格納されます。
        [BindProperty]
        public List<string> checkBoxItems { get; set; } = new List<string>();

        private void LoadList()
        {
            SourceItems = new List<string>
                {"北海道", "東北","関東","中部","関西","中国","四国","九州","沖縄" };
        }

        public void OnGet()
        {
            LoadList();
        }

        public void OnPost()
        {
            LoadList();

            foreach(string checkedItem in checkBoxItems)
            {
                System.Diagnostics.Debug.WriteLine($"{checkedItem} は選択されました。");
            } 
        }
    }
}

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

CheckBoxList.cshtml

@page
@model WorkStandard.Pages.controls.CheckBoxListModel

<form method="post">
    <div class="mb-3">
        @for (var i = 0; i < Model.SourceItems.Count; i++)
        {
            string item = Model.SourceItems[i];
            bool selected = Model.checkBoxItems.Contains(item);

            <div class="form-check">
                <input type="checkbox" name="checkBoxItems" id="check{@i}"
                       class="form-check-input" value="@item" checked="@selected" />
                <label for="check{@i}" class="form-check-label">@item</label>
            </div>
        }
    </div>
    <div>
        <input type="submit" class="btn btn-primary" />
    </div>
</form>

メモ：div の class を form-check から form-check-inline に変更すると横並びになります。

主なCSSクラスの効果

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

English Version