ActiveReports 16 .NET Edition
ActiveReports 16 User Guide / Preview Reports / Blazor / Blazor Viewer Integration
In This Topic
    Blazor Viewer Integration
    In This Topic

    This topic describes how to create a web application that embeds Blazor Viewer.

    NuGet Packages

    The following packages are required to be included in the application

    Initialize Blazor Viewer Component

    BlazorViewer.razor
    Copy Code
    <div class="main">
        <div id="viewerContainer">
            <ReportViewer @ref="_viewer" ReportName="@_currentReport" ViewerInitialized="InitializedViewer" DocumentLoaded="@DocumentLoaded"/>
        </div>
    </div>
    

     

    Create ActiveReports Blazor Viewer Server Application 

    Let us create a Blazor server application with GrapeCity ActiveReports Blazor Viewer using local report service.

    Blazor Viewer Server app using built-in GrapeCity ActiveReports application template

    1. Open Microsoft Visual Studio 2022.
    2. Select ActiveReports 16 Blazor Viewer Server Application template and click Next.
      Blazor Viewer
    3. Type a name for your project and click Create.
      Blazor Viewer
      The following required packages are automatically added to project:
      • GrapeCity.ActiveReports.Aspnetcore.Viewer
      • GrapeCity.ActiveReports.Blazor.Viewer
    4. Open the default 'RdlReport1.rdlx' report from the 'Reports' folder and design. 
    5. Make sure to set the Build Action property of the report to 'Embedded Resource'.
    6. Run the application.

    Blazor Viewer Server application using Visual Studio Template

    1. Open Microsoft Visual Studio 2022.
    2. Create a new project and Choose the template Blazor Server App
      Blazor Viewer
    3. Type a name for your project and click Create.
    4. Select .NET 6.0 (Long-term Support) as the target framework and disable 'Configure for Https' option.
      Blazor Viewer
    5. Click Create.
    6. Add the following packages:
      • GrapeCity.ActiveReports.Aspnetcore.Viewer
      • GrapeCity.ActiveReports.Blazor.Viewer 
    7. Add a new folder called 'Reports' in application's root and place the report(RdlReport1.rdlx) you want to display in the viewer, in this folder.

    8. Make sure to set the Build Action property of the report to 'Embedded Resource'.

    9. Add a Razor component to the folder Pages (right-click Pages > Add - Razor component). Set aname for it, for example, BlazorViewer.razor.

    10. Write the following code in BlazorViewer.razor page:
      BlazorViewer.razor
      Copy Code
      @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. In the Shared folder > NavMenu.razor page, add the following code:
      NavMenu.razor
      Copy Code
      <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. Add ReportService.cs class:
      ReportService.cs
      Copy Code
      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. Update Program.cs file:
      • add following directives:
        • using GrapeCity.ActiveReports.Aspnetcore.Viewer;
        • using System.Reflection;
      • add service to the application
      • provide access to a report output from the browser by adding the UseReporting() middleware
        Program.cs
        Copy Code
        builder.Services.AddSingleton<ReportsService>();
         
        app.UseReporting(settings =>
        {
            settings.UseEmbeddedTemplates(ReportsService.EmbeddedReportsPrefix, Assembly.GetAssembly(typeof(ReportsService)));
            settings.UseCompression = true;
        });
        
    14. Run the application.

    Create ActiveReports Blazor Viewer WebAssembly Application

    Here we describe creating the application using built-in GrapeCity ActiveReports application template. This application uses remote report service.

    Blazor Viewer WebAssembly application using built-in GrapeCity ActiveReports application template

    1. Open Microsoft Visual Studio 2022.  
    2. Select ActiveReports 16 Blazor Viewer WebAssembly Application template and click Next.
      Blazor Viewer
    3. Type a name for your project and click Create.
      Blazor Viewer

      The following required packages are automatically added to the project:

      • GrapeCity.ActiveReports.Aspnetcore.Viewer
      • GrapeCity.ActiveReports.Blazor.Viewer
    4. Open the default 'RdlReport1.rdlx' report from the 'Reports' folder and design. 

    5. Make sure to set the Build Action property of the report to 'Embedded Resource'.
    6. Make sure to set multiple startup projects:

      1. In the Solution Explorer, select the solution (the top node).
      2. Choose the solution node's context (right-click) menu and then choose Properties.
      3. In the Solution Property Pages dialog box, expand the Common Properties node, and choose Startup Project.
      4. Choose the Multiple Startup Projects option and set the actions of both projects to Run.
    7. Make sure that the URL is the same in launchSettings.json file of the ReportService project and index.razor file of BlazorViewerWebAssembly project.
    8. Run the application.

    Blazor Viewer WebAssembly application using Visual Studio Template

    1. Open Microsoft Visual Studio 2022.
    2. Create a new project and Choose the template Blazor WebAssembly App
      Blazor Viewer
    3. Type a name for your project and click Create.
      Blazor Viewer
    4. Select .NET 6.0 (Long-term Support) as the target framework and disable 'Configure for Https' option.
      Blazor Viewer
    5. Click Create.
    6. Add the following package:
      • GrapeCity.ActiveReports.Blazor.Viewer
    7. Add a new folder called 'Reports' in application's root and place the report (RdlReport1.rdlx) you want to display in the viewer, in this folder.

    8. Make sure to set the Build Action property of the report to 'Embedded Resource'.

    9. Update the existing Index.razor page as follows:

      BlazorViewer.razor
      Copy Code
      @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. Run the application.