[.NET MAUI] Blazor Login 화면 구성하기

Model 정의
LoginUserModel.cs

using System.ComponentModel.DataAnnotations;

namespace Maui.BlazorAppTest.Models
{
    public class LoginUserModel
    {

        [Required]
        public string Email { get; set; }

        [Required]
        public string Password { get; set; }
    }
}

필드에 Required 를 선언하며 화면에서 Validation 시 필수 체크가 가능해진다. (System.ComponentModel.DataAnnotations)

Login.razor

@page "/"
@using Maui.BlazorAppTest.Models
<h3>Login</h3>

<EditForm Model="@loginUserModel" OnValidSubmit="Submit">
    <DataAnnotationsValidator />
    <div class="form-group">
        <label>Email</label>
        <input type="email" @bind-value="loginUserModel.Email" class="form-control" placeholder="Enter email">
        <ValidationMessage For="@(()=> loginUserModel.Email)" />
    </div>
    <div class="mt-2 form-group">
        <label>Password</label>
        <input type="password" @bind-value="loginUserModel.Password" class="form-control" placeholder="Password">
        <ValidationMessage For="@(()=> loginUserModel.Password)" />
    </div>

    <div class="text-center mt-2">
        <button class="btn btn-primary" type="submit">
            SignIn
        </button>
    </div>
</EditForm>

@code {
    LoginUserModel loginUserModel = new();

     private async void Submit()
    {
        await App.Current.MainPage.DisplayAlert("Sucess", "Login Sucess!", "OK");
        
        this.StateHasChanged();
    }
}

 <DataAnnotationsValidator /> 를 선언하면 앞서 선언한 LoginUserModel 에서 Required 항목들에 대해 필수 체크를 해주며 체크 시점은 OnValidSubmit="Submit" 에 선언한대로 SignIn 버튼을 누르는 시점에 체크하게된다.

체크시 필수 항목에 대한 경고문구는 <ValidationMessage For="@(()=> loginUserModel.Email)" /> 이렇게 처리하면 아래처럼 경고문구가 나타나게된다.

또한 Input 의 type 을 email 로 선언하면 메일 형식에 맞지 않은 경우 아래처럼 경고메세지가 나타난다.

실행화면

소스
https://github.com/kei-soft/KJunBlog/tree/master/Maui.BlazorAppTest

GitHub - kei-soft/KJunBlog