특정 항목에 대해서 유효성(Validation) 검사하는 방법입니다.먼저 모델을 정의합니다. ExampleModel.cs using System.ComponentModel.DataAnnotations; using Blazor.AppTest.Data; public class ExampleModel { [Required] [StringLength(10, ErrorMessage = "Name is too long.")] public string? Name { get;…
Blazor 에서 Enum 을 Binding 하는 방법입니다. 아래는 Gender 열거형을 Input Select 에 바인딩 하는 방법입니다. public enum Gender { Male, Female, Other } Enum.GetValues()메서드는 구성원 목록을 반환합니다. Foreach루프는 각 열거형 멤버에…
ComboBox , Blazor 에서는 Select List 에 데이터를 바인딩하는 방법에 대해 설명합니다. Department 목록을 바인딩하려고 합니다. 모든 부서 목록을 바인딩하r고 해당 Employee 의 부서도 선택해야 합니다. Blazor input select example <InputSelect id="department"…
Blazor EditForm 사용하는 방법입니다. 표준 HTML 양식과 입력 요소를 사용하여 blazor 양식을 만들 수 있습니다. 그러나 Blazor에는 양식 작성 작업을 훨씬 쉽게 해주는 몇 가지 기본 제공 양식 및 입력…
EventCallBack 을 사용하여 자식 구성 요소에서 부모 구성 요소로 통신하는 방법에 대해 설명합니다 . 이 페이지에는 2개의 blazor Component가 있습니다. EmployeeList Component(상위 Component) DisplayEmployee Component (하위 Component) 이전 포스팅에서는 매개변수를 사용하여…
Blazor의 매개변수를 사용하여 부모 구성 요소에서 자식 구성 요소로 데이터를 전달하는 방법에 대해 설명합니다 Show Footer 체크박스를 체크하면 Card Footer가 표시되어야 하고 체크 해제 시에는 카드 바닥글이 숨겨져야 합니다. 이 페이지에는 2개의…
Blazor two way 데이터 바인딩을 알아보기 위해서 사용자가 텍스트 상자에 입력할 때 입력한 총 문자 수를 표시하는 방법을 알아보겠습니다. Blazor component class 구성 요소 클래스에서 Description 속성을 만듭니다 . 속성을 빈 문자열로…
Blazor의 단방향 데이터 바인딩 Blazor의 양방향 데이터 바인딩 Blazor의 단방향 데이터 바인딩 Binding to a property 다음 예제에서는 구성 요소 클래스에서 구성 요소 뷰로의 단방향 데이터 바인딩이 있습니다. 뷰는 구성 요소 클래스의 Name…
X 및 Y 마우스 좌표 표시 이미지 요소 위로 마우스를 가져가면 X 및 Y 마우스 좌표를 표시하려고 합니다. mousemove 이벤트가 처리됩니다. Mouse_Move 는 이벤트 처리기 메서드입니다. 이벤트 핸들러는 Coordinates 속성 에 마우스 X 및 Y 좌표를 저장합니다 .…
둘 이상의 관련 데이터베이스 테이블에서 데이터를 검색하고 Blazor 웹 애플리케이션에 표시하는 방법에 대해 설명합니다 아래 방식은 애플리케이션의 아키텍처, 복잡성 및 요구 사항에 따라 다릅니다. 다음 직원 세부 정보를 표시합니다. ID…