[Blazor] InputText 컴포넌트 및 PlaceHolder 사용

개요

• Blazor 기본 컴포넌트인 InputText 컴포넌트 및 PlaceHolder 사용하는 방법에 대해서 정리 진행합니다.

참고로, HTML 에서 placeholder 속성은 미리 데이터를 입력해 놓는 역할을 의미합니다.

예제코드

• 예제로 Create.razor 컴포넌트를 생성 후, FirstName, LastName 2개의 속성을 입력하여 추가하는 폼을 생성하는 코드입니다.
• 여기서 핵심은 InputText 컴포넌트를 사용하였고, 해당 컴포넌트 안에 placeholder 속성을 추가해 준 것입니다.

@page "/Candidates/Create"
@using BeomBeomJoJoBlazor.Models.Candidates

<PageTitle>Candidate Create</PageTitle>

<h1>Create</h1>

<hr />
<div class="row">
    <div class="col-md-4">
        @if (Model is not null)
        {
            <EditForm Model="@Model">
                <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"/>
                    <span class="text-danger field-validation-valid" data-valmsg-for="FirstName" data-valmsg-replace="true"></span>
                </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"/>
                    <span class="text-danger field-validation-valid" data-valmsg-for="LastName" data-valmsg-replace="true"></span>
                </div>
                <div class="form-group form-check">
                    <label class="form-check-label">
                        <input class="form-check-input" type="checkbox" data-val="true" data-val-required="The IsEnrollment field is required." id="IsEnrollment" name="IsEnrollment" value="true" /> IsEnrollment
                    </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();
    }
}

참고로, Blazor 기본 컴포넌트인 InputText 를 사용하게 되면, DataAnnotationsValidator, ValidationSummary 태그를 통해 유효성 검사를 진행할 때 컴포넌트의 유효성 검사가 자동으로 진행됩니다.

실행 결과

• 다음과 같이 Enter FirstName, Enter LastName 의 placeholder 가 표시되는 것을 확인할 수 있습니다.
• 또한, Required 설정이 된 속성 값의 유효성 검사가 정상적으로 진행되는 것 또한 확인할 수 있습니다.