[Blazor] EditForm에 OnValidSubmit event 사용하기

개요

• Blazor 에서 Create 폼을 EditForm, InputText 등의 컴포넌트 등을 이용하여 구상을 했었습니다.
• 또한, 사전에 EFCore 에 테스트를 진행할 Candidate 모델 클래스에 데이터 마이그레이션까지 완료 해 놓았습니다.
• 그럼 실제로 데이터 Create(생성) 이 되도록 하기 위해서는 생성 관련 이벤트가 필요합니다.
• Blazor 에서는 기존적으로 EditForm 컴포넌트에서 OnValidSubmit 이벤트를 제공해 주고 있습니다.
• 해당 이벤트를 이용하여 EFCore DBContext 에 값을 직접 저장시켜서 List Componet 에 표시 되는지 확인 진행합니다.

EditForm 컴포넌트에 OnValidSubmit 이벤트 사용

• EditForm 컴포넌트에 OnValidSubmit 이벤트를 사용하는 방법은 다음과 같습니다.
• Model 속성은 실제 모델이 되는 대상 Model을 넣어주고, OnvalidSubmit 이벤트 속성에는 FromSubmit 이름을 가진 메서드를 써 주었습니다.

<EditForm Model="@Model" OnValidSubmit="FormSubmit">

• FormSubmit 메서드는 다음과 같습니다.

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

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

    protected async Task FormSubmit()
    {
        if(Model is not null)
        {
            Model.Age = 0;

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

• FormSubmit 메서드는 CandidateDbContext 객체를 통해 현재 DB에 저장되어 있는 Candidate 정보를 가져와 Blazor IputText 에서 입력된 값을 Model 객체에 바인딩 하여 최종적으로 DB에 값을 저장하는 메서드 입니다.

전체 코드

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

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

<PageTitle>Candidate Create</PageTitle>

<h1>Create</h1>

<hr />
<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" />
                </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; }

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

    protected async Task FormSubmit()
    {
        if(Model is not null)
        {
            Model.Age = 0;

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

실행 결과

• 실행 결과, 값이 정상적으로 저장되는 것을 확인할 수 있습니다.