JavaScriptアプリケーションの組み込み

このトピックでは、ActiveReportsを使用してASP.NET Coreアプリケーションを作成し、JSビューワでレポートを描画する方法について説明します。

Razorページを含む［ASP.NET Core Webアプリ］を使用してASP.NET Core Webアプリケーションを作成し、ASP.NET Core のミドルウェアに示したように、ASP.NET Core のミドルウェアでActiveReportsのJSビューワを構成します。
アプリケーションにJSViewerを追加します。
- ［表示］メニューから、［ターミナル］ を開き、次のコマンドを実行します。
  npm install @mescius/activereportsnet-viewer-ja
- node_modulesフォルダにインストールされたjsViewer.min.jsファイルとjsViewer.min.cssファイルを、アプリケーションのwwwroot\jsフォルダとwwwroot\cssフォルダにそれぞれコピーします。

Index.cshtmlの内容を次のように変更します。

Index.cshtml	コードのコピー
@page @model IndexModel @{ ViewData["Title"] = "ホームページ"; } <!DOCTYPE html> <html lang="en"> <head> <title>ActiveReports JSViewer</title> <link rel="stylesheet" href="css/jsViewer.min.css" /> </head> <body> <div id="viewer-id" style="width: 100%; height: 100vh;"> </div> <!--reference to js file--> <script src="js/jsViewer.min.js"></script> <script type="text/javascript"> GrapeCity.ActiveReports.JSViewer.create({ element: '#viewer-id', reportService: { url: 'api/reporting', }, reportID: 'DemoReport.rdlx', settings: { zoomType: 'FitPage' }, }); </script> </body> </html>

Index.cshtml

コードのコピー

@page
@model IndexModel
@{
    ViewData["Title"] = "ホームページ";
}
<!DOCTYPE html>
<html lang="en">
<head>
    <title>ActiveReports JSViewer</title>
    <link rel="stylesheet" href="css/jsViewer.min.css" />
</head>
<body>
    <div id="viewer-id" style="width: 100%; height: 100vh;">
    </div>
    <!--reference to js file-->
    <script src="js/jsViewer.min.js"></script>
    <script type="text/javascript">
        GrapeCity.ActiveReports.JSViewer.create({
            element: '#viewer-id',
            reportService: {
                url: 'api/reporting',
            },
            reportID: 'DemoReport.rdlx',
            settings: {
                zoomType: 'FitPage'
            },
        });
    </script>
</body>
</html>

次のようにStartup.csクラスにReportingサービスを追加して、Startup.csクラスを変更します。

Startup.cs	コードのコピー
public void Configure(IApplicationBuilder app, IWebHostEnvironment env) { if (env.IsDevelopment()) { app.UseDeveloperExceptionPage(); } else { app.UseExceptionHandler("/Error"); // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts. app.UseHsts(); } app.UseHttpsRedirection(); app.UseStaticFiles(); app.UseReporting(settings => { settings.UseFileStore(new System.IO.DirectoryInfo(env.ContentRootPath + @"\Reports\")); }); app.UseRouting(); app.UseAuthorization(); app.UseEndpoints(endpoints => { endpoints.MapRazorPages(); }); }

Startup.cs

コードのコピー

public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
        {
            if (env.IsDevelopment())
            {
                app.UseDeveloperExceptionPage();
            }
            else
            {
                app.UseExceptionHandler("/Error");
                // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
                app.UseHsts();
            }
            app.UseHttpsRedirection();
            app.UseStaticFiles();
            app.UseReporting(settings =>
            {
                settings.UseFileStore(new System.IO.DirectoryInfo(env.ContentRootPath + @"\Reports\"));
            });
            app.UseRouting();
            app.UseAuthorization();
            app.UseEndpoints(endpoints =>
            {
                endpoints.MapRazorPages();
            });
        }

ソリューションをビルドして実行します。