'웹 프로그래밍/Blazor' 카테고리의 글 목록 (3 Page)

웹 프로그래밍/Blazor (48)

[Blazor] 상태 관리 라이브러리

웹 프로그래밍/Blazor 범범조조 2022. 11. 9. 20:51

종류 Blazor 에서 상태를 관리해주는 라이브러리 종류는 다음과 같습니다. Fluxor (https://github.com/mrpmorris/Fluxor) ★792 Blazor-state (https://github.com/TimeWarpEngineering/blazor-state) ★361 Cortex.Net (https://github.com/jspuij/Cortex.Net) ★66 BlazorWithRedux (https://github.com/christoment/BlazorWithRedux) ★31 BlazorRealm (https://github.com/dworthen/BlazorRealm) ★12 rudder (https://github.com/kjeske/rudder) ★18 MSDN |..

[Blazor] 페이저 버튼 구현

웹 프로그래밍/Blazor 범범조조 2022. 11. 8. 21:49

개요 Blazor 에서 페이저 버튼 구현하는 방법에 대해서 정리 진행합니다. Blazor 코드 Blazor 에서 페이저 버튼을 구현하기 위해 부트스트랩 pagination CSS 클래스를 이용하여 표현 할 수 있습니다. 코드는 다음과 같습니다. 다음 코드에서는 Prev, Next 버튼을 추가 하였고, 해당 버튼 사이에는 Page 개수를 함께 표시 되도록 하였습니다. 또한, 현재 클릭된 페이지만 Button 이 활성화 되도록 하는 부분도 추가 되어 있습니다. 보다 자세한 내용은 https://getbootstrap.com/docs/4.0/components/pagination/ 에서 확인할 수 있습니다. Prev @for (int i = 0; i < PageCount; i++) { @(i+1) } Next..

[Blazor] 동적 페이지 개수 구하기

웹 프로그래밍/Blazor 범범조조 2022. 11. 6. 17:20

개요 Blazor 에서 동적으로 페이지 개수(PageCount) 구하는 방법에 대해서 정리 진행합니다. 시나리오 현재 데이터베이스에서 Candidates 테이블에 총 9개의 Record 가 저장되어 있다고 가정합니다. 여기서 저는 한 페이지당, 3개의 데이터(PageSize = 3)를 보여준다고 하면 PageCount 는 3개의 데이터씩 총 9개의 Record 가 기록되어 있으니 PageCount 는 3이 됩니다. 여기서 만약, 소수로 떨어진다면 소수 값 그 이상의 값으로 무조건 반올림을 해 주어야지 정수 값으로 표현이 가능합니다. 위 시나리오 대로 동적으로 페이지 개수를 구하는 방법에 대한 로직을 작성 진행합니다. 동적 페이지 개수 구하는 로직 동적으로 페이지를 구하기 위한 C# 로직은 다음과 같습니다..

[Blazor] - 특정 페이지 ReDirection

웹 프로그래밍/Blazor 범범조조 2022. 11. 6. 12:19

개요 Blazor 에서 페이지를 생성 후, 페이지 ReDirection 을 할 수 있습니다. 예를 들어, 전체 보여주고자 하는 페이지는 현재 3페이지라고 가정 하였을 때 1, 2, 3 총 3개의 페이지가 있습니다. 여기서 첫 페이지는 1페이지고, 마지막 페이지는 3페이지 입니다. 그럼, 첫 페이지에서는 무조건 1페이지가 Default 로 보여지도록 ReDirection 하는 기능을 추가하고, 만약 사용자가 마지막 페이지 그 이상의 값으로 URL 값을 지정하게 되면 무조건 마지막 페이지인 3페이지가 ReDirection 되도록 하는 예제 코드를 작성해 봅니다. Blazor ReDirection 방법 Blazor 에서 ReDirection 하는 방법 중 하나는 NavigationManager 클래스를 이용하..

[Blazor] PagIndex 속성 추가 및 Skip 과 Take 메서드로 페이징 처리

웹 프로그래밍/Blazor 범범조조 2022. 11. 6. 11:17

개요 Blazor 에서 페이징 처리하는 방법에 대해서 정리 진행합니다. 예제 코드로 작성한 페이지 기법은 List 항목에서 표시되는 데이터 사이즈를 지정하고, 해당 사이즈가 넘어갈 시, 다음 페이지에 보여지도록 예제 코드 작성하였습니다. 페이징 라우팅 추가 제일 먼저, @page 라우팅 값으로 페이징 인덱스 값을 추가하였습니다. {Page:int?} 값을 통해 정수형의 Page 값으로 라우팅 되도록 속성 추가하였습니다. @page "/Candidates/{Page:int?}" 페이징 관련 로직 추가 그럼 실제로 페이징 관련 로직을 추가하겠습니다. 크게 PageSize, Page, PageIndex 3개의 속성을 추가하였습니다. 여기서 Page 속성 같은 경우에는 Attribute 로 Parameter 속..

[Blazor] 재사용 컴포넌트 만들기

웹 프로그래밍/Blazor 범범조조 2022. 11. 2. 20:25

개요 Blazor 에서 재사용 가능한 컴포넌트 만드는 방법에 대해서 정리 진행합니다. 테스트 예제 내용 Creater.razor 컴포넌트가 있고, 해당 컴포넌트에서는 현재 EditForm 컴포넌트를 사용한 코드가 있습니다. 예시로, EditForm 컴포넌트를 다른 컴포넌트에서도 재사용 가능하다고 가정을 하였을 때, 해당 부분을 따로 컴포넌트로 만들어서 부모 컴포넌트에서 사용 가능하도록 하는 예제 코드를 작성해 봅니다. 재사용 진행할 컴포넌트 코드 재사용 진행할 컴포넌트 코드 내용은 다음과 같습니다. @if (Model is not null) { FirstName LastName Is Enrollment } 위 코드는 부모 컴포넌트인 Create.razor 에서 사용중입니다. 해당 코드를 다른 컴포넌트에서..

[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..

[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..

1
2
3
4

Sidebar

Copyright © BeomBeomJoJo All Rights Reserved

Designed by JB FACTORY

티스토리툴바