Blazor 앱 구조

하려는 것 : UI를 Blazor로 나타내려 함 

 

Razor는 웹 UI를 동적으로 생성하는 데 사용되는 HTML 및 C#을 기반으로 하는 템플릿 지정 언어

imports.razor 파일 : 동일한 폴더와 하위폴더의 다른 .razor파일로가져올 Razor 지시문 세트 정의

일반적으로 사용되는 네임스페이스의 using 지시문 추가하는 기존방법

앱 페이지 경로 할당하여 정의

사용 지시문 - > @page “/counter”

_Host.cshtml : 루트 구성요소 호스트페이지를 정의하는 파일로 Razor 페이지 정의

Program.cs : 앱의 루트 구성 요소 및 해당 구성 요소를 렌더링해야 하는 위치를 정의

 

지시문	설명	예제	해당 Web Forms 항목
@attribute	구성 요소에 클래스 수준 특성 추가	@attribute [Authorize]	없음
@code	구성 요소에 클래스 멤버 추가	@code { ... }	<script runat="server">...</script>
@implements	지정된 인터페이스 구현	@implements IDisposable	코드 숨김 사용
@inherits	지정된 기본 클래스에서 상속	@inherits MyComponentBase	<%@ Control Inherits="MyUserControlBase" %>
@inject	구성 요소에 서비스 삽입	@inject IJSRuntime JS	없음
@layout	구성 요소의 레이아웃 구성 요소 지정	@layout MainLayout	<%@ Page MasterPageFile="~/Site.Master" %>
@namespace	구성 요소의 네임스페이스 설정	@namespace MyNamespace	없음
@page	구성 요소의 경로 지정	@page "/product/{id}"	<%@ Page %>
@typeparam	구성 요소의 제네릭 형식 매개 변수 지정	@typeparam TItem	코드 숨김 사용
@using	범위에 가져올 네임스페이스 지정	@using MyComponentNamespace	web.config에 네임스페이스 추가

 

구성요소사용

구성요소 네임스페이스 범위로 가져오려면 @using 지시문사용

@using MycomponentLib

Chart - Line Chart 이용 해서 업데이트 현황 나타내기

일단 납품현황 먼저 파이차트

 

blazor 프로젝트 종류 확인법

 

프로젝트명 . csoproj 파일 open

 

Blazor Server App (Razor Components) 프로젝트

• 프로젝트 파일: .csproj 파일에서 <Project Sdk="Microsoft.NET.Sdk.Web">로 시작합니다 <- 내프로젝트 해당
• 특징: Blazor 서버 측 앱으로, 서버에서 UI 상태를 유지하고 브라우저와의 실시간 통신을 지원합니다. Telerik Blazor 컴포넌트는 이 모델에서도 사용 가능하며, Blazor 서버로 전체 앱을 빌드할 수 있습니다.

1. Blazor WebAssembly App 프로젝트:
   • 프로젝트 파일: .csproj 파일에서 <Project Sdk="Microsoft.NET.Sdk.WebAssembly">로 시작
   • 특징: Blazor WebAssembly 앱으로, 클라이언트 측에서 실행되며 브라우저에서 직접 실행됩니다. Telerik Blazor 컴포넌트는 이 모델에서도 사용 가능하며, 브라우저에서 실행되기 때문에 서버 측의 리소스를 덜 사용합니다.
2. Blazor Class Library 프로젝트:
   • 프로젝트 파일: .csproj 파일에서 <Project Sdk="Microsoft.NET.Sdk">로 시작
   • 특징: Blazor 컴포넌트, 페이지 또는 서비스와 같은 Blazor 구성 요소를 포함하는 라이브러리 프로젝트입니다. 이 라이브러리는 다른 Blazor 프로젝트에서 참조되어 공통된 구성 요소 및 로직을 재사용