ASP.NET Core Blazor WebAssiembly-데이터 바인딩의 토대 [프런트엔드 개발자 대상]

안녕하세요!나는 고견이다.
이 글은 ASP.NET Core Blazor(이하 Blazor라고 약칭) 데이터 귀속의 기초를 소개합니다!

데이터 바인딩이란

데이터 귀속(데이터 귀속, 데이터 결합)은 데이터와 대상을 결합시켜 데이터나 대상의 변경을 암시적으로 다른 변경에 반영하는 구조이다.
ASP.NET Core Blazer 데이터 바인딩

Blazor의 주요 목적은 시야층(HTML/CSS)과 비즈니스 논리(C#)의 데이터 동기화이다

Blazor에서는 주로 시야각(HTML/CSS) 및 비즈니스 로직인 C#의 데이터와 동기화하는 데 사용됩니다.

흔한 예: 입력된 창의 값을 C#와 동기화하기

일반적으로 사용되는 스키마는 입력 창의 값을 C#과 동기화하는 스키마입니다.
예를 들어 개인 정보를 등록해야 하는 시스템에서
① 이름, 생년월일, 주소 등 화면 항목의 내용을 C#와 동기화
② C#에서 데이터를 등록하기 위해 입력한 내용을 백엔드로 전송
등 방안의 상기 ① 데이터 귀속 기능을 사용하여 실현한다.

견본

샘플 코드와 동작 샘플(애니메이션)은 아래에 기재되어 있습니다.
(액션 샘플)
입력 내용의 동기화를 확인하기 위해 오른쪽에 확인 폼을 설정하였습니다.

그러면 샘플 코드를 바탕으로 데이터 귀속을 설명합니다.
EntryPage.razor

<EditForm Model="@people">

    <!-- 姓 -->
    <p>
        <label class="entry-label">
            姓
        </label>
        <div class="entry-input">
            <InputText @bind-Value="people.LastName"></InputText>
        </div>
    </p>

    <!-- 名  -->
    <p>
        <label class="entry-label">
            名
        </label>
        <div class="entry-input">
            <InputText @bind-Value="people.FirstName"></InputText>
        </div>
    </p>


    <!-- 生年月日 -->
    <p>
        <label class="entry-label">
            生年月日
        </label>
        <div class="entry-input">
            <InputDate @bind-Value="people.Birthday"></InputDate>
        </div>
    </p>

    <!-- 郵便番号  -->
    <p>
        <label class="entry-label">
            郵便番号
        </label>
        <div class="entry-input">
            <InputText @bind-Value="people.ZipCode"></InputText>
        </div>
    </p>


    <!-- 住所  -->
    <p>
        <label class="entry-label">
            住所
        </label>
        <div class="entry-input">
            <InputText @bind-Value="people.Address"></InputText>
        </div>
    </p>

    <!-- 電話番号  -->
    <p>
        <label class="entry-label">
            電話番号
        </label>
        <div class="entry-input">
            <InputText @bind-Value="people.Phone"></InputText>
        </div>
    </p>

    <!-- メールアドレス  -->
    <p>
        <label class="entry-label">
            メールアドレス
        </label>
        <div class="entry-input">
            <InputText @bind-Value="people.Email"></InputText>
        </div>
    </p>

</EditForm>

PeopleModel.cs

    public class PeopleModel
    {
        public string LastName { get; set; }

        public string FirstName { get; set; }

        public DateTime Birthday { get; set; }

        public string ZipCode { get; set; }

        public string Address { get; set; }

        public string Phone { get; set; }

        public string Email { get; set; }

    }

@bind 속성

@bind - 속성 이름을 기재하여 구성 요소 속성과 데이터 귀속을 할 수 있습니다.
상기 견본 코드에는 각 구성 요소의'Value'속성과 데이터 귀속을 진행하기 위해 @bind-Value 기재되어 있다.
예를 들어 주소의 입력 값을 C# 측면의 PeopleModel 데이터 클래스의 주소(Address) 속성과 데이터로 연결하기 위해 다음과 같다.

<InputText @bind-Value="people.Address"></InputText>

EditForm 어셈블리

EditForm은 입력 창을 구성하는 데 사용되는 구성 요소입니다.
이 글에는 없지만 입력 검증, 오류 검증 시 메시지 표시 등 입력 창과 관련된 편리한 기능을 지원합니다.
※ 다음 기사에 입력 검증에 관한 기사를 작성할 예정이니 관심 있으면 보세요!

InputeText, InputDate 구성 요소

InputText와 InputDate 구성 요소는 Blazor 표준에서 제공하는 구성 요소입니다.
분별
텍스트 형식 입력
날짜 형식 입력
처리할 수 있다.
삽입식 창 구성 요소

총결산

이 문서에서는 Blazor 애플리케이션의 데이터 바인딩에 대해 설명합니다.
다음 글에서는 입력 검증에 관한 글을 쓸 것입니다.

개발에 대한 모든 문의는 저에게 맡기세요!

일본 내에서는 플랫폼별 특별기술 훈련과 개발을 전반적으로 지원한다.
이어 "구기술과 지원이 끝나는 플랫폼에서 벗어날 필요가 있지만, 목적지를 옮기는 플랫폼과 틀에 대한 검토는 진전이 없고 견해도 없다"고 덧붙였다.
이어 "새로운 개발 기술을 도입하고 싶지만 자사 내에는 전문가가 없다"며 "일본어 자원도 적어 개발을 추진할 수 있을지 모르겠다"고 덧붙였다.
이어 "당사 구성원들은 개발을 추진하려고 하지만 지금까지 외부 공급업체에 의존해 개발해 도구와 기술에 대한 이해가 부족하다"고 덧붙였다.
"UI를 새로 고치고 싶어요. UI 디자인과 UI/UX에 대한 논의 방법을 모르겠어요. 외부 디자인 회사에 의뢰하면 개발이 어렵지 않을까 걱정이에요."
이런 상담을 받다.
문의는 언제든지 문의여기.하십시오.