ActiveReports 17 .NET Edition
Developers / Create Applications / Blazor Viewer Application
In This Topic
    Blazor Viewer Application
    In This Topic

    A Blazor Viewer application uses the same client-server model as the JS Viewer, so all details on the server-side configurations like Custom Font Resolver or Prevent Cross-Site Scripting Attacks are relevant for a Blazor Viewer as well.

    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 ActiveReports Blazor Viewer using local report service.

    Using built-in ActiveReports application template

    1. Open Microsoft Visual Studio 2022.
    2. Select ActiveReports 17 Blazor Viewer Server Application template and click Next.
      Blazor Viewer
    3. Type a name for your project and click Next.
      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.

    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 Next.
    4. Select .NET 7.0 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 a name 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;
        });
        
        Note: Instead of ‘UseEmbeddedTemplates',  you can use either 'UseFileStore' or 'UseCustomStore’ method calls.
        • 'UseEmbeddedTemplates' stores reports as resources in dlls. 
        • 'UseFileStore' stores reports in the file system.
        • 'UseCustomStore’ allows you to store reports in any user-defined location, like a custom database or any other type of location.
    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.

    Using built-in GrapeCity ActiveReports application template

    1. Open Microsoft Visual Studio 2022.
    2. Select ActiveReports 17 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.

    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 Next.
      Blazor Viewer
    4. Select .NET 7.0 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.
    See Also

    Samples