Blazor CRUD Material Design

Blazor 컴포넌트 중 인기 있는 MatBlazor를 설치하고 사용하는 법을 간단한 CRUD 예제를 통하여 살펴본다.

사용한 예제는 Thumb IKR - Programming Examples Youtube 강좌이다. Blazor 강좌뿐 아니라 .NET과 관련한 좋은 강좌가 많이 있으므로 전체를 살펴보는 것을 추천한다. MatBlazor는 Form Controls, Navigation, Layout, Button & Indicators, Popups & Modals, Data Table 등으로 전반적인 컨트롤을 제공한다.

참고로 델파이와 닷넷 컴포넌트로 유명한 DevExpress는 Blazor 컴포넌트를 무료로 제공하고 있다(Demo).

기본환경 설정

• Nuget에서 MatBlazor 패키지 추가
• _imports.razor 파일에 @using MatBlazor 선언
• _Host.chtml 파일(상단css, 하단js)에 소스 추가

<link href="_content/MatBlazor/dist/matBlazor.css" rel="stylesheet"/>
<script src="_content/MatBlazor/dist/matBlazor.js"></script>

• Startup.cs 파일의 ConfigureServices 함수에 소스 추가

public void ConfigureServices(IServiceCollection services)
{
    //... 아래에 추가
    services.AddScoped<HttpClient>();
}

• Index.razor 파일 수정(작성)

Read More ···