dotnetify.NET（開発者向けの仕組み）

シンプルなプロジェクトを立ち上げてC#オンラインアプリでDotNetifyを構成し始めるための手順です。 このチュートリアルは、ASP.NET CoreとBlazorを使用して基本的なDotNetifyサーバーとクライアントを設定する方法を示します。

新しいASP.NET Core Blazorサーバープロジェクトを設定する

1. Visual Studioを開く: Visual Studioを起動し、プロジェクトを作成します。
2. Blazorサーバーアプリを作成: プロジェクトのテンプレートからBlazorサーバーアプリテンプレートを選んで「次へ」をクリックします。
3. プロジェクトを構成する: プロジェクトに名前を付け（例：「DotNetifyWebApp」）、必要な設定変更を加えます。 「作成」をクリックします。

NuGet経由でDotNetifyをインストール

1. NuGetパッケージを管理: ソリューションエクスプローラーでプロジェクトを右クリックし、「NuGetパッケージを管理」を選択します。
2. DotNetifyを検索: DotNetifyとDotNetify.Blazorパッケージをインストールします。

DotNetifyを構成する

Startup.csを開いて、ConfigureServicesとConfigureメソッドを使用してDotNetifyを構成します。

using DotNetify;
using DotNetify.Blazor;

public class Startup
{
    public void ConfigureServices(IServiceCollection services)
    {
        services.AddRazorPages();
        services.AddServerSideBlazor();
        services.AddSignalR();
        services.AddDotNetify();
    }

    public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
    {
        if (env.IsDevelopment())
        {
            app.UseDeveloperExceptionPage();
        }
        else
        {
            app.UseExceptionHandler("/Error");
            app.UseHsts();
        }

        app.UseHttpsRedirection();
        app.UseStaticFiles();
        app.UseRouting();
        app.UseEndpoints(endpoints =>
        {
            endpoints.MapBlazorHub();
            endpoints.MapFallbackToPage("/_Host");
            endpoints.MapHub<DotNetifyHub>("/dotnetify");
        });
    }
}

using DotNetify;
using DotNetify.Blazor;

public class Startup
{
    public void ConfigureServices(IServiceCollection services)
    {
        services.AddRazorPages();
        services.AddServerSideBlazor();
        services.AddSignalR();
        services.AddDotNetify();
    }

    public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
    {
        if (env.IsDevelopment())
        {
            app.UseDeveloperExceptionPage();
        }
        else
        {
            app.UseExceptionHandler("/Error");
            app.UseHsts();
        }

        app.UseHttpsRedirection();
        app.UseStaticFiles();
        app.UseRouting();
        app.UseEndpoints(endpoints =>
        {
            endpoints.MapBlazorHub();
            endpoints.MapFallbackToPage("/_Host");
            endpoints.MapHub<DotNetifyHub>("/dotnetify");
        });
    }
}

Imports DotNetify
Imports DotNetify.Blazor

Public Class Startup
	Public Sub ConfigureServices(ByVal services As IServiceCollection)
		services.AddRazorPages()
		services.AddServerSideBlazor()
		services.AddSignalR()
		services.AddDotNetify()
	End Sub

	Public Sub Configure(ByVal app As IApplicationBuilder, ByVal env As IWebHostEnvironment)
		If env.IsDevelopment() Then
			app.UseDeveloperExceptionPage()
		Else
			app.UseExceptionHandler("/Error")
			app.UseHsts()
		End If

		app.UseHttpsRedirection()
		app.UseStaticFiles()
		app.UseRouting()
		app.UseEndpoints(Sub(endpoints)
			endpoints.MapBlazorHub()
			endpoints.MapFallbackToPage("/_Host")
			endpoints.MapHub(Of DotNetifyHub)("/dotnetify")
		End Sub)
	End Sub
End Class

ビューモデルを作成する

プロジェクトに新しいクラスファイル（例：HelloWorldViewModel.cs）を作成し、基本的なビューモデルをデザインします。

using DotNetify;

public class HelloWorldViewModel : BaseVM
{
    public string Greetings => "Hello, World!";
}

using DotNetify;

public class HelloWorldViewModel : BaseVM
{
    public string Greetings => "Hello, World!";
}

Imports DotNetify

Public Class HelloWorldViewModel
	Inherits BaseVM

	Public ReadOnly Property Greetings() As String
		Get
			Return "Hello, World!"
		End Get
	End Property
End Class

ビューモデルを登録する

ビューモデルを登録する前に、Program.csを開きます。

using Microsoft.AspNetCore.Hosting;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Hosting;

public class Program
{
    public static void Main(string[] args)
    {
        CreateHostBuilder(args).Build().Run();
    }

    public static IHostBuilder CreateHostBuilder(string[] args) =>
        Host.CreateDefaultBuilder(args)
            .ConfigureWebHostDefaults(webBuilder =>
            {
                webBuilder.UseStartup<Startup>();
            })
            .ConfigureServices(services =>
            {
                services.AddTransient<HelloWorldViewModel>();
            });
}

using Microsoft.AspNetCore.Hosting;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Hosting;

public class Program
{
    public static void Main(string[] args)
    {
        CreateHostBuilder(args).Build().Run();
    }

    public static IHostBuilder CreateHostBuilder(string[] args) =>
        Host.CreateDefaultBuilder(args)
            .ConfigureWebHostDefaults(webBuilder =>
            {
                webBuilder.UseStartup<Startup>();
            })
            .ConfigureServices(services =>
            {
                services.AddTransient<HelloWorldViewModel>();
            });
}

Imports Microsoft.AspNetCore.Hosting
Imports Microsoft.Extensions.DependencyInjection
Imports Microsoft.Extensions.Hosting

Public Class Program
	Public Shared Sub Main(ByVal args() As String)
		CreateHostBuilder(args).Build().Run()
	End Sub

	Public Shared Function CreateHostBuilder(ByVal args() As String) As IHostBuilder
		Return Host.CreateDefaultBuilder(args).ConfigureWebHostDefaults(Sub(webBuilder)
				webBuilder.UseStartup(Of Startup)()
		End Sub).ConfigureServices(Sub(services)
				services.AddTransient(Of HelloWorldViewModel)()
		End Sub})
	End Function

Blazorコンポーネントを作成する

プロジェクトで新しいBlazorコンポーネント（例：HelloWorld.razor）を追加し、ビューモデルに接続します。

@page "/"

@using DotNetify
@using DotNetify.Blazor
@inject IDotNetifyService DotNetify

<h3>@greetings</h3>

@code {
    private string greetings;

    protected override async Task OnInitializedAsync()
    {
        var vm = await DotNetify.ConnectAsync<HelloWorldViewModel>(this);
        greetings = vm.Greetings;
    }
}

• DotNetify、Blazor、Razor Pages、SignalRを利用するようにアプリケーションを設定します。
• DotNetifyとBlazorのエンドポイントおよびルーティングを構成します。
• 挨拶メッセージを返す属性を持つ基本的なビューモデルを説明します。
• HelloWorldViewModelをサービスとして登録します。
• BlazorコンポーネントはHelloWorldViewModelとの接続を確立し、歓迎のテキストを取得し、画面に表示します。

PDFを使った.NETプロジェクトで必要なツールを手に入れるには、IronPDFパッケージをインストールします。

Install-Package IronPdf

DotNetifyをIronPDFと統合する

DotNetifyを構成:

スタートアップ設定: Startup.csを開いて、ConfigureServicesとConfigureメソッドを使用してDotNetifyを構成します。

using DotNetify;
using DotNetify.Blazor;

public class Startup
{
    public void ConfigureServices(IServiceCollection services)
    {
        services.AddRazorPages();
        services.AddServerSideBlazor();
        services.AddSignalR();
        services.AddDotNetify();
    }

    public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
    {
        if (env.IsDevelopment())
        {
            app.UseDeveloperExceptionPage();
        }
        else
        {
            app.UseExceptionHandler("/Error");
            app.UseHsts();
        }

        app.UseHttpsRedirection();
        app.UseStaticFiles();
        app.UseRouting();
        app.UseEndpoints(endpoints =>
        {
            endpoints.MapBlazorHub();
            endpoints.MapFallbackToPage("/_Host");
            endpoints.MapHub<DotNetifyHub>("/dotnetify");
        });
    }
}

using DotNetify;
using DotNetify.Blazor;

public class Startup
{
    public void ConfigureServices(IServiceCollection services)
    {
        services.AddRazorPages();
        services.AddServerSideBlazor();
        services.AddSignalR();
        services.AddDotNetify();
    }

    public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
    {
        if (env.IsDevelopment())
        {
            app.UseDeveloperExceptionPage();
        }
        else
        {
            app.UseExceptionHandler("/Error");
            app.UseHsts();
        }

        app.UseHttpsRedirection();
        app.UseStaticFiles();
        app.UseRouting();
        app.UseEndpoints(endpoints =>
        {
            endpoints.MapBlazorHub();
            endpoints.MapFallbackToPage("/_Host");
            endpoints.MapHub<DotNetifyHub>("/dotnetify");
        });
    }
}

Imports DotNetify
Imports DotNetify.Blazor

Public Class Startup
	Public Sub ConfigureServices(ByVal services As IServiceCollection)
		services.AddRazorPages()
		services.AddServerSideBlazor()
		services.AddSignalR()
		services.AddDotNetify()
	End Sub

	Public Sub Configure(ByVal app As IApplicationBuilder, ByVal env As IWebHostEnvironment)
		If env.IsDevelopment() Then
			app.UseDeveloperExceptionPage()
		Else
			app.UseExceptionHandler("/Error")
			app.UseHsts()
		End If

		app.UseHttpsRedirection()
		app.UseStaticFiles()
		app.UseRouting()
		app.UseEndpoints(Sub(endpoints)
			endpoints.MapBlazorHub()
			endpoints.MapFallbackToPage("/_Host")
			endpoints.MapHub(Of DotNetifyHub)("/dotnetify")
		End Sub)
	End Sub
End Class

ビューモデルを作成する

プロジェクトに新しいクラスファイルを追加し（例：PdfViewModel.cs）、PDFを作成するビューモデルを作成します。

using DotNetify;
using IronPdf;

public class PdfViewModel : BaseVM
{
    public string PdfUrl { get; set; }

    public void GeneratePdf()
    {
        // Create a new PDF renderer instance
        var Renderer = new ChromePdfRenderer();

        // Render HTML as a PDF document
        var PdfDocument = Renderer.RenderHtmlAsPdf("<h1>Hello World!</h1>");

        // Define the output path for saving the PDF
        var OutputPath = "wwwroot/PdfFiles/HelloWorld.pdf";

        // Save the generated PDF document
        PdfDocument.SaveAs(OutputPath);

        // Update the property for the PDF URL
        PdfUrl = "/PdfFiles/HelloWorld.pdf";
        Changed(nameof(PdfUrl));
    }
}

using DotNetify;
using IronPdf;

public class PdfViewModel : BaseVM
{
    public string PdfUrl { get; set; }

    public void GeneratePdf()
    {
        // Create a new PDF renderer instance
        var Renderer = new ChromePdfRenderer();

        // Render HTML as a PDF document
        var PdfDocument = Renderer.RenderHtmlAsPdf("<h1>Hello World!</h1>");

        // Define the output path for saving the PDF
        var OutputPath = "wwwroot/PdfFiles/HelloWorld.pdf";

        // Save the generated PDF document
        PdfDocument.SaveAs(OutputPath);

        // Update the property for the PDF URL
        PdfUrl = "/PdfFiles/HelloWorld.pdf";
        Changed(nameof(PdfUrl));
    }
}

Imports DotNetify
Imports IronPdf

Public Class PdfViewModel
	Inherits BaseVM

	Public Property PdfUrl() As String

	Public Sub GeneratePdf()
		' Create a new PDF renderer instance
		Dim Renderer = New ChromePdfRenderer()

		' Render HTML as a PDF document
		Dim PdfDocument = Renderer.RenderHtmlAsPdf("<h1>Hello World!</h1>")

		' Define the output path for saving the PDF
		Dim OutputPath = "wwwroot/PdfFiles/HelloWorld.pdf"

		' Save the generated PDF document
		PdfDocument.SaveAs(OutputPath)

		' Update the property for the PDF URL
		PdfUrl = "/PdfFiles/HelloWorld.pdf"
		Changed(NameOf(PdfUrl))
	End Sub
End Class

新しいコンポーネントを追加してBlazorコンポーネント（例：GeneratePdf.razor）を作成し、ビューモデルにバインドします。

@page "/"

@using DotNetify
@using DotNetify.Blazor
@inject IDotNetifyService DotNetify

<PageTitle>Generate PDF</PageTitle>
<h3>Generate PDF</h3>

<button @onclick="GeneratePdf">Generate PDF</button>

@if (!string.IsNullOrEmpty(pdfUrl))
{
    <a href="@pdfUrl" target="_blank">Download PDF</a>
}

@code {
    private string pdfUrl;

    protected override async Task OnInitializedAsync()
    {
        var vm = await DotNetify.ConnectAsync<PdfViewModel>(this);
        pdfUrl = vm.PdfUrl;

        vm.PropertyChanged += (sender, args) =>
        {
            if (args.PropertyName == nameof(vm.PdfUrl))
            {
                pdfUrl = vm.PdfUrl;
                StateHasChanged();
            }
        };
    }

    private void GeneratePdf()
    {
        DotNetify.CallMethod("GeneratePdf");
    }
}

C# ASP.NET Core BlazorアプリケーションでDotNetifyとIronPDFを統合することで、リアルタイムデータの処理と動的PDF生成が可能になります。 設定は、Startup.csでサービスを構成することから始まり、サーバーサイドBlazorとリアルタイム機能を有効にするために、Razor Pages、Blazor Server、SignalR、DotNetifyのサービスが登録されます。

PdfViewModel.csでは、IronPDFのPDF生成ロジックが定義されています。 数行のコードでPDFファイルを生成できます。 GeneratePdf関数は、HTMLコンテンツをPDFに変換し、PdfUrlプロパティを更新して、クライアントに新しいファイル位置を通知します。 GeneratePdf.razor Blazorコンポーネントとの通信はこのビューモデルによって処理されます。

コンポーネントはIDotNetifyServiceを介してPdfViewModelに接続し、そのプロパティにバインドし、クライアントがGeneratePdf関数を呼び出し、プロパティの変化に反応できるようにします。 ユーザーが「PDF生成」ボタンをクリックすると、ビューモデルのメソッドが呼び出され、PDFが作成され、ダウンロードURLが動的に更新されます。 この構成により、IronPDFの強力なドキュメント生成機能とDotNetifyのリアルタイムデータ同期を組み合わせることで、Webアプリケーションは応答しやすく魅力的なユーザー体験を提供します。