ASP.NET Core MVC のバリデーションでとりあえずそれっぽい見た目にする
18944 ワード
ASP.NET Core MVC で、フォームの入力値検証でそれっぽい見た目だけをとりあえず作るメモ。
以下のようなクラスがある想定です。
using System.ComponentModel.DataAnnotations;
namespace WebApplication2.Models;
public class Product
{
[Display(Name = "じゃんる")]
[Required(ErrorMessage = "じゃんるを入れてください")]
public string? Genre { get; set; }
[Range(0, 100000, ErrorMessage = "0-100000の間で入れてください")]
[Display(Name = "ねだん")]
public int Price { get; set; }
[Required(ErrorMessage = "たいとるを入れてください")]
[StringLength(20, ErrorMessage = "20 文字以内で入力してください")]
[Display(Name = "たいとる")]
public string? Title { get; set; }
}
この Product クラスを Model プロパティに設定されている状態で以下のようなフォームを定義して
@model Product
@{
ViewData["Title"] = "Home Page";
}
<h2>@ViewData["Title"]</h2>
<form method="post">
<div class="mb-3">
<label asp-for="Genre" class="form-label"></label>
<input asp-for="Genre" class="form-control" />
<div class="invalid-feedback" style="display: block;">
<span asp-validation-for="Genre"></span>
</div>
</div>
<div class="mb-3">
<label asp-for="Price" class="form-label"></label>
<input asp-for="Price" class="form-control" />
<div class="invalid-feedback" style="display: block;">
<span asp-validation-for="Price"></span>
</div>
</div>
<div class="mb-3">
<label asp-for="Title" class="form-label"></label>
<input asp-for="Title" class="form-control" />
<div class="invalid-feedback" style="display: block;">
<span asp-validation-for="Title"></span>
</div>
</div>
<button type="submit" asp-action="Index" class="btn btn-primary">Submit</button>
</form>
css に以下のようなスタイルを追加すると
.input-validation-error {
border-color: red;
}
初期状態はこんな雰囲気になって
入力値の検証エラーがあると以下のように表示されるようになります。
とりあえずそれっぽい見た目が出来た。
Author And Source
この問題について(ASP.NET Core MVC のバリデーションでとりあえずそれっぽい見た目にする), 我々は、より多くの情報をここで見つけました https://zenn.dev/okazuki/articles/aspnetcore-validation-edu著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Collection and Share based on the CC protocol