Add a Report Viewer to a Blazor Web App (Microsoft CLI Template)

• Feb 09, 2026
• 4 minutes to read

The tutorial integrates DxReportViewer into a Blazor Web App with the rendermode option set to InteractiveServer.

Prerequisites

• .NET 8.0 or later SDK.

Create a New Project

1. Create a new Blazor server app. Run the following command:

2. Navigate to the created directory:

Install the NuGet Packages

1. Install the following NuGet package:

Register DevExpress Resources

1. In the _Imports.razor file, register the DevExpress.Blazor namespace:

2. Register scripts required by DevExpress components: open the App.razor file and call the DxResourceManager.RegisterScripts method.

3. Register the services required for Blazor Reporting, and specify endpoint routing. For this, call the AddDevExpressServerSideBlazorReportViewer method in the Program.cs file:

4. Apply a theme in the Components/App.razor project file.

Add a Report Viewer to the Page

1. Create a new file (ReportViewer.razor) in the Pages folder.

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

Run the Project

1. Type the following command in the command prompt in the application folder to run the application:

2. When the browser opens the application, navigate to the Report Viewer page:

Load a Report

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

Create a New Report

To perform this step, you should install DevExpress Reporting v25.2 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.25.2 Report item template.

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… :

Pass the Report to the Viewer

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

2. Run the project and see the result.

Next Steps

Load a ReportTopic describes how to load predefined reports and load reports from REPX files.Restore Data ConnectionsTopic describes how to implement a service that resolves a SQL/JSON connection name to a valid connection.Specify Report ParametersTopic 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.Customize the Report Viewer

Review the following topics for information on how to customize the UI:

• Customize Parameter Editors
• Customize the Report Viewer Toolbar
• Customize the Report Viewer Tab Panel

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