'2022/10/30 글 목록

2022/10/30 (4)

[Blazor] EditForm OnInvalidSubmit 속성 사용하기

웹 프로그래밍/Blazor 범범조조 2022. 10. 30. 22:38

개요 Blazor 에서 제공해주는 기본 컴포넌트인 EditForm 을 이용하여 현재 Create 폼을 생성했습니다. 여기서 EditForm 컴포넌트를 사용하였는데, EditForm 컴포넌트에서 제공하는 OnInvalidSubmit 속성에 대해서 정리 진행합니다. EditForm 유효성 검사 속성 EditFrom 은 양식 제출을 처리하기 위해 다음 콜백을 제공합니다. OnValidSubmit 은 유효한 필드가 있는 양식이 제출될 때 실행할 이벤트 처리기를 할당하는 데 사용합니다. OnInvalidSubmit 은 유효하지 않은 필드가 있는 양식이 제출될 때 실행할 이벤트 처리기를 할당하는데 사용합니다. OnSubmit 은 양식 필드의 유효성 검사 상태와 관계없이 실행할 이벤트 처리기를 할당하는데 사용합니다...

[Blazor] Text 중복 입력 방지

웹 프로그래밍/Blazor 범범조조 2022. 10. 30. 14:37

개요 Blazor 에서 Create 폼을 생성 후, Button 클릭을 하였을 때 데이터 중복 입력을 방지하기 위한 방법에 대해서 정리 진행합니다. 중복 입력 방지 기능 코드를 사용하지 않으면, 실수로 같은 이름의 데이터가 여러번 중복으로 저장될 수 있기 때문에 해당 기능을 미연에 방지하고자 중복 입력 방지코드를 추가하는 것이 좋습니다. Busy 속성 추가 C# 비하인드 코드에 Busy 속성을 추가 합니다. Default 값으로 Busy 속성을 true 로 설정해 주고, 메서드 본연의 역할이 끝나면 finally 에 Busy 값을 false 로 바꿔주는 로직을 추가하였습니다. @code { public Candidate? Model { get; set; } public string? StatusMessa..

[Blazor] EditForm에 OnValidSubmit event 사용하기

웹 프로그래밍/Blazor 범범조조 2022. 10. 30. 04:35

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

[Blazor] ValidationMessage 컴포넌트 사용하여 유효성 검사 방법

웹 프로그래밍/Blazor 범범조조 2022. 10. 30. 00:34

개요 Blazor 에서는 InputText 컴포넌트의 입력 값의 속성을 주어 해당 속성에 따라 유효성 검사를 진행할 수 있습니다. 앞서, ValidationSummary 태그를 이용하여 유효성 검사를 진행했었습니다. 이번에는 ValidationMessage 컴포넌트를 사용하여 유효성 검사 메시지를 같이 출력 되도록 하는 방법에 대해서 정리 진행합니다. 예제 코드 아래 예제 코드에서 핵심은 입니다. 현재 ValidationMessage 컴포넌트는 FirstName, LstName InputText 컴포넌트 구역에 같이 있습니다. 때문에, 같은 영역에서 유효서 검사가 진행되면서 내용이 함께 출력됩니다. @page "/Candidates/Create" @using BeomBeomJoJoBlazor.Models..

1

Sidebar

Copyright © BeomBeomJoJo All Rights Reserved

Designed by JB FACTORY

티스토리툴바