GrapeCity ActiveReports for .NET 16.0J
Blazorビューワの組み込み
ActiveReportsユーザーガイド > レポートの表示 > Blazorビューワの使用 > Blazorビューワの組み込み

このトピックでは、Blazorビューワを組み込んだWebアプリケーションを作成する方法について説明します。

NuGetパッケージ

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

ビューワの初期化

BlazorViewer.razor
コードのコピー 
<div class="main">
    <div id="viewerContainer">
        <ReportViewer @ref="_viewer" ReportName="@_currentReport" ViewerInitialized="InitializedViewer" DocumentLoaded="@DocumentLoaded"/>
    </div>
</div>

 

Blazorサーバーアプリケーションを作成する

組み込みのActiveReports Serverアプリケーションテンプレートを使用する

  1. Visual Studio 2022を開きます。
  2. 「ActiveReports 16.0J Blazorビューワ Serverアプリケーション」を選択し、［次へ］をクリックします。
    Blazor Viewer
  3. プロジェクト名を入力し、［作成］をクリックします。
    Blazor Viewer
    次の必要なパッケージがプロジェクトに自動的に追加されます。
    • GrapeCity.ActiveReports.Aspnetcore.Viewer.ja
    • GrapeCity.ActiveReports.Blazor.Viewer.ja
  4. Reportsフォルダからデフォルトの「RdlReport1.rdlx」レポートを開き、デザインします。
  5. レポートの［ビルドアクション］プロパティが「埋め込みリソース」に設定されていることを確認します。
  6. アプリケーションを実行します。

Visual Studioテンプレートを使用する

  1. Visual Studio 2022を開きます。
  2. 新しいプロジェクトを作成し、［Blazor Serverアプリ］テンプレートを選択します。
    Blazor Viewer
  3. プロジェクト名を入力し、［次へ］をクリックします。
  4. ［対象のフレームワーク］を「.NET6.0（長期的なサポート）」に設定し、「HTTPS用の構成」オプションを無効にします。
    Blazor Viewer
  5. ［作成］をクリックします。
  6. 次のパッケージをプロジェクトに追加します。
    • GrapeCity.ActiveReports.Aspnetcore.Viewer.ja
    • GrapeCity.ActiveReports.Blazor.Viewer.ja 

  7. プロジェクトフォルダ内に ［Reports］フォルダを作成します。Reportsフォルダには、ビューワに表示するレポート（RdlReport1.rdlx）を配置します。

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

  9. Pagesフォルダを右クリックし、［追加］->［Razorコンポーネント］を選択します。名前をBlazorViewer.razorに設定します。

  10. BlazorViewer.razorページには、次のコードを追加します。
    BlazorViewer.razor
    コードのコピー 
    @page "/blazorviewer"
 
<h3>BlazorViewerTest</h3>
<div style="width:100%; height: 100vh">
    <GrapeCity.ActiveReports.Blazor.Viewer.ReportViewer ReportName="RdlReport1.rdlx"></GrapeCity.ActiveReports.Blazor.Viewer.ReportViewer>
</div>
 
@code {
 
}
  11. ［Shared］フォルダ->［NavMenu.razor］ページには、次のコードを追加します。
    NavMenu.razor
    コードのコピー 
    <li class="nav-item px-3">
            <NavLink class="nav-link" href="blazorviewer">
                <span class="oi oi-list-rich" aria-hidden="true"></span> Blazor Viewer
            </NavLink>
</li>
  12. ReportService.csクラスを追加します。
    ReportService.cs
    コードのコピー 
    namespace BlazorApp1.Data
{
    public class ReportsService
    {
        public static string EmbeddedReportsPrefix = "BlazorApp1.Reports";
        public IEnumerable<string> GetReports()
        {
            string[] validExtensions = { ".rdl", ".rdlx", ".rdlx-master", ".rpx" };
            return GetEmbeddedReports(validExtensions);
        }
 
        private static string[] GetEmbeddedReports(string[] validExtensions) =>
            typeof(ReportsService).Assembly.GetManifestResourceNames()
                .Where(x => x.StartsWith(EmbeddedReportsPrefix))
                .Where(x => validExtensions.Any(x.EndsWith))
                .Select(x => x.Substring(EmbeddedReportsPrefix.Length + 1))
                .ToArray();
 
    }
}
  13. Program.csファイルを更新します。
    • 次のディレクティブを追加します。
      • using GrapeCity.ActiveReports.Aspnetcore.Viewer;
      • using System.Reflection;
    • アプリケーションにサービスを追加します。
    • UseReporting()ミドルウェアを追加することで、ブラウザからのレポート出力へのアクセスを提供します。
      Program.cs
      コードのコピー 
      builder.Services.AddSingleton<ReportsService>();
 
app.UseReporting(settings =>
{
    settings.UseEmbeddedTemplates(ReportsService.EmbeddedReportsPrefix, Assembly.GetAssembly(typeof(ReportsService)));
    settings.UseCompression = true;
});
  14. アプリケーションを実行します。

ActiveReports BlazorビューワWebAssemblyアプリケーションを作成する

組み込みのActiveReportsアプリケーションテンプレートを使用する

  1. Visual Studio 2022を開きます。
  2. 「ActiveReports 16.0J BlazorビューワWebAssemblyアプリケーション」を選択し、［次へ］をクリックします。
    Blazor Viewer
  3. プロジェクト名を入力し、［作成］をクリックします。
    Blazor Viewer

    次の必要なパッケージがプロジェクトに自動的に追加されます。

    • GrapeCity.ActiveReports.Aspnetcore.Viewer.ja
    • GrapeCity.ActiveReports.Blazor.Viewer.ja

  4. Reportsフォルダからデフォルトの「RdlReport1.rdlx」レポートを開き、デザインします。

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

  6. 複数のスタートアッププロジェクトを設定します。

    1. ソリューションエクスプローラーでは、ソリューション（最上位ノード）を選択します。
    2. ソリューションのコンテキストメニューから、［プロパティ］を選択します。
    3. ソリューションプロパティページダイアログでは、［共通プロパティ］ノードを展開し、［スタートアッププロジェクト］を選択します。
    4. ［マルチスタートアッププロジェクト］オプションを選択し、両方のプロジェクトのアクションを「開始」に設定します。
  7. ReportServiceプロジェクトのlaunchSettings.jsonファイルとBlazorViewerWebAssemblyプロジェクトのindex.razorファイルのURLが同じであることを確認します。
  8. アプリケーションを実行します。

Visual Studioテンプレートを使用する

  1. Visual Studio 2022を開きます。
  2. 新しいプロジェクトを作成し、［Blazor WebAssemblyアプリ］テンプレートを選択します。
    Blazor Viewer
  3. プロジェクト名を入力し、［次へ］をクリックします。
    Blazor Viewer
  4. ［対象のフレームワーク］を「.NET6.0（長期的なサポート）」に設定し、「HTTPS用の構成」オプションを無効にします。
    Blazor Viewer
  5. ［作成］をクリックします。
  6. 次のパッケージをプロジェクトに追加します。
    • GrapeCity.ActiveReports.Blazor.Viewer.ja

  7. プロジェクトフォルダ内に ［Reports］フォルダを作成します。Reportsフォルダには、ビューワに表示するレポート（RdlReport1.rdlx）を配置します。

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

  9. Index.razorページを次のように変更します。

    BlazorViewer.razor
    コードのコピー 
    @page "/"
@using GrapeCity.ActiveReports.Blazor.Viewer
<PageTitle>Index</PageTitle><div style="width:100%; height: 100vh">
 <ReportViewer ReportName="RdlReport.rdlx" ReportService="@_reportService"></ReportViewer></div>
@code{
    private ReportServiceSettings _reportService = new ReportServiceSettings()
    {
        Url = "http://localhost:58865/",
    };
}
  10. アプリケーションを実行します。

 

 

Copyright © 2003 GrapeCity, Inc. All rights reserved.