ActiveReports for .NET 18.0J
Blazor Serverアプリケーション
ActiveReportsユーザーガイド > レポートの表示 > Blazorデザイナの使用 > Blazor Serverアプリケーション

このトピックでは、Blazor ServerアプリケーションにBlazorデザイナコンポーネントを追加する方法を紹介します。

  1. Visual Studio 2022を開きます。
  2. 空の「Blazor Server アプリ」を選択し、[次へ]をクリックします。
  3. プロジェクト名を入力し、[作成]をクリックします。
  4. 次のパッケージをプロジェクトに追加します。
        MESCIUS.ActiveReports.Aspnetcore.Designer.ja
        MESCIUS.ActiveReports.Blazor.Designer.ja
  5. プロジェクトフォルダ内に[Resources]フォルダを作成します。
  6. Resourcesフォルダには、レポートを配置します。
  7. レポートの[ビルドアクション]プロパティが「埋め込みリソース」に設定されていることを確認します。
  8. Program.csページの内容を次のように変更します。
    Program.cs
    コードのコピー
    using GrapeCity.ActiveReports.Aspnetcore.Designer;
    var resourcesRootDirectory = new DirectoryInfo(".\\resources\\");
    var builder = WebApplication.CreateBuilder(args);
    builder.Services.AddRazorPages();
    builder.Services.AddServerSideBlazor();
    builder.Services
         .AddReportDesigner()
         .AddMvc(options => options.EnableEndpointRouting = false)
         .AddJsonOptions(options => options.JsonSerializerOptions.PropertyNamingPolicy =
    null);
    var app = builder.Build();
    if (!app.Environment.IsDevelopment())
    {
        // HSTSの既定値は30日です。本番シナリオでは変更することをお勧めします。詳細については、「https://aka.ms/aspnetcore-hsts」を参照してください。
        app.UseHsts();
    }
    app.UseHttpsRedirection();
    app.UseReportDesigner(config => config.UseFileStore(resourcesRootDirectory, false));
    app.UseStaticFiles();
    app.UseRouting();
    app.MapBlazorHub();
    app.MapFallbackToPage("/_Host");
    app.Run();
    
  9. Pages/Index.razorページにBlazorデザイナコンポーネントを追加します。
    コードのコピー
    @page "/"
    @using GrapeCity.ActiveReports.Blazor.Designer;
    @inject IJSRuntime JSRuntime
    <div style="height:100vh;width:100%"
        <ReportDesigner @ref="_designer" Document="@_document" />
    </div>
    @code {
        private ReportDesigner _designer;
        private Document _document = new Document()
          {
                Id = "report.rdlx",
                Type = SupportedDocumentType.cpl
          };
    }
    
  10. アプリケーションを実行します。