C# サンプル集 |
Visual Basic 中学校 > C# サンプル集 > C# サンプル集目次 > ASP.NET Core > Razor Pages
チェックボックスに値を設定する
2024/4/7
この記事は ASP.NET Core Razor Pages を対象にしています。
この記事内のサンプルは、プロジェクトテンプレート「ASP.NET Core Web アプリ」を使用して、PagesフォルダーにこのRazorページを追加する前提です。
チェックボックスを チェック状態 または 非チェック状態にする
この例では送信ボタンをクリックすると、1つ目のチェックボックス(みかん)はチェック状態になり、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;
}
}
}
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クラスの効果