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

 

 

© MESCIUS inc. All rights reserved.