Add a Report Viewer to a Project (Blazor WebAssembly Standalone Application Created with a Visual Studio Template)

• Aug 14, 2024
• 6 minutes to read

Tip

To create a Blazor Reporting application, use preconfigured DevExpress templates to create an application with minimal effort and maximum efficiency. For more information, review the following help topics:

• Use DevExpress Project Templates to Create a Blazor Reporting Application (.NET CLI)
• Use DevExpress Project Templates to Create a Blazor Reporting Application (Visual Studio)

Prerequisites

1. .NET 6.0 or later SDK.
2. Visual Studio 2022 with the ASP.NET and web development workload.

Create a New Project

This section describes how to create a new Blazor project. If you want to add Report Viewer to an existing application, go to Step 2.

1. Click Create a new project on Visual Studio’s start page, select the Blazor WebAssembly Standalone App template, and click Next.

2. Specify the project name and location, and click Next.

3. Specify additional options, and click Create.

For more information on available Blazor templates, refer to the following topic: Tooling for ASP.NET Core Blazor.

Obtain Your NuGet Feed Credentials

You need to obtain your personal NuGet feed credentials to access required NuGet packages from your project. You can use the NuGet feed URL or feed authorization key to manage DevExpress packages.

1. Make sure your DevExpress account has access to Blazor Reporting Controls. This products are included in the Universal, DXperience, ASP.NET, and Reporting subscriptions. Refer to the following page for more information: DevExpress Subscriptions.

2. Use your DevExpress credentials to log into nuget.devexpress.com.

3. Obtain your NuGet feed credentials and copy them to the clipboard.

   You can find the same URL on the Download Manager page.

Create DevExpress NuGet Source

1. In Visual Studio, select Tools → NuGet Package Manager → Package Manager Settings.

   

2. Navigate to NuGet Package Manager → Package Sources. Click the plus button at the top right corner to add a new NuGet package source. Use the following package settings:

   • Name: DevExpress

   • Source: DevExpress NuGet Gallery (https://nuget.devexpress.com/api/v3/index.json) if you use the feed key to authenticate. Otherwise, use the NuGet Feed URL (https://nuget.devexpress.com/{your feed authorization key}/api/v3/index.json).

   Click OK.

   Make sure the nuget.org package source is also enabled.

   

If you registered the DevExpress NuGet feed with an authorization key, the login form is displayed when you invoke the NuGet Package Manager window for the first time. Enter your credentials as follows:

• User name: DevExpress

• Password: your authorization key

  

Install NuGet Packages

Install NuGet packages requiered for DevExpress Reporting:

1. Select Tools → NuGet Package Manager → Manage NuGet Packages for Solution.

2. Once the dialog appears on screen, open the Browse tab, select the All as a package source, and install the following NuGet packages:

   • DevExpress.Drawing.Skia
   • DevExpress.Blazor.Reporting.Viewer
   • SkiaSharp.Views.Blazor
   • SkiaSharp.NativeAssets.WebAssembly
   • SkiaSharp.HarfBuzz
   • HarfBuzzSharp.NativeAssets.WebAssembly

   The DevExpress 24.1 Local package is automatically added as a package source to your NuGet configuration files if you used the DevExpress .NET Product Installer.

   

3. In the Solution Explorer, right-click the project and select Edit Project File. Add the following native dependency to the application project file:

   <ItemGroup>
       <NativeFileReference Include="$(HarfBuzzSharpStaticLibraryPath)\2.0.23\*.a" />
   </ItemGroup>
   

4. Build the project.

Refer to the following help topic for more information: Install NuGet Packages in Visual Studio, VS Code, and Rider.

Register DevExpress Resources

1. In the _Imports.razor file, register [DevExpress.Blazor]and (xref:DevExpress.Blazor) DevExpress.Blazor.Reporting namespaces:

   _Imports.razor

   @using DevExpress.Blazor.Reporting
   @using DevExpress.Blazor
   

2. In the Program.cs file, register services required for Blazor Reporting. To do this, call the following methods:

   • AddDevExpressBlazor
   • AddDevExpressWebAssemblyBlazorReportViewer
   Program.cs

   using BlazorApp1;
   using Microsoft.AspNetCore.Components.Web;
   using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
   
   var builder = WebAssemblyHostBuilder.CreateDefault(args);
   builder.RootComponents.Add<App>("#app");
   builder.RootComponents.Add<HeadOutlet>("head::after");
   
   builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
   
   builder.Services.AddDevExpressBlazor();
   builder.Services.AddDevExpressWebAssemblyBlazorReportViewer();
   
   await builder.Build().RunAsync();
   

Add a Report Viewer to the Page

1. Create a new file (ReportViewer.razor) in the Pages folder. Use the following code snippet to generate a page with a Report Viewer component:

   Pages/ReportViewer.razor

   @page "/reportviewer/"
   
   @using DevExpress.Blazor.Reporting
   @using DevExpress.XtraReports.UI
   
   <h3>Report Viewer</h3>
   <link href="_content/DevExpress.Blazor.Themes/blazing-berry.bs5.css" rel="stylesheet" />
   <link rel="stylesheet" href="_content/DevExpress.Blazor.Reporting.Viewer/css/dx-blazor-reporting-components.bs5.css">
   
   <DxReportViewer @ref="reportViewer" />
   
   @code {
       [Inject] HttpClient? Http { get; set; }
   
       DxReportViewer? reportViewer;
   }
   

   To learn more about code that applies a DevExpress Blazor theme, review the following help topic: Themes.

2. Add a navigation link to the NavMenu.razor page:

   NavMenu.razor

   <div class="nav-item px-3">
       <NavLink class="nav-link" href="reportviewer">
           <span class="oi oi-plus" aria-hidden="true"></span> Report Viewer
       </NavLink>
   </div>
   

Add Code to Load Fonts

Before the application can run in a browser, register fonts to ensure that the Skia library can use them to draw report content. This example implements a custom service that loads fonts: FontLoader.

Add the FontLoader.cs class with the following code to your project:

FontLoader.cs

using DevExpress.Drawing;

public static class FontLoader {
    public async static Task LoadFonts(HttpClient httpClient, List<string> fontNames) {
        foreach (var fontName in fontNames) {
            var fontBytes = await httpClient.GetByteArrayAsync($"fonts/{fontName}");
            DXFontRepository.Instance.AddFont(fontBytes);
        }
    }
}

Add a LoadFonts method call to the page that includes the DxReportViewer control:

Pages/ReportViewer.razor

// ...

@code {
    // ...
    List<string> RequiredFonts = new() {
        "segoeui.ttf", "segoeuib.ttf", "segoeuii.ttf",
        "segoeuil.ttf", "segoeuisl.ttf", "segoeuiz.ttf"
    };

    protected async override Task OnAfterRenderAsync(bool firstRender) {
        if (firstRender) {
            await FontLoader.LoadFonts(Http, RequiredFonts);
        }
        await base.OnAfterRenderAsync(firstRender);
    }
}

Copy fonts to the wwwroot/fonts folder.

Load a Report

You can create a report class in the application and pass an instance of this class to the viewer. As an alternative, use the XtraReport.FromFile method to load a report from a file in .REPX format, and then pass a report instance to the viewer.

Create a New Report

To ensure that all needed templates are available in Visual Studio prior to proceeding with this section, DevExpress Reporting v24.1 must be installed.

1. In Visual Studio, create a new Reports folder.
2. Press Ctrl+Shift+A or select PROJECT | Add New Item… in the main menu.

3. Select the DevExpress Report item and proceed to the Report Wizard to create a TestReport.cs file.

   Show Visual Guide

   
   

   Use the following JSON data string:

   [
   {
       "date": "2018-05-06",
       "temperatureC": 1,
       "summary": "Freezing"
   },
   {
       "date": "2018-05-07",
       "temperatureC": 14,
       "summary": "Bracing"
   },
   {
       "date": "2018-05-08",
       "temperatureC": -13,
       "summary": "Freezing"
   },
   {
       "date": "2018-05-09",
       "temperatureC": -16,
       "summary": "Balmy"
   },
   {
       "date": "2018-05-10",
       "temperatureC": -2,
       "summary": "Chilly"
   }
   ]
   

4. Upon completion, the wizard generates a TestReport.cs file and adds it to the project. Visual Studio Report Designer opens the newly created report.

   

5. Open the ReportViewer.razor page and specify the report that the Report Viewer displays.

   ReportViewer.razor

   @page "/reportviewer/"
   
   @using DevExpress.Blazor.Reporting
   @using DevExpress.XtraReports.UI
   
   <h3>Report Viewer</h3>
   <link href="_content/DevExpress.Blazor.Themes/blazing-berry.bs5.css" rel="stylesheet" />
   <link rel="stylesheet" href="_content/DevExpress.Blazor.Reporting.Viewer/css/dx-blazor-reporting-components.bs5.css">
   
   <DxReportViewer @ref="reportViewer" Report="Report"/>
   
   @code {
       [Inject] HttpClient? Http { get; set; }
       XtraReport Report = new TestReport();
       DxReportViewer? reportViewer;
   
       List<string> RequiredFonts = new() {
           "segoeui.ttf", "segoeuib.ttf", "segoeuii.ttf",
           "segoeuil.ttf", "segoeuisl.ttf", "segoeuiz.ttf"
       };
   
       protected async override Task OnAfterRenderAsync(bool firstRender) {
           if (firstRender) {
               await FontLoader.LoadFonts(Http, RequiredFonts);
           }
           await base.OnAfterRenderAsync(firstRender);
       }
   }
   

Result

Run the project and see the result. The Report Viewer displays a tabular report with data from the JSON data source:

Troubleshooting

The following article lists common issues that can occur in a Web Reporting application and describes solutions: Troubleshooting

For information on how to identify the cause of an issue, refer to the following topic: Reporting Application Diagnostics.