'2022/10/29 글 목록

2022/10/29 (3)

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

웹 프로그래밍/Blazor 범범조조 2022. 10. 29. 16:32

개요 Blazor 기본 컴포넌트인 InputText 컴포넌트 및 PlaceHolder 사용하는 방법에 대해서 정리 진행합니다. 참고로, HTML 에서 placeholder 속성은 미리 데이터를 입력해 놓는 역할을 의미합니다. 예제코드 예제로 Create.razor 컴포넌트를 생성 후, FirstName, LastName 2개의 속성을 입력하여 추가하는 폼을 생성하는 코드입니다. 여기서 핵심은 InputText 컴포넌트를 사용하였고, 해당 컴포넌트 안에 placeholder 속성을 추가해 준 것입니다. @page "/Candidates/Create" @using BeomBeomJoJoBlazor.Models.Candidates Candidate Create Create @if (Model is not nu..

[Blazor] 유효성 검사

웹 프로그래밍/Blazor 범범조조 2022. 10. 29. 04:28

## Blazor - 유효성 검사 게요 Blazor 에서는 DataAnnotationValidator, ValidatorSummary 태그를 통해서 유효성 검사를 진행할 수 있습니다. Candidate 모델 클래스를 생성 후, Candidate 지원자를 등록하는 EditForm 을 하나 생성 후, 유효성 검사 진행이 되는지 확인 진행하는 테스트 코드를 작성 진행합니다. Candidate 모델 클래스 public class CandidateBase { public int Id { get; set; } [Required] // 필수 입력 요소 [StringLength(50)] public string? FirstName { get; set; } [Required] [StringLength(50)] publi..

[Blazor] List 컴포넌트 만들기

웹 프로그래밍/Blazor 범범조조 2022. 10. 29. 00:51

개요 Blazor 에서 기본이 되는 List 컴포넌트 만드는 방법에 대해서 정리 진행합니다. 사전에 미리 EFCore 를 통해 Seed 데이터를 넣은 상태이고, Candidate 테이블을 미리 Migration 하였고 해당 데이터를 가져와 List 컴포넌트 만드는 방법에 대해서 정리합니다. Candidates.razor 미리 Candidates.zazor 파일을 생성하였습니다. 해당 파일에는 Candidates 데이터를 테이블로 표시하도록 하는 코드를 작성하였습니다. 참고로, Candidate 데이터는 CandidateAppDbContext 를 @inject 문을 통해 서비스를 주입 받고록 하였습니다. 전체 코드는 다음과 같습니다. @page "/Candidates" @page "/Candidates/I..

1

Sidebar

Copyright © BeomBeomJoJo All Rights Reserved

Designed by JB FACTORY

티스토리툴바