ActiveReportsをBlazor Serverで使用して帳票出力する

.NET帳票コンポーネント「ActiveReports for .NET（アクティブレポート）」の最新バージョン「16.0J」では、新機能としてASP.NET Core Blazor環境で使える帳票ビューワ「Blazorビューワ」が追加され、ASP.NET Core Blazor環境で手軽に帳票の出力ができるようになりました。

Blazorにはサーバーサイドで動作するモデル「Blazor Server」と、クライアントサイドで動作するモデル「Blazor WebAssembly」がありますが、今回の記事では、前者のBlazor ServerのアプリにBlazorビューワを組み込んで帳票出力する方法をご紹介したいと思います。
※ BlazorビューワはProfessionalエディション限定の機能です。

Blazor WebAssemblyでBlazorビューワを使用する方法は以下の記事をご覧ください。

開発環境

今回使用する開発環境は以下の通りです。

• OS：Windows 10（22H2）
• IDE：Visual Studio 2022（Version 17.4.1）
• フレームワーク： .NET 6（SDK Version 6.0.403）

ActiveReportsは「16.0J SP1（v16.1.0.0）」を使用します。こちらもあらかじめ製品版、またはトライアル版をインストールしてください。トライアル版は無料で以下より入手可能です。

Blazorビューワのアーキテクチャ

ActiveReportsのBlazorビューワでは、Blazor Server、Blazor WebAssemblyのいずれのホスティングモデルの場合においても、出力する帳票の生成処理はバックエンドのレポートサービスが行います。

Blazor WebAssemblyを使用する場合であっても、帳票の生成処理をクライアント（ブラウザ）側で行うことはできませんので、この点はご注意ください。
※ Blazor Serverの場合はBlazor Serverのプロジェクトと同一のプロジェクトにレポートサービスを構成することもできます。今回はこちらの構成で実装します。

Blazor Serverプロジェクトの作成

それではここからBlazorビューワを組み込んだBlazor Serverアプリを作成していきたいと思います。

まずはVisual Studioを開き、プロジェクトテンプレートからBlazor Serverのプロジェクトを作成します。「Blazor Server アプリ」のプロジェクトテンプレートを選択し進みます。

次にプロジェクト名を設定します。今回は「ActiveReports-BlazorViewer-Server-Sample」としました。

フレームワークにデフォルトの「.NET 6.0（長期的なサポート）」を選択し、今回は「HTTPS 用の構成」と「Dockerを有効にする」のチェックを外します。

［作成］をクリックして進むと、Blazor Serverのプロジェクトが作成されます。

レポートサービスの設定

次にBlazorビューワ（クライアント）からのレポート生成のリクエストを処理するレポートサービスを作成します。

NuGetパッケージのインストール

まずは必要なNuGetパッケージをインストールしていきます。レポートサービス用のパッケージのほか、Blazorビューワ用のパッケージやActiveReportsのコアパッケージもあわせてインストールします。

プロジェクトを右クリックし「NuGet パッケージの管理」をクリックし、「NuGetパッケージマネージャー」が開いたら、「参照」タブから以下の3つのパッケージを検索してインストールします。
※ 「GrapeCity.ActiveReports.ja」パッケージはレポートファイルをプロジェクトに追加することで自動的に参照が追加されますが、インストールしているActiveReportsのバージョンによっては、NuGetから取得する最新版とバージョンが合わなくなる場合があるため、明示的に最新版をインストールします。

レポートサービスの作成

次にプロジェクトの「Data」フォルダを右クリックし、「追加」⇒「新しい項目」から「ReportService.cs」という名前で「クラス」を追加します

追加した「ReportService.cs」を以下のように修正します。

namespace ActiveReports_BlazorViewer_Server_Sample.Data
{
    public class ReportService
    {
        public static string EmbeddedReportsPrefix = "ActiveReports_BlazorViewer_Server_Sample.Reports";
        public IEnumerable<string> GetReports()
        {
            string[] validExtensions = { ".rdl", ".rdlx", ".rdlx-master", ".rpx" };
            return GetEmbeddedReports(validExtensions);
        }

        private static string[] GetEmbeddedReports(string[] validExtensions) =>
            typeof(ReportService).Assembly.GetManifestResourceNames()
                .Where(x => x.StartsWith(EmbeddedReportsPrefix))
                .Where(x => validExtensions.Any(x.EndsWith))
                .Select(x => x.Substring(EmbeddedReportsPrefix.Length + 1))
                .ToArray();
    }
}

さらに「Program.cs」を以下のように修正してサービスを登録します。また、「UseReporting」ミドルウェアを追加することで、ブラウザからのレポート出力へのアクセスを提供します。

using ActiveReports_BlazorViewer_Server_Sample.Data;
using GrapeCity.ActiveReports.Aspnetcore.Viewer;
using System.Reflection;

var builder = WebApplication.CreateBuilder(args);

// Add services to the container.
builder.Services.AddRazorPages();
builder.Services.AddServerSideBlazor();
builder.Services.AddSingleton<WeatherForecastService>();
builder.Services.AddSingleton<ReportService>();

var app = builder.Build();

// Configure the HTTP request pipeline.
if (!app.Environment.IsDevelopment())
{
    app.UseExceptionHandler("/Error");
}

app.UseReporting(settings =>
{
    settings.UseEmbeddedTemplates(ReportService.EmbeddedReportsPrefix, Assembly.GetAssembly(typeof(ReportService)));
    settings.UseCompression = true;
});

app.UseStaticFiles();

app.UseRouting();

app.MapBlazorHub();
app.MapFallbackToPage("/_Host");

app.Run();

レポートファイルの作成

レポートファイルの追加

次に表示するレポートファイルを作成します。プロジェクトに「Reports」フォルダを追加し、右クリックから「追加」⇒「新しい項目」から「ActiveReports 16.0J ページレポート（XML）」を追加します。

レポートデータソースの設定

レポートファイルを追加したら、次にレポートで使用するデータソースを設定します。「レポートエクスプローラ」から「データソース」を右クリックし、「データソースの追加」を選択します。ダイアログが表示されるので、レポートで使用するデータベースとの接続設定を行います。今回はローカルのSQL Serverと接続します。

次に追加したデータソースを右クリックして、「データセットの追加」を選択し、実行するクエリを設定します。完了するとデータセット配下にフィールドが追加されます。

データソースとのバインドが完了したら、あとはレイアウトを作成していきます。TextBoxコントロールで帳票のタイトルを作成し、Tableコントロールで一覧表を作成します。

ページレポートの詳しいデザイン方法は製品ヘルプなどもご覧ください。

• 「ページレポートの基本操作」を見る

レイアウトの作成が完了したら、プロパティから「ビルド アクション」の項目を「埋め込みリソース」に設定します。

フロントエンド（Blazorビューワ）の設定

Blazorビューワの組み込み

Blazorビューワを組み込むRazorページを作成していきます。「Pages」フォルダを右クリックし、「追加」⇒「新しい項目」から「Razor コンポーネント」を追加します。名前は「BlazorViewer.razor」としました。

追加した「BlazorViewer.razor」を以下のように編集します。

@page "/blazorviewer"
 
<h3>BlazorViewer</h3>
<div style="width:100%; height: 100vh">
    <GrapeCity.ActiveReports.Blazor.Viewer.ReportViewer ReportName="PageReport.rdlx"></GrapeCity.ActiveReports.Blazor.Viewer.ReportViewer>
</div>
 
@code {
 
}

さらに「Shared\NavMenu.razor」を以下のように編集し、トップページからBlazorビューワを組み込んだRazorページにアクセスできるようにします。

<div class="@NavMenuCssClass" @onclick="ToggleNavMenu">
    <nav class="flex-column">
        ・・・（中略）・・・
        <div class="nav-item px-3">
            <NavLink class="nav-link" href="blazorviewer">
                <span class="oi oi-list-rich" aria-hidden="true"></span> Blazor Viewer
            </NavLink>
        </div>
    </nav>
</div>

アプリケーションの実行

以上で実装は完了です。アプリケーションを実行すると以下のようにBlazor Serverアプリに組み込んだBlazorビューワ上に帳票を表示することができました。

ビューワのサイドバーからはPDFなど各種ファイル形式への保存も可能です。

さいごに

以上が「Blazorビューワ」を使用してBlazor Serverで帳票を出力する方法でした。「16.0J」にはこの他にも多数の新機能がございますので、是非詳細をWebサイトでご確認ください。

製品の機能を手軽に体験できるデモアプリケーションやトライアル版も公開しておりますので、こちらもご確認ください。

• デモアプリケーションを試す
• トライアル版をダウンロードして試す

また、ご導入前の製品に関するご相談、ご導入後の各種サービスに関するご質問など、お気軽にお問合せください。

• 問合せ先を確認する
• 個別相談会（Web会議）について確認する