ActiveReports 15 .NET Edition
ActiveReports 15 User Guide / Preview Reports / JavaScript / Pure JavaScript Integration
In This Topic
    Pure JavaScript Integration
    In This Topic

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

    1. Create an ASP.NET Core Web Application with ASP.NET Core Web template which includes example Razor Pages and configure ActiveReports in ASP.NET Core Middleware as illustrated in JSViewer ASP.NET Middleware topic.

    2. Add JSViewer to the application.

      • Open the Tools menu > NuGet Package Manager and run the following command in the Package Manager Console:
        npm install @grapecity/ar-viewer

      • 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.

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