ASP.NET MVC Core Integration

In This Topic

Let us create an ASP.NET Core application using ActiveReports and render the reports in the Js Viewer.

Create an ASP.NET Core Web Application which includes example Razor Pages and configure ActiveReports in ASP.NET Core Middleware as illustrated in Js Viewer ASP.NET Middleware topic.
Add Js Viewer to the application.
1. Open the Tools menu > NuGet Package Manager > Package Manager Console and run the following command:
  npm install @mescius/activereportsnet-viewer
2. Copy the 'jsViewer.min.js' and 'jsViewer.min.css' files installed in the node_modules folder to the wwwroot\js and wwwroot\css folder in the application, respectively.

Replace the complete code in the 'Index.cshtml' with the following content:

Index.cshtml	Copy Code
@page @model IndexModel @{ ViewData["Title"] = "Home page"; } <!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: 100%;"> </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

Copy Code

@page
@model IndexModel
@{
    ViewData["Title"] = "Home page";
}
<!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: 100%;">
    </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>

Modify the 'Startup.cs' class by adding the Reporting service in the 'Startup.cs' class as follows:

Startup.cs	Copy Code
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.UseReportViewer(settings => { settings.UseFileStore(new System.IO.DirectoryInfo(env.ContentRootPath + @"\Reports\")); }); app.UseRouting(); app.UseAuthorization(); app.UseEndpoints(endpoints => { endpoints.MapRazorPages(); }); }

Startup.cs

Copy Code

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.UseReportViewer(settings =>
            {
                settings.UseFileStore(new System.IO.DirectoryInfo(env.ContentRootPath + @"\Reports\"));
            });
            app.UseRouting();
            app.UseAuthorization();
            app.UseEndpoints(endpoints =>
            {
                endpoints.MapRazorPages();
            });
        }

Run the application.