Blazor フレームワークとは何か (開発者向けチュートリアル)

ホームコンポーネント

class="content-img-align-center">

サイドメニューでCounterをクリックします。 ボタンをクリックすると、ページを変更またはリロードせずにカウンターが増加するのがわかります。 Webアプリケーションでカウンターを動的に増加させるには通常JavaScriptが必要ですが、Blazorを使用するとC#でこれを実現できます。 これは、ASP.NETの開発者がBlazorを非常に好む理由です。 それは.NETの開発者が迅速かつ簡単にWebアプリを構築するのを助けます。

カウンターコンポーネント

class="content-img-align-center">

Counterコンポーネントのコードは、私たちのソリューションのPagesフォルダー内のCounter.razorファイルにあります。

@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++;
    }
}

@pageディレクティブで指定されたブラウザ内の/counterへのリクエストは、Counterコンポーネントがそのコンテンツをレンダリングする原因となります。

「Click me」ボタンが選択されるたびに：

• onclickイベントが実行されます。
• IncrementCountメソッドが呼び出されます。
• currentCountが1増加します。
• 更新されたカウントを表示するためにコンポーネントがレンダリングされます。

各.razorファイルは再利用可能なUIコンポーネントを定義します。

Visual StudioでIndex.razorファイルを開きます。 このIndex.razorファイルは、プロジェクトを作成するときに作成されるため、既に存在しています。 それは、以前に作成されたBlazorAppディレクトリ内のPagesフォルダーにあります。

フェッチコンポーネント

「Fetch Component」という名前の別のコンポーネントがあります。 このコンポーネントは、バックエンドサーバー側開発で使用されるサービスも注入します。 Blazor web開発の力をよりよく理解するために、URLからPDFを生成するコードに置き換えてみましょう。

IronPDF NuGetパッケージをインストールする

ノーマルなASP.NET Coreアプリケーションに似て、Blazor WebAssemblyアプリにIronPDF NuGetパッケージをインストールすることもできます。

NuGetパッケージマネージャーコンソールを開いて、次のコマンドを書きます：

Install-Package IronPdf

ライブラリは以下のようにインストールされます。

class="content-img-align-center">

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コードです。 ボタン1つと入力ボックス1つを定義しています。 入力フィールドは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

アプリケーションを実行して、出力を確認しましょう。

class="content-img-align-center">

入力ボックスにURLを貼り付け、PDFを生成をクリックします。 PDFファイルが生成され、アプリフォルダーでファイルを見ることができます。

以下のようにPDFファイルを開きます。

class="content-img-align-center">

URLからのPDF生成を3行のコードで実現しました。 これはIronPDFの力です。

IronPDFはIron Softwareによって提供され、Iron SoftwareのIron Suite Productsの一部です。 フルIron Suiteを取得することにより、2つの製品を購入する費用で5つの製品を節約することができます。