[Blazor] Text 중복 입력 방지

개요

• Blazor 에서 Create 폼을 생성 후, Button 클릭을 하였을 때 데이터 중복 입력을 방지하기 위한 방법에 대해서 정리 진행합니다.
• 중복 입력 방지 기능 코드를 사용하지 않으면, 실수로 같은 이름의 데이터가 여러번 중복으로 저장될 수 있기 때문에 해당 기능을 미연에 방지하고자 중복 입력 방지코드를 추가하는 것이 좋습니다.

Busy 속성 추가

• C# 비하인드 코드에 Busy 속성을 추가 합니다.
• Default 값으로 Busy 속성을 true 로 설정해 주고, 메서드 본연의 역할이 끝나면 finally 에 Busy 값을 false 로 바꿔주는 로직을 추가하였습니다.

@code {
    public Candidate? Model { get; set; }

    public string? StatusMessage { get; set; }

    public bool Busy { get; set; }

    protected override void OnInitialized()
    {
        Model = new();
    }

    protected async Task FormSubmit()
    {
        // 중복 저장 방지
        if(Busy)
            return;

        Busy = true;

        try
        {
            if (Model is not null)
            {
                Model.Age = 0;

                using (var context = _ContextFactory.CreateDbContext())
                {
                    context.Candidates.Add(Model);
                    await context.SaveChangesAsync();

                    Model = new();
                }

                StatusMessage = "Success";
            }
        }
        catch
        {
            StatusMessage = "Error";
        }
        finally
        {
            Busy = false;
        }
    }
}

• 다음으로, Create 버튼 속성으로 disabled 속성을 추가한 후, 속성 값을 @Busy 값으로 지정해줍니다.
• 그럼, Create 버튼은 Busy 값에 따라 disabled 가 정해집니다.

...
...
<div class="form-group">
    <input type="submit" value="Create" class="btn btn-primary"
        disabled="@Busy"/>
</div>
...
...

전체 코드

• Create.razor 전체 코드는 다음과 같습니다.

@page "/Candidates/Create"
@using BeomBeomJoJoBlazor.Models.Candidates
@using Microsoft.EntityFrameworkCore
@inject IDbContextFactory<CandidateAppDbContext> _ContextFactory

<PageTitle>Candidate Create</PageTitle>

<h1>Create</h1>

<hr />

@if (!String.IsNullOrEmpty(StatusMessage))
{
    var statusMessageClass = StatusMessage.StartsWith("Error") ? "danger" : "sueccess";
    <div class="alert alert-@statusMessageClass alert-dismissible" role="alert">
        <button type="button" class="close" data-dismiss="alert"
        aria-label="Close"><span aria-hidden="true">&times;</span></button>
        @StatusMessage
    </div>
}

<div class="row">
    <div class="col-md-4">
        @if (Model is not null)
        {
            <EditForm Model="@Model" OnValidSubmit="FormSubmit">
                <DataAnnotationsValidator />
                <ValidationSummary />
                <div class="form-group">
                    <label class="control-label" for="FirstName">FirstName</label>
                    <InputText @bind-Value="Model.FirstName" id="firstname" class="form-control" placeholder="Enter FirstName" />
                    <ValidationMessage For="() => Model.FirstName" />
                </div>
                <div class="form-group">
                    <label class="control-label" for="LastName">LastName</label>
                    <InputText @bind-Value="Model.LastName" id="lastname" class="form-control" placeholder="Enter LastName" />
                    <ValidationMessage For="() => Model.LastName" />
                </div>
                <div class="form-group form-check">
                    <label class="form-check-label" for="IsEnrollment">
                        <InputCheckbox @bind-Value="Model.IsEnrollment" id="IsEnrollment" class="form-check-input" />
                        Is Enrollment
                    </label>
                </div>
                <div class="form-group">
                    <input type="submit" value="Create" class="btn btn-primary"
                        disabled="@Busy"/>
                </div>

                <input name="IsEnrollment" type="hidden" value="false" />
            </EditForm>
        }
    </div>
</div>

<div>
    <a href="/Candidates">Back to List</a>
</div>

@code {
    public Candidate? Model { get; set; }

    public string? StatusMessage { get; set; }

    public bool Busy { get; set; }

    protected override void OnInitialized()
    {
        Model = new();
    }

    protected async Task FormSubmit()
    {
        // 중복 저장 방지
        if(Busy)
            return;

        Busy = true;

        try
        {
            if (Model is not null)
            {
                Model.Age = 0;

                using (var context = _ContextFactory.CreateDbContext())
                {
                    context.Candidates.Add(Model);
                    await context.SaveChangesAsync();

                    Model = new();
                }

                StatusMessage = "Success";
            }
        }
        catch
        {
            StatusMessage = "Error";
        }
        finally
        {
            Busy = false;
        }
    }
}

실행 결과

• 실제 Balzor App 을 실행 후, Create 버튼이 Disable 되는지 확인 하였습니다.
• 테스트를 위하여, await Task.Delay(3000); 코드를 FormSubmit() 메서드에 추가하고 테스트 진행하였습니다.
• 실행 결과, 지원자 정보를 입력 후 Create 버튼을 클릭하게 되면 버튼이 Disable 되는 것을 확인할 수 있습니다.
• 해당 기능을 통해 중복 입력을 방지할 수 있습니다.