Mudblazor .NET 8 (개발자들에게 어떻게 작동하는가)

.NET 프로젝트에서 MudBlazor 설정하기

.NET Framework가 설치되어 있음을 확인하고, 클라이언트 프로젝트나 서버 프로젝트에서 MudBlazor를 사용합니다. 호스팅 모델에 따라 클라이언트 레이아웃 폴더 또는 서버 레이아웃에서 새로운 Blazor 프로젝트를 만듭니다. 이를 위해 명령줄이나 Visual Studio를 사용합니다. Visual Studio에서 Blazor App 템플릿을 선택합니다.

다음으로, 프로젝트에 MudBlazor를 추가합니다. 터미널 또는 패키지 관리자 콘솔을 열고 다음 명령을 실행합니다:

Install-Package MudBlazor

이 명령은 프로젝트에 MudBlazor를 추가합니다.

MudBlazor를 설치한 후, _Imports.razor로 이동합니다. 다음을 추가합니다:

@using MudBlazor

이렇게 하면 프로젝트에서 MudBlazor 컴포넌트를 사용할 수 있게 됩니다.

wwwroot/index.html (또는 서버 프로젝트의 경우 Host.cshtml)에서 MudBlazor의 CSS와 JS를 같은 파일에 추가하여, 기본 템플릿 설정과 상호작용 렌더 모드를 지원하는지 확인합니다. 다음 줄을 포함합니다:

<link href="_content/MudBlazor/MudBlazor.min.css" rel="stylesheet" />

<link href="_content/MudBlazor/MudBlazor.min.css" rel="stylesheet" />

또한, 다음을 추가합니다:

<script src="_content/MudBlazor/MudBlazor.min.js"></script>

<script src="_content/MudBlazor/MudBlazor.min.js"></script>

이 단계는 앱에서 MudBlazor 스타일과 기능이 작동하도록 보장합니다.

기본 코드 예제: 간단한 MudBlazor 버튼 구축하기

MudBlazor를 실행하는 예시로, 컴포넌트에 간단한 버튼을 추가해 봅시다. Razor 구성 요소 파일을 열고, Index.razor와 같은 파일을 엽니다. 다음 MudBlazor 버튼 코드를 추가합니다:

<MudButton Variant="Variant.Filled" Color="Color.Primary" OnClick="@ButtonClick">
    Click Me
</MudButton>
@code {
    private void ButtonClick()
    {
        Console.WriteLine("Button clicked!");
    }
}

이 코드는 '클릭하세요'라고 표시된 버튼 생성을 시작합니다. 클릭하면 서버 사이드 렌더링을 보여주며 콘솔에 메시지를 기록합니다. Variant 및 Color 속성은 버튼의 외관을 사용자화합니다.

MudBlazor의 대화상자

MudBlazor의 대화상자 컴포넌트는 대화상자를 만들고 관리하는 작업을 단순화합니다. 먼저, 구성 요소에 IDialogService를 주입합니다:

@inject IDialogService DialogService

그런 다음 대화상자를 열기 위해 다음 방법을 사용합니다:

private void OpenDialog()
{
    DialogService.Show<MyDialog>("My Dialog", new DialogParameters { ["Parameter1"] = "Value1" });
}

MyDialog는 대화 상자 내용을 나타내는 Razor 구성 요소입니다. 매개변수를 DialogParameters와 함께 전달할 수 있습니다.

데이터 그리드

MudBlazor는 컬렉션을 표시하기 위한 데이터 그리드 컴포넌트를 제공합니다. 정렬, 페이징 및 필터링을 지원합니다. 사용하려면 Items 속성에 컬렉션을 바인딩합니다:

<MudTable Items="@myItems">
    <HeaderContent>
        <MudTh>Header 1</MudTh>
        <MudTh>Header 2</MudTh>
    </HeaderContent>
    <RowTemplate>
        <MudTd DataLabel="Header 1">@context.Item1</MudTd>
        <MudTd DataLabel="Header 2">@context.Item2</MudTd>
    </RowTemplate>
</MudTable>
@code {
    private List<MyItemType> myItems = /* Fetch or define your items here */;
}

입력 양식

MudBlazor는 양식 입력을 위한 다양한 컴포넌트를 제공합니다. MudTextField를 사용한 예시는 다음과 같습니다:

<MudForm Model="@myModel">
    <MudTextField Label="Enter text" For="@(() => myModel.Text)"></MudTextField>
</MudForm>
@code {
    public class MyModel
    {
        public string Text { get; set; }
    }
    private MyModel myModel = new MyModel();
}

탭

탭으로 콘텐츠를 구성하려면 MudTabs를 사용합니다. 각 탭을 MudTabPanel로 정의합니다:

<MudTabs>
    <MudTabPanel Text="Tab 1">
        Content for Tab 1
    </MudTabPanel>
    <MudTabPanel Text="Tab 2">
        Content for Tab 2
    </MudTabPanel>
</MudTabs>

아이콘

MudBlazor는 Material Icons와 통합됩니다. 아이콘을 사용하려면 MudIcon 구성 요소를 추가합니다:

<MudIcon Icon="@Icons.Material.Filled.Alarm" />

이 코드는 알람 아이콘을 표시합니다. 아이콘은 시각적 신호를 제공하여 사용자 인터페이스를 향상시킵니다.

IronPDF와 C# MudBlazor의 사용 사례

MudBlazor는 반응형 및 대화형 UI를 구축하기 위한 유용한 위젯과 도구로 가득 찬 Blazor용 컴포넌트 라이브러리입니다. MudBlazor의 UI 기능과 IronPDF의 PDF 생성 기능을 결합하면 강력한 도구 세트를 얻을 수 있습니다. 일반적인 사용 사례로는 사용자가 MudBlazor 구성 요소를 사용하여 문서나 보고서를 디자인하고, 버튼 클릭 한 번으로 이 디자인을 IronPDF를 사용하여 다운로드 가능한 PDF로 변환할 수 있는 웹 애플리케이션이 있을 수 있습니다.

사용 사례의 코드 예제

Install-Package MudBlazor
Install-Package IronPdf

Install-Package MudBlazor
Install-Package IronPdf

@page "/report"
<MudText Typo="Typo.h5">Generate PDF Report</MudText>
<MudPaper Class="p-4">
    <MudTextField Label="Enter Report Title" @bind-Value="@reportTitle" />

    <MudButton Variant="Variant.Filled" Color="Color.Primary" OnClick="@GeneratePDF">Generate PDF</MudButton>
</MudPaper>
@code {
    private string reportTitle = "";
}

private void GeneratePDF()
{
    var renderer = new ChromePdfRenderer();
    var PDF = renderer.RenderHtmlAsPdf($"<h1>{reportTitle}</h1><p>More content here...</p>");
    PDF.SaveAs("Report.pdf");
}

private void GeneratePDF()
{
    var renderer = new ChromePdfRenderer();
    var PDF = renderer.RenderHtmlAsPdf($"<h1>{reportTitle}</h1><p>More content here...</p>");
    PDF.SaveAs("Report.pdf");
}

Private Sub GeneratePDF()
	Dim renderer = New ChromePdfRenderer()
	Dim PDF = renderer.RenderHtmlAsPdf($"<h1>{reportTitle}</h1><p>More content here...</p>")
	PDF.SaveAs("Report.pdf")
End Sub