| C# Sample Programs |
Site Top > C# Sample Programs > C# Sample Programs > ASP.NET Core > Razor Pages
Checkboxes
04/08/2024
This article deals with ASP.NET Core Razor Pages.
All sample programs in this article are based on the Visual Studio Project template "ASP.NET Core Web App" and you must add the Razor pages in th Pages folder.
目次
Checkboxes
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("Mikan")]
public bool IsMikan { get; set; }
[BindProperty]
[DisplayName("Banana")]
public bool IsBanana { get; set; } = true;
public void OnPost()
{
if (!ModelState.IsValid)
{
return;
}
if (IsMikan)
{
System.Diagnostics.Debug.WriteLine("The Mikan is selected.");
}
if (IsBanana)
{
System.Diagnostics.Debug.WriteLine("The Banana is selected.");
}
}
}
}
→ Where Debug.WriteLine appear
Note: Mikans are a delicious fruit of Japan. → Wikipedia
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>
The CSS classes...
Horizontal checkboxes
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("Mikan")]
public bool IsMikan { get; set; }
[BindProperty]
[DisplayName("Banana")]
public bool IsBanana { get; set; } = true;
public void OnPost()
{
if (!ModelState.IsValid)
{
return;
}
if (IsMikan)
{
System.Diagnostics.Debug.WriteLine("The Mikan is selected.");
}
if (IsBanana)
{
System.Diagnostics.Debug.WriteLine("The Banana is selected.");
}
}
}
}
→ Where Debug.WriteLine appear
Note: Mikans are a delicious fruit of Japan. → Wikipedia
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>
The CSS classes...
Raise error if unchecked
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("I agree to the terms and conditions.")]
[AllowedValues(true, ErrorMessage = "Check here to indicate that you have agree.")]
public bool IsCheckOK { get; set; }
public void OnPost()
{
if (!ModelState.IsValid)
{
return;
}
System.Diagnostics.Debug.WriteLine($"Checked {IsCheckOK}");
}
}
}
→ Where Debug.WriteLine appear
CheckBoxRequired.cshtml
@page
@model WorkStandard.Pages.controls.CheckBoxRequiredModel
<form method="post">
<div class="mb-3">
<div class="form-check">
<input asp-for="IsCheckOK" class="form-check-input" />
<label asp-for="IsCheckOK" class="form-check-label"></label>
</div>
<div>
<span asp-validation-for="IsCheckOK" class="text-danger"></span>
</div>
</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. → Checks
- form-check form-check-label Give the label a Bootstrap look.→ Checks
- 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
Generate multiple checkboxes dynamically (Checkbox list)
CheckBoxList.cshtml.cs
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;
using System.ComponentModel;
namespace WorkStandard.Pages.controls
{
public class CheckBoxListModel : PageModel
{
//The items in this list will be appear on the screen.
public List<string> SourceItems { get; set; } = new List<string>();
//With the effect of BindProperty, the checked items are stored here.
[BindProperty]
public List<string> checkBoxItems { get; set; } = new List<string>();
private void LoadList()
{
SourceItems = new List<string>
{"Connecticut", "Maine","Massachusetts","New Hampshire","Rhode Island","Vermont" };
}
public void OnGet()
{
LoadList();
}
public void OnPost()
{
LoadList();
foreach(string checkedItem in checkBoxItems)
{
System.Diagnostics.Debug.WriteLine($"The {checkedItem} is selected.");
}
}
}
}
→ Where Debug.WriteLine appear
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>
Note : You can use form-check-inline instead of form-check at the class of the div to align horizontal.
The CSS classes...