Blazor Framework란? (개발자를 위한 작동 원리 튜토리얼)

홈 구성 요소

측면 메뉴에서 Counter를 클릭합니다. 버튼을 클릭하면 페이지를 변경하거나 다시 로드하지 않고도 카운터가 증가하는 것을 볼 수 있습니다. 웹 애플리케이션에서 카운터를 동적으로 증가시키는 것은 일반적으로 JavaScript가 필요하지만 Blazor를 사용하면 C#을 사용하여 이를 달성할 수 있습니다. 이것이 ASP.NET 개발자들이 Blazor를 좋아하는 이유입니다. .NET 개발자가 웹 앱을 빠르고 쉽게 구축할 수 있도록 도와줍니다.

카운터 구성 요소

우리는 우리의 솔루션의 Pages 폴더에 위치한 Counter.razor 파일에서 Counter 구성 요소의 코드를 볼 수 있습니다.

@page "/counter"
<h1>Counter</h1>
<p>Current count: @currentCount</p>
<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>
@code {
    private int currentCount = 0;

    // This method increments the counter value when the button is clicked
    private void IncrementCount()
    {
        currentCount++;
    }
}

브라우저에서 /counter에 대한 요청은 상단의 @page 지시에 따라 Counter 구성 요소가 콘텐츠를 렌더링하게 합니다.

각각의 Click me 버튼이 선택될 때마다:

• onclick 이벤트가 실행됩니다.
• IncrementCount 메소드가 호출됩니다.
• currentCount가 증가합니다.
• 구성 요소는 업데이트된 카운트를 보여주기 위해 렌더링됩니다.

각 .razor 파일은 재사용 가능한 UI 구성 요소를 정의합니다.

Visual Studio에서 Index.razor 파일을 엽니다. Index.razor 파일은 이미 존재합니다. 왜냐하면 프로젝트를 생성할 때 생성되었기 때문입니다. 이것은 이전에 생성된 BlazorApp 디렉토리의 Pages 폴더 내에 위치해 있습니다.

Fetch 구성 요소

다른 구성 요소로는 'Fetch 구성 요소'가 있습니다. 이 구성 요소도 백엔드 서버 측 개발에 사용되는 서비스를 주입합니다. 이 코드를 URL에서 PDF를 생성하는 것으로 교체하여 Blazor 웹 개발의 강력함을 더 잘 이해해 봅시다.

IronPDF NuGet Install-Package

일반적인 ASP.NET Core 애플리케이션과 유사하게 Blazor WebAssembly 앱에서도 IronPDF NuGet 패키지를 설치할 수 있습니다.

NuGet 패키지 관리자 콘솔을 열고 다음 명령을 작성하십시오:

Install-Package IronPdf

아래와 같이 라이브러리가 설치될 것입니다.

FetchData.razor 파일에서 모든 기존 코드를 제거하고 다음 코드 샘플을 추가하십시오:

@page "/fetchdata"

@using myBlazorAPP.Data
@inject WeatherForecastService ForecastService

<h1>Generate PDF FROM URL</h1>
<p>This component demonstrates generating PDF from URL using IronPDF in Blazor Application</p>
<input type="text" @bind="URL" placeholder="URL HERE..."/>
<button @onclick="GeneratePDF">Generate PDF</button>

@code {
    private string URL { get; set; }

    // This method calls the service to generate a PDF document from a given URL
    protected async Task GeneratePDF()
    {
        await ForecastService.GeneratePDFfromURL(URL);
    }
}

위의 코드는 PDF 파일을 생성하기 위한 클라이언트 측 Blazor 코드입니다. 버튼 하나와 입력 상자 하나를 정의합니다. 입력 필드는 URL 변수에 바인딩되어 있습니다.

이제 우리의 앱을 위한 서버 측 코드를 작성합시다.

WeatherForecastService.cs 파일을 열고 모든 기존 코드를 다음 코드 스니펫으로 교체하십시오:

using System;
using System.Threading.Tasks;
using IronPdf;

namespace myBlazorAPP.Data
{
    public class WeatherForecastService
    {
        // This method generates a PDF file asynchronously from a provided URL
        public async Task GeneratePDFfromURL(string URL)
        {
            ChromePdfRenderer renderer = new ChromePdfRenderer();
            var pdfDoc = await renderer.RenderUrlAsPdfAsync(URL);
            pdfDoc.SaveAs(@"myFile.pdf");
        }
    }
}

using System;
using System.Threading.Tasks;
using IronPdf;

namespace myBlazorAPP.Data
{
    public class WeatherForecastService
    {
        // This method generates a PDF file asynchronously from a provided URL
        public async Task GeneratePDFfromURL(string URL)
        {
            ChromePdfRenderer renderer = new ChromePdfRenderer();
            var pdfDoc = await renderer.RenderUrlAsPdfAsync(URL);
            pdfDoc.SaveAs(@"myFile.pdf");
        }
    }
}

Imports System
Imports System.Threading.Tasks
Imports IronPdf

Namespace myBlazorAPP.Data
	Public Class WeatherForecastService
		' This method generates a PDF file asynchronously from a provided URL
		Public Async Function GeneratePDFfromURL(ByVal URL As String) As Task
			Dim renderer As New ChromePdfRenderer()
			Dim pdfDoc = Await renderer.RenderUrlAsPdfAsync(URL)
			pdfDoc.SaveAs("myFile.pdf")
		End Function
	End Class
End Namespace

응용 프로그램을 실행하여 출력을 확인해 봅시다.

입력 상자에 URL을 붙여넣고 PDF 생성 버튼을 클릭하세요. PDF 파일이 생성되며, 파일은 앱 폴더에서 볼 수 있습니다.

아래 표시된 대로 PDF 파일을 엽니다.

우리는 URL에서 코드 세 줄로 PDF를 생성했습니다. 이것이 IronPDF의 강력함입니다.

IronPDF는 Iron Software에서 제공하며, Iron Software의 Iron Suite 제품에 속합니다. 전체 Iron Suite를 구입하여 두 제품의 비용으로 다섯 제품을 구매하여 돈을 절약할 수 있습니다.