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を構成する

DotNetify を構成するには、Startup.cs を開き、ConfigureServices および Configure メソッドを使用します。

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");
        });
    }
}

ビューモデルを作成する

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

using DotNetify;

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

using DotNetify;

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

ビューモデルを登録する

ViewModel を登録する前に、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>();
            });
}

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");
        });
    }
}

ビューモデルを作成する

プロジェクトに新しいクラスファイルを追加し(例：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));
    }
}

新しいコンポーネントを追加して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アプリケーションは応答しやすく魅力的なユーザー体験を提供します。