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

• Aug 14, 2024
• 8 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 one of the following projects depending on the target framework:

   • For .NET 6 and .NET 7, select the Blazor Server App template.

   • For .NET 8, select the Blazor Web App template. Select Server from the Interactive Render Mode drop-down list.

     

   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 the DevExpress Blazor NuGet Packages

Install a NuGet package if you did not use the DevExpress Template to create the project:

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

2. Once the dialog appears on screen, open the Browse tab, select the DevExpress 24.1 Local package source, and install the following NuGet package:

   • DevExpress.Blazor.Reporting.Viewer

   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. 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 the DevExpress.Blazor namespace:

   _Imports.razor

   @using DevExpress.Blazor
   

2. For .NET 6 and .NET 7 only. In the Program.cs file, call the UseWebRoot and UseStaticWebAssets(IWebHostBuilder) methods to enable the application to load client-side resources:

   Program.cs

   using Microsoft.AspNetCore.Components;
   using Microsoft.AspNetCore.Components.Web;
   
   var builder = WebApplication.CreateBuilder(args);
   // ...
   builder.WebHost.UseWebRoot("wwwroot");
   builder.WebHost.UseStaticWebAssets();
   // ...
   var app = builder.Build();
   // ...
   

3. For .NET 8 only. Register scripts required by DevExpress components: open the App.razor file and call the DxResourceManager.RegisterScripts method.

   App.razor

   <head>
       @*...*@
       @DxResourceManager.RegisterScripts()
       @*...*@
   </head>
   

4. Register the services required for Blazor Reporting, and specify endpoint routing. For this, call the following methods in the Program.cs file:

   • AddDevExpressBlazor
   • AddDevExpressServerSideBlazorReportViewer
   Program.cs

   using Microsoft.AspNetCore.Components;
   using Microsoft.AspNetCore.Components.Web;
   // ...
   
   var builder = WebApplication.CreateBuilder(args);
   
   // ...
   builder.Services.AddDevExpressBlazor();
   builder.Services.AddDevExpressServerSideBlazorReportViewer();
   // If you use Bootstrap 5, specify the Bootstrap version explicitly
   builder.Services.Configure<DevExpress.Blazor.Configuration.GlobalOptions>(options => {
       options.BootstrapVersion = DevExpress.Blazor.BootstrapVersion.v5;
               });
   
   builder.WebHost.UseWebRoot("wwwroot");
   builder.WebHost.UseStaticWebAssets();
   
   var app = builder.Build();
   
   // ...
   
   app.Run();
   

5. Apply a theme in the appropriate project file based on your project structure:

   • Pages/_Layout.cshtml for .NET 6
   • Pages/_Host.cshtml for . NET 7
   • Components/App.razor for .NET 8

   Alternatively, add theme links to the ReportViewer.razor page.

   <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">
   

Add a Report Viewer to the Page

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

   For .NET 8 projects, enable interactivity for DevExpress components:

   • Make sure the required interactive services are registered in the Program.cs file.
   • Add the corresponding render mode attribute to a component’s page.
   .NET 6.0 and .NET 7.0

   @page "/Viewer"
   
   @using DevExpress.Blazor.Reporting
   
   <h3>Report Viewer</h3>
   
   <DxReportViewer @ref="reportViewer">
   </DxReportViewer>
   
   @code {
       DxReportViewer? reportViewer;
   }
   

   .NET 8.0

   @page "/Viewer"
   @rendermode InteractiveServer
   
   @using DevExpress.Blazor.Reporting
   
   <h3>Report Viewer</h3>
   
   <DxReportViewer @ref="reportViewer">
   </DxReportViewer>
   
   @code {
      DxReportViewer? reportViewer;
   }
   

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

   NavMenu.razor

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

Run the Project

Run the project. When the browser opens the application, navigate to the Viewer page:

Load a Report

This section loads a report to Report Viewer in one of the following ways:

Create a report class and pass an instance of this class to the viewer.

See the following section for more information: Create a New Report.

Load a report from a .repx file with the XtraReport.FromFile method and pass a report instance to the viewer.

See the following section for information: Load a Report from a File

Create a New Report

To perform this step, you should install DevExpress Reporting v24.1 on your machine. Refer to the following topic for more information: Run the Installation Wizard - DevExpress Unified Component Installer.

1. Select Project -> Add New Item… to invoke the Add New Item dialog. Navigate to the Reporting node and select the DevExpress v.24.1 Report item template.

   

   Name the report TestReport.cs and click Add.

2. Select Blank in the invoked Report Wizard page and click Finish.

   

3. Modify the newly created report in the Visual Studio Report Designer. Add a label and type Hello, World!:

   

4. Click the report’s smart tag and select Save…:

   

   In the invoked Save As dialog, specify the Reports project folder, Report XML Files (.repx) file type, and the TestReport.repx file name.

1. Specify the report that the Report Viewer displays in the ReportViewer.razor page:

   ReportViewer.razor

   @page "/viewer"    
   @rendermode InteractiveServer
   
   @using DevExpress.Blazor.Reporting
   @using DevExpress.XtraReports.UI;
   
   <h3>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">
   </DxReportViewer>
   
   @code {
       DxReportViewer reportViewer { get; set; }
       TestReport Report = new TestReport();
   }
   

2. Run the project and see the result.

Load a Report from a File

Create a report and save it to a .repx file, as the following help topic describes: Create a Report in Visual Studio. You can use the DevExpress End-User Report Designer instead of the Visual Studio Report Designer for any platform.

The ProductListReport.repx report layout file in this tutorial is obtained from the XtraReports For WinForms MainDemo - Products List demo module. You should run the demo module, switch to the Designer, and save the report to a file.

1. Create the Reports folder in the wwwroot project folder and copy the ProductListReport.repx file to the Reports folder.

2. In this example, we use the sample Northwind database. Copy the nwind.db database to the project’s Data folder and add the connection string entry to the appsettings.json file:

   appsettings.json

   {
       // ...
       "connectionStrings": {
           "NWindConnectionString": "XpoProvider=SQLite;Data Source=Data\\nwind.db"
       }
   }
   

   Install the System.Data.SQLite or Microsoft.Data.Sqlite NuGet package to use the SQLite database.

3. Add the code to the ReportViewer.razor page to load a report from a file and assign the report instance to the DxReportViewer.Report property.

   Pages/ReportViewer.razor

   @page "/Viewer"
   @rendermode InteractiveServer
   
   @using DevExpress.Blazor.Reporting
   @using DevExpress.XtraReports.UI
   
   <h3>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"> 
   </DxReportViewer>
   
   @code {
       DxReportViewer? reportViewer { get; set; }
       XtraReport Report { get{
           return XtraReport.FromFile(Path.Combine(Directory.GetCurrentDirectory(),
            @"Reports\ProductListReport.repx"));
           }
       }
   }
   

4. The application page appears as follows:

   

Next Steps

Load a Report and Restore the Data Connection

Topic describes how to load existing reports with greater control over data connections and report parameters: How to Load a Report and Restore the Data Connection.

Specify Report Parameters

Topic describes how to specify report parameters using the built-in Parameters Panel or create custom UI elements and use them to submit parameter values to the report.

Report Viewer Customization

Topic describes how to specify the Viewer’s properties and handle its events to adjust the Report Viewer appearance and behavior.

Troubleshooting

Topic lists common issues that can occur in a Web Reporting application and describes solutions. For information on how to identify the cause of an issue, refer to the following topic: Reporting Application Diagnostics.