C# サンプル集 |
Visual Basic 中学校 > C# サンプル集 > C# サンプル集目次 > ASP.NET Core > Razor Pages
必須入力チェック
2024/1/5
この記事は ASP.NET Core Razor Pages を対象にしています。
この記事内のサンプルは、プロジェクトテンプレート「ASP.NET Core Web アプリ」を使用して、PagesフォルダーにこのRazorページを追加する前提です。
入力しないとエラーメッセージを表示する
この例では商品名または金額に何も入力しないで送信ボタンをクリックするとエラーメッセージを表示します。
RequiredValidation.cshtml.cs
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;
using System.ComponentModel;
using System.ComponentModel.DataAnnotations;
namespace WorkStandard.Pages.validation
{
public class RequiredValidationModel : PageModel
{
[BindProperty]
[DisplayName("商品名")]
[Required(ErrorMessage = "{0}は省略できません。")]
public string? productName { get; set; }
[BindProperty]
[DisplayName("金額")]
[Required(ErrorMessage = "{0}には数値を入力してください。")]
public int price { get; set; }
public void OnPost()
{
//サーバー側での入力検証の判定
if (!ModelState.IsValid)
{
return;
}
System.Diagnostics.Debug.WriteLine($"エラーなし。{productName} {price}");
}
}
}
RequiredValidation.cshtml
@page
@model WorkStandard.Pages.validation.RequiredValidationModel
<form method="post" >
<div class="mb-3">
<label asp-for="productName"></label>
<input asp-for="productName" class="form-control" />
<span asp-validation-for="productName" class="text-danger"></span>
</div>
<div class="mb-3">
<label asp-for="price"></label>
<input asp-for="price" class="form-control" />
<span asp-validation-for="price" class="text-danger"></span>
</div>
<div>
<input type="submit" class="btn btn-primary" />
</div>
</form>
@section Scripts {
@{
//クライアント側での検証を有効にします。
await Html.RenderPartialAsync("_ValidationScriptsPartial");
}
}
メモ:この例のようにサーバー側での入力検証の判定は必ず行って下さい。悪意のあるユーザーはクライアント側での検証を簡単に回避してサーバーを攻撃します。
主なCSSクラスの効果
- mb-3 下に少し余白(margin)を設けます。→ 余白
- form-control inputをBootstrapの外観にします。→ Bootstrapのフォームの概要
- text-danger 文字を赤くして、危険であることを示します。→ テーマカラー
- btn btn-primary ボタンをBootstrapの外観にして、主要な機能であることを示します。→ ボタン