C# Blazor Radzen Component 사용하기

728x90

C# Blazor Radzen Component 사용하기

Razen Component 는 Balzor 에서 사용할 수 있는 Component 로 70개 이상의
다양한 컨트롤과 기능을 제공합니다.
https://blazor.radzen.com/

Free Blazor Components | 70+ UI controls by Radzen

Accelerated, smarter, and cost-effective Blazor development Radzen Blazor Studio provides tons of productivity gains for Blazor developers Quickly create Blazor pages with familiar WYSIWYG Blazor designer. Scaffold a complete CRUD application from your MSS

blazor.radzen.com

또한 Radzen Studio 도 있어 이를 이용해 마법사 도구를 이용 간단한 페이지 구성도 가능합니다.
아래는 이를 활용하는 방법을 소개합니다.

1. Blazor Test Project 를 구성합니다

2. Radzen.Blazor Nuget Package 를 설치합니다.

3. Global Using 처리

어디에서나 Radzen Component 를 사용할수 있도록 전역에 using 처리를 해줍니다.
_Imports.razor 파일에 아래 항목을 추가합니다.

@using Radzen;
@using Radzen.Blazor;

4. 환경 설정

.NET8 버전 기준으로 Components 폴더 아래의 App.razor 파일에 아래 내용을 추가합니다.

<link rel="stylesheet" href="_content/Radzen.Blazor/css/material-base.css">

다른 테마 기능이나 bootstrap css 기능을 이용하려면 아래 내용도 추가합니다.

<link rel="stylesheet" href="_content/Radzen.Blazor/css/standard-base.css">
<link rel="stylesheet" href="css/bootstrap/bootstrap.min.css">

아래 스크립트도 추가합니다.

<script src="_content/Radzen.Blazor/Radzen.Blazor.js"></script>

전체 App.razor 내용

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <base href="/" />
    <link rel="stylesheet" href="bootstrap/bootstrap.min.css" />
    <link rel="stylesheet" href="app.css" />
    <link rel="stylesheet" href="BlazorApp1.styles.css" />
    <link rel="icon" type="image/png" href="favicon.png" />
    <link rel="stylesheet" href="_content/Radzen.Blazor/css/material-base.css">
    <link rel="stylesheet" href="_content/Radzen.Blazor/css/standard-base.css">
    <link rel="stylesheet" href="css/bootstrap/bootstrap.min.css">
    <HeadOutlet />
</head>

<body>
    <Routes />
    <script src="_framework/blazor.web.js"></script>
    <script src="_content/Radzen.Blazor/Radzen.Blazor.js"></script>
</body>

</html>

참고
https://blazor.radzen.com/get-started

Get Started | Free UI Components by Radzen

1. Install Radzen Blazor Components are distributed as the Radzen.Blazor nuget package. You can add them to your project in one of the following ways Install the package from command line by running dotnet add package Radzen.Blazor Add the project from the

blazor.radzen.com

5. Program.cs 에 내용 추가

아래 내용을 추후에 다룰 예정인데 Radzen 에서 유용하게 사용되는 기능을 미리 처리될 수 있도록 합니다.

builder.Services.AddScoped<DialogService>();
builder.Services.AddScoped<NotificationService>();
builder.Services.AddScoped<TooltipService>();
builder.Services.AddScoped<ContextMenuService>();

6. MainLayout.razor 에 내용 추가

Components > Layout > MainLayout.razor 파일에 아래 내용을 추가합니다.

<RadzenDialog />
<RadzenNotification />
<RadzenContextMenu />
<RadzenTooltip />

전체 코드 내용 (아래처럼 가장 상위의 태그 아래쪽에 위치해야 합니다.)

@inherits LayoutComponentBase

<div class="page">
    <RadzenDialog />
    <RadzenNotification />
    <RadzenContextMenu />
    <RadzenTooltip />

    <div class="sidebar">
        <NavMenu />
    </div>

    <main>
        <div class="top-row px-4">
            <a href="https://learn.microsoft.com/aspnet/core/" target="_blank">About</a>
        </div>

        <article class="content px-4">
            @Body
        </article>
    </main>
</div>

<div id="blazor-error-ui">
    An unhandled error has occurred.
    <a href="" class="reload">Reload</a>
    <a class="dismiss">🗙</a>
</div>

Radzen Component 를 사용할 준비가 되었습니다.
다음 포스팅부터 유용한 컨트롤들을 하나씩 알아보겠습니다.

728x90

저작자표시 비영리 변경금지

'코딩 > Blazor' 카테고리의 다른 글

C# Blazor 에서 js 파일 추가하여 js 파일 내 함수 호출하는 방법 (0)	2024.03.20
C# Blazor RadzenTree 사용하기 (0)	2024.03.12
C# Blazor 기초 - 데이터 바인딩 (0)	2024.03.08
C# Blazor 기초 - 메뉴 추가 (0)	2024.03.08
C# Blazor Page Parameter (0)	2024.03.08