Blazor Serverアプリケーション

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

1. Visual Studio 2026を開きます。

2. 空の「Blazor Server アプリ」を選択し、［次へ］をクリックします。

3. プロジェクト名を入力し、［作成］をクリックします。

4. 次のパッケージをプロジェクトに追加します。

   MESCIUS.ActiveReports.Aspnetcore.Designer.jaMESCIUS.ActiveReports.Blazor.Designer.ja

5. プロジェクトフォルダ内に［Resources］フォルダを作成します。

6. Resourcesフォルダには、レポートを配置します。

7. レポートの［ビルドアクション］プロパティが「埋め込みリソース」に設定されていることを確認します。

8. 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. アプリケーションを実行します。