[Web] 다이얼로그박스 및 유효성 검사

Blazor Web에서 기본적으로 지원하는 Form과 Form에 대한 유효한 값을 확인하는 Validation을 학습하고 정리하였습니다.

· Validation?

입력필드에 대해서 유효성을 검사합니다. 예를 들어 사용자가 회원가입을 할 때 비밀번호를 입력하지 않을 때 경고문을 띄워주고, 이메일 형식을 사용하는 페이지에서 이메일형태가 아닌 아이디만 입력했을 때 알려주는 등의 기능들을 말합니다.

 

· 구현

• Blazor Server App의 기본 예제를 활용하여 구현합니다

 

· WeatherForecast.cs

using System.ComponentModel.DataAnnotations;

namespace Blazor_From_Validation.Data
{
    public class WeatherForecast
    {
        public DateOnly Date { get; set; }

        [Required(ErrorMessage = "Need Temperature!")]
        [Range(typeof(int), "-100", "100")]
        public int TemperatureC { get; set; }

        public int TemperatureF => 32 + (int)(TemperatureC / 0.5556);

		[Required(ErrorMessage = "Need Summary!")]
        [StringLength(10, MinimumLength = 2, ErrorMessage = "Need Length 2 ~ 10")]
   		public string? Summary { get; set; }
    }
}

 

[Required(ErrorMessage = "Need Temperature!")]
[Range(typeof(int), "-100", "100")]
public int TemperatureC { get; set; }

• TemperatureC를 입력폼에서 사용할 때 제약조건을 둡니다.
• Required는 입력폼이 비어있으면 안 된다는 뜻이며, 에러 메시지는 "Need Temperature!"로 볼 수 있습니다.
• Range는 typeof(int) 타입으로 -100 ~ 100 범위여야 한다는 것을 보여줍니다.

 

[Required(ErrorMessage = "Need Summary!")]
[StringLength(10, MinimumLength = 2, ErrorMessage = "Need Length 2 ~ 10")]
public string? Summary { get; set; }

• StringLength는 최대 10, 최소는 2의 범위입니다.

 

· FetchData.razor

@page "/fetchdata"
@using Blazor_From_Validation.Data
@inject WeatherForecastService ForecastService

<PageTitle>Weather forecast</PageTitle>

<h1>Weather forecast</h1>

<p>This component demonstrates fetching data from a service.</p>

@if (_forecasts == null)
{
	<p><em>Loading...</em></p>
}
else
{
	<table class="table">
		<thead>
			<tr>
				<th>Date</th>
				<th>Temp. (C)</th>
				<th>Temp. (F)</th>
				<th>Summary</th>
			</tr>
		</thead>
		<tbody>
			@foreach (var forecast in _forecasts)
			{
				<tr>
					<td>@forecast.Date.ToShortDateString()</td>
					<td>@forecast.TemperatureC</td>
					<td>@forecast.TemperatureF</td>
					<td>@forecast.Summary</td>
				</tr>
			}
		</tbody>
	</table>

	<button class="btn btn-primary" @onclick="AddNewForecast">
		Add New Forcast
	</button>

	if (_showPopup)
	{
		<div class="modal" style="display:block" role="dialog">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header">
						<h3 class="modal-title">Add Forecast</h3>
						<button type="button" class="close" @onclick="ClosePopup">
							<span area-hidden="true">X</span>
						</button>
					</div>
					<div class="modal-body">
						@*_addForecast를 사용하는 타입인 WeatherForecast의 클래스 속성을 사용하여 폼을 구현*@
						<EditForm Model="_addForecast" OnValidSubmit="SaveForecast">

							@*From Validation 기능을 활성화*@
							<DataAnnotationsValidator />

							@*에러가 있으면 메시지 상세 출력 기능활성화*@
							<ValidationSummary />
							
							@*Temp. (C) 입력필드*@
							<label for="TemperatureC">Temp. (C)</label>
							<InputNumber class="form-control" placeholer="TemperatureC" @bind-Value="_addForecast.TemperatureC" />

							@*Summary 입력필드*@
							<label for="Summary">Summary</label>
							<InputText class="form-control" placeholder="Summary" @bind-Value="_addForecast.Summary" />

							<br />

							@*제출 버튼*@
							<button class="btn btn-primary" type="submit">Save</button>
						</EditForm>
					</div>
				</div>
			</div>
		</div>
	}
}

@code {
	private List<WeatherForecast>? _forecasts;

	bool _showPopup = false;
	WeatherForecast _addForecast;

	protected override async Task OnInitializedAsync()
	{
		_forecasts = await ForecastService.GetForecastAsync(DateOnly.FromDateTime(DateTime.Now));
	}

	void AddNewForecast()
	{
		_showPopup = true;
		_addForecast = new WeatherForecast();
	}

	void SaveForecast()
	{
		_addForecast.Date = DateOnly.FromDateTime(DateTime.Now);
		_forecasts.Add(_addForecast);

		ClosePopup();
	}

	void ClosePopup()
	{
		_showPopup = false;
	}
}

 

@*_addForecast를 사용하는 타입인 WeatherForecast의 클래스 속성을 사용하여 폼을 구현*@
<EditForm Model="_addForecast" OnValidSubmit="SaveForecast">

• Blazor에서 지원하는 입력 폼 디자인 및 기능을 사용합니다.
• _addForecast 변수의 클래스인 WeatherForecast을 모델로 사용하여 클래스에서 선언한 제약조건을 사용합니다.
• OnValidSubmit="SaveForecast"은 type="submit"인 이벤트가 호출될 때 SaveForecast() 함수를 호출하도록 합니다.

 

@*From Validation 기능을 활성화*@
<DataAnnotationsValidator />

@*에러가 있으면 메시지 상세 출력 기능활성화*@
<ValidationSummary />

• 각각 Form Validation(값 유효성 검사), ValidationSummary(오류가 있을 경우 오류 내용을 알려줌)으로 이 기능들을 활성화합니다.

 

@*Temp. (C) 입력필드*@
<label for="TemperatureC">Temp. (C)</label>
<InputNumber class="form-control" placeholer="TemperatureC" @bind-Value="_addForecast.TemperatureC" />

• InputNumber 타입을 사용하고 일반적인 입력필드와 비슷하게 입력필드의 값과 _addForecast변수의 TemperatureC멤버변수와 바인딩합니다.

 

@*제출 버튼*@
<button class="btn btn-primary" type="submit">Save</button>

• 제출 버튼이며 type이 "submit"으로 되어있어 OnValidSubmit="SaveForecast"을 호출하도록 바인딩됩니다.

 

· 예시

• 입력필드의 값이 클래스에서 선언한 것대로 조건에 맞지 않으면 위에 빨간색 글씨로 오류내용을 보여주는 것을 볼 수 있습니다.