Create Blazor Report Viewer Application from Microsoft Blazor Template CLI
- 4 minutes to read
Tip
To create a Blazor Reporting application, use preconfigured DevExpress templates that allow you to create an application with minimal effort and maximum efficiency. For more information, review the following help topics:
Prerequisites
- Install the .NET 6.0 or later SDK.
Create an App with the Report Viewer
Create a new Blazor server app as described in the Microsoft Blazor Tutorial. Run the following command:
dotnet new blazorserver -o BlazorReportViewerApp --no-https --framework net6.0
Navigate to the created directory:
cd BlazorReportViewerApp
Install the DevExpress.Blazor.Reporting.Viewer NuGet package. For this, navigate to the DevExpress NuGet Gallery, click Obtain Feed URL and copy the URL, and run the following command (replace asterisks with the actual symbols from your feed URL):
dotnet add package DevExpress.Blazor --version 24.1.3 --source "https://nuget.devexpress.com/**************************************************/api" dotnet add package DevExpress.Blazor.Reporting.Viewer --version 24.1.3 --source "https://nuget.devexpress.com/**************************************************/api"
Register the DevExpress.Blazor namespace in the _Imports.razor file:
@using DevExpress.Blazor
Call the UseWebRoot and UseStaticWebAssets(IWebHostBuilder) methods in the
Program.cs
file to enable the application to load client-side resources:using Microsoft.AspNetCore.Components; using Microsoft.AspNetCore.Components.Web; var builder = WebApplication.CreateBuilder(args); // Add services to the container. builder.Services.AddRazorPages(); builder.Services.AddServerSideBlazor(); // ... builder.WebHost.UseWebRoot("wwwroot"); builder.WebHost.UseStaticWebAssets(); // ... var app = builder.Build(); // ...
Register the services required for Blazor Reporting, and specify endpoint routing. For this, call the following methods in the
Program.cs
file:- AddDevExpressBlazor
- AddDevExpressServerSideBlazorReportViewer
- MapControllers
The
Program.cs
file has the following content:using Microsoft.AspNetCore.Components; using Microsoft.AspNetCore.Components.Web; // ... var builder = WebApplication.CreateBuilder(args); // Add services to the container. builder.Services.AddRazorPages(); builder.Services.AddServerSideBlazor(); // ... 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(); // Configure the HTTP request pipeline. if (!app.Environment.IsDevelopment()) { app.UseExceptionHandler("/Error"); } app.UseStaticFiles(); app.UseRouting(); app.MapBlazorHub(); app.MapFallbackToPage("/_Host"); app.MapControllers(); app.Run();
Create a page with the Report Viewer component. To create this page, create a new file (Viewer.razor) in the Pages folder with the following content:
@page "/Viewer" @using DevExpress.Blazor.Reporting <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"> </DxReportViewer> @code { DxReportViewer? reportViewer; }
Add a navigation link to the Shared\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>
Type the following command in the command prompt in the application folder to run the application:
dotnet watch run
When the browser opens the application, navigate to the 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.
For this example, you can use the Report Wizard to create a new report and bind it to sample Northwind database. When you are prompted for the connection string name, enter “NWindConnectionString“.
Copy the
nwind.db
database to the project’s Data folder and add the connection string entry to theappsettings.json
file:{ // ... "connectionStrings": { "NWindConnectionString": "XpoProvider=SQLite;Data Source=Data\\nwind.db" } }
The
ProductListReport.repx
report layout file in this example 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.Add the code to the
Viewer.razor
page that loads a report from a file and assigns the report instance to the DxReportViewer.Report property. The resultingViewer.razor
file has the following content:@page "/Viewer" @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(), @"wwwroot\Reports\ProductListReport.repx")); return null; } } }
The application page appears as follows:
Next Steps
Use the technique described in the following help topic to load existing reports with greater control over data connections and report parameters: How to Load a Report and Restore the Data Connection.