Add a Report Viewer to a Blazor Web App (Microsoft CLI Template)
- 4 minutes to read
The tutorial integrates DxReportViewer into a Blazor Web App with the rendermode option set to InteractiveServer.
Prerequisites
Create a New Project
Create a new Blazor server app. Run the following command:
dotnet new blazor -n BlazorReportViewerApp --no-httpsNavigate to the created directory:
cd BlazorReportViewerApp
Install the NuGet Packages
Install the following NuGet package:
DevExpress.Blazor.Reporting.Viewer
Navigate to the DevExpress NuGet Gallery, click Obtain Feed URL and copy the URL. Run the following command (replace asterisks with the actual symbols from your feed URL):
dotnet add package DevExpress.Blazor.Reporting.Viewer --version 25.2.4 --source "https://nuget.devexpress.com/{Your feed authorization key}/api/v3/index.json"Refer to the following topic for more information: Install NuGet Packages with Command Line Interface (CLI) Tools.
Register DevExpress Resources
In the _Imports.razor file, register the DevExpress.Blazor namespace:
@using DevExpress.BlazorRegister scripts required by DevExpress components: open the App.razor file and call the DxResourceManager.RegisterScripts method.
<head> @*...*@ @DxResourceManager.RegisterScripts() @*...*@ </head>Register the services required for Blazor Reporting, and specify endpoint routing. For this, call the AddDevExpressServerSideBlazorReportViewer method in the Program.cs file:
using Microsoft.AspNetCore.Components; using Microsoft.AspNetCore.Components.Web; // ... var builder = WebApplication.CreateBuilder(args); // ... builder.Services.AddDevExpressServerSideBlazorReportViewer(); builder.WebHost.UseWebRoot("wwwroot"); builder.WebHost.UseStaticWebAssets(); var app = builder.Build(); // ... app.Run();Apply a theme in the Components/App.razor project file.
Classis Blazing Berry Theme
<head> @*...*@ @DxResourceManager.RegisterTheme(Themes.BlazingBerry) <link rel="stylesheet" href="_content/DevExpress.Blazor.Reporting.Viewer/css/dx-blazor-reporting-components.bs5.css"> </head>Fluent Light Blue Theme
<head> @*...*@ @DxResourceManager.RegisterTheme(Themes.Fluent) <link rel="stylesheet" href="_content/DevExpress.Blazor.Reporting.Viewer/css/dx-blazor-reporting-components.fluent.css"> </head>
For additional information on themes, refer to the following help topic: Themes in Blazor Report Viewer.
Add a Report Viewer to the Page
Create a new file (ReportViewer.razor) in the Pages folder.
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.
Use the following code to generate a page with a Report Viewer component:
@page "/Viewer" @rendermode InteractiveServer @using DevExpress.Blazor.Reporting <h3>Report Viewer</h3> <DxReportViewer @ref="reportViewer"> </DxReportViewer> @code { DxReportViewer? reportViewer; }Add a navigation link to the NavMenu.razor page:
<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
Type the following command in the command prompt in the application folder to run the application:
dotnet watch runWhen 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.
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.
Name the report TestReport.cs and click Add.
Select Blank in the invoked Report Wizard page and click Finish.
Modify the newly created report in the Visual Studio Report Designer. Add a label and type Hello, World!:
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.
Pass the Report to the Viewer
Specify the report that the Report Viewer displays in the ReportViewer.razor page:
@page "/viewer" @rendermode InteractiveServer @using DevExpress.Blazor.Reporting @using DevExpress.XtraReports.UI; <h3>Viewer</h3> <link href="_content/DevExpress.Blazor.Themes/blazing-berry.bs5.min.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(); }Run the project and see the result.
Next Steps
- Load a Report
- Topic describes how to load predefined reports and load reports from REPX files.
- Restore Data Connections
- Topic describes how to implement a service that resolves a SQL/JSON connection name to a valid 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.
- Customize the Report Viewer
Review the following topics for information on how to customize the UI:
- 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.