環境
| OS | macOS Catalina 10.15.3 |
| ターゲットフレームワーク | .NET Core 3.1 |
| 開発環境 | Visual Studio Community 2019 for Mac (Version 8.5) |
| プロジェクト種別 | Blazor Server |
準備
※プロジェクトの作成手順はここでは省略します。
フォーム用のモデルクラスの作成
Formの各Input項目にバインドする為のモデルクラスを作成します。
今回は「SampleModel」というクラス名で作成しました。
using System;
using System.ComponentModel.DataAnnotations;
namespace SampleBlazorServer.Data
{
public class SampleModel
{
[Required]
[StringLength(10, ErrorMessage = "氏名は10文字以内にしてください")]
public string Name { get; set; }
}
}Pages/Index.razorを編集
Index.razorにEditFormを記載します。
@page "/"
@using SampleBlazorServer.Data
<h1>Form Test</h1>
<EditForm Model="@model" OnValidSubmit="HandleValidSubmit">
<DataAnnotationsValidator />
<ValidationSummary />
<InputText @bind-Value="model.Name" placeholder="Name" />
<ValidationMessage For="@(() => model.Name)" />
<button type="submit">Submit</button>
</EditForm>
@code {
private SampleModel model = new SampleModel();
private void HandleValidSubmit()
{
Console.WriteLine(model.Name);
}
}「DataAnnotationsValidator」を追加すると、モデルクラスにバインドされているInput項目のバリデーションチェックをSubmitのタイミングで行ってくれます。
「ValidationSummary」にはバリデーションチェックでNGだった項目のエラーメッセージが表示されます。ちなみにエラーメッセージはモデルクラスのアノテーションで設定したものになります。
複数項目でエラーだった場合には、全てのエラーメッセージが表示されます。
「ValidationMessage」にはForで指定したInput項目のみのエラーメッセージが表示されます。
「OnValidSubmit」はバリデーションチェックでOKだった場合にのみ、呼び出されます。
実行
プロジェクトを実行します。すると以下のような画面が表示されました。
Input項目に10文字を超える値を入力し、Submitボタンを押してみます。
すると、以下のようなメッセージが表示されました。
ちなみに上記の画面の時のHTMLは以下のようになっているようです。
<form>
<!--!-->
<!--!-->
<!--!-->
<!--!-->
<!--!-->
<ul class="validation-errors">
<li class="validation-message">氏名は10文字以内にしてください</li>
</ul>
<!--!-->
<!--!-->
<input placeholder="Name" class="modified invalid">
<!--!-->
<!--!-->
<div class="validation-message">氏名は10文字以内にしてください</div>
<!--!-->
<!--!-->
<button type="submit">Submit</button>
</form>次にInput項目の値を10文字にし、Submitし直してみます。すると以下のようにエラーメッセージが消えました。
HTMLは以下のように自動で変更されていました。
<form>
<!--!-->
<!--!-->
<!--!-->
<!--!-->
<!--!-->
<!--!-->
<!--!-->
<input placeholder="Name" class="modified valid">
<!--!-->
<!--!-->
<!--!-->
<!--!-->
<button type="submit">Submit</button>
</form>最後にVisual Studioの出力にはちゃんと入力情報が出力されていました。
1234567890Blazorを使えば本当に簡単にシングルページアプリケーションが作れそうですね 🙂
