Add a Native Report Viewer to a Project (Blazor Application Created with .NET CLI)
- 4 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:
Prerequisites
Create a New Project
Create a new Blazor server app as described in the Microsoft Blazor Tutorial. 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 24.2.3 --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 following methods in the Program.cs file:
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();Apply a theme in the Components/App.razor project file.
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
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 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.
Create the Reports folder in the wwwroot project folder and copy the ProductListReport.repx file to the Reports folder.
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:
{ // ... "connectionStrings": { "NWindConnectionString": "XpoProvider=SQLite;Data Source=Data\\nwind.db" } }Install the
System.Data.SQLiteorMicrosoft.Data.SqliteNuGet package to use the SQLite database.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.
@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")); } } }The application page appears as follows:
Next Steps
- Load a Report and Restore the Data Connection
- Topic describes how to load existing reports with more 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.