Create Blazor Report Viewer Application from Microsoft Template .NET 6
- 7 minutes to read
Prerequisites
- Install the .NET 6.0 SDK.
- Install Visual Studio 2022 with the ASP.NET and web development workload.
1. Create a New Project
The steps below describe how to create a new Blazor project. If you want to add DevExpress Blazor components to an existing application, go to Step 2.
Click Create a new project on Visual Studio’s start page, select the Blazor Server App template, and click Next.
Specify the project name and location, and click Next.
Set the Framework to “.NET 6.0 (Long-term support)” and click Create.
2. Obtain Your NuGet Feed Credentials
You can obtain the feed authorization key from the NuGet feed URL found at the bottom of the Download Manager page or the URL on the DevExpress NuGet Gallery page.
Make sure your DevExpress account has access to Blazor UI Components. This product line is included in the Universal, DXperience, and ASP.NET subscriptions. Refer to the following page for more information: DevExpress Subscriptions.
Use your DevExpress credentials to log into nuget.devexpress.com.
Obtain your NuGet feed credentials and copy them to the clipboard.
You can find the same URL on the Download Manager page.
3. Install the DevExpress Blazor NuGet Packages
In Visual Studio, select Tools → NuGet Package Manager → Package Manager Settings.
Navigate to NuGet Package Manager → Package Sources. Click the plus sign 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
) if you use the feed key to authenticate. Otherwise, use the NuGet Feed URL (https://nuget.devexpress.com/{your feed authorization key}/api
).
Click OK.
Note
Make sure the
nuget.org
package source is also enabled.Select Tools → NuGet Package Manager → Manage NuGet Packages for Solution.
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
In the invoked dialog, open the Browse tab, and install the
DevExpress.Blazor
andDevExpress.Blazor.Reporting.Viewer
NuGet packages.Note
The
DevExpress.Blazor.Reporting.Viewer
NuGet package contains the Report Viewer native component for Blazor.The
DevExpress.Blazor.Reporting.JSBasedControls
NuGet package contains the Document Viewer and Report Designer JavaScript-based components.The
DevExpress.Blazor.Reporting
NuGet package contains all Blazor Reporting components - the Report Viewer, Document Viewer, and Report Designer. This is a legacy package for Blazor Reporting apps. Please use one of the packages mentioned above for new projects.- User name:
Build the project.
Refer to the following topic for more information: Setup Visual Studio's NuGet Package Manager.
4. Register DevExpress Resources
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(); // ...
Do the following to apply the DevExpress Blazing Berry bootstrap theme to the application:
- Navigate to the DevExpress Bootstrap Themes repository, select the Blazing Berry theme, and download the
bootstrap.min.css
file. - Copy the file to the wwwroot\css\bootstrap folder and replace the original
bootstrap.min.css
file with this new file. Open the
wwwroot\css\site.css
file and remove the following line that specifies the button background color:.btn-primary { color: #fff; background-color: #1b6ec2; border-color: #1861ac; }
- Navigate to the DevExpress Bootstrap Themes repository, select the Blazing Berry theme, and download the
Register the services required for Blazor Reporting, and specify endpoint routing. For this, call the following methods in the
Program.cs
file:- AddDevExpressBlazor
- AddDevExpressServerSideBlazorReportViewer
- UseDevExpressServerSideBlazorReportViewer
- 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(); builder.WebHost.UseWebRoot("wwwroot"); builder.WebHost.UseStaticWebAssets(); var app = builder.Build(); // Configure the HTTP request pipeline. if (!app.Environment.IsDevelopment()) { app.UseExceptionHandler("/Error"); } app.UseDevExpressServerSideBlazorReportViewer(); app.UseStaticFiles(); app.UseRouting(); app.MapBlazorHub(); app.MapFallbackToPage("/_Host"); app.MapControllers(); app.Run();
Explicitly implement the export controller that enables a user to print and export reports. To implement this controller, create a new Controllers folder and a new class file (
ReportingControllers.cs
) with the following content:using DevExpress.Blazor.Reporting.Controllers; using DevExpress.Blazor.Reporting.Internal.Services; public class DownloadExportResultController : DownloadExportResultControllerBase { public DownloadExportResultController(ExportResultStorage exportResultStorage) : base(exportResultStorage) { } }
Create a new file (Viewer.razor) in the Pages folder with the following content to generate a page with the Report Viewer component:
@page "/Viewer" @using DevExpress.Blazor.Reporting <h3>Viewer</h3> <link rel="stylesheet" href="_content/DevExpress.Blazor/dx-blazor.css"> <link rel="stylesheet" href="_content/DevExpress.Blazor.Reporting.Viewer/css/dx-blazor-reporting-components.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:
5. Load a Report
You can create a report class in the application and pass an instance of this class to the viewer. As an alternative, use the XtraReport.FromFile method to load a report from a file in REPX format, and pass a report instance to the viewer.
Create a New Report
- In Visual Studio, create a new
Reports
folder. - Press Ctrl+Shift+A or select PROJECT | Add New Item… in the main menu.
Select the DevExpress Report item and proceed to the Report Wizard to create the
TestReport.cs
file.
When you finish the Report Wizard, the
TestReport.cs
file is added to the project. The Visual Studio Report Designer opens the newly created report. Select the cell bound to the Date data source field, click the smart tag glyph at the top right corner of the control, and select the Format String editor to change the field format to ‘d, MMMM yyyy’:Initialize the data source, specify the report that the Report Viewer displays, and assign the data source to the report. The
Viewer.razor
page content is shown below.@page "/viewer" @using DevExpress.Blazor.Reporting @using DevExpress.XtraReports.UI; @using DxBlazorApplication1.Data @inject WeatherForecastService ForecastService <h3>Viewer</h3> <link rel="stylesheet" href="_content/DevExpress.Blazor/dx-blazor.css"> <link rel="stylesheet" href="_content/DevExpress.Blazor.Reporting.Viewer/css/dx-blazor-reporting-components.css"> <DxReportViewer @ref="reportViewer" Report="@Report"> </DxReportViewer> @code { DxReportViewer reportViewer { get; set; } XtraReport Report { get; set; } private WeatherForecast[] forecasts; protected override async Task OnInitializedAsync() { WeatherForecast[] forecasts = await ForecastService.GetForecastAsync(DateTime.Now); Report = new Reports.TestReport(); Report.DataSource = forecasts; } }
Run the project and see the result. The Report Viewer displays a tabular report with data from the
WeatherForecastService
data source:
Load a Report from a File
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 project and copy theProductListReport.repx
file to the Reports folder.The SQLite
nwind.db
database ships with the DevExpress installation. The default path to the database file is C:\Users\Public\Documents\DevExpress Demos 21.2\Components\Data\nwind.db. Copy thenwind.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" } }
Open the NuGet Package Manager and install the System.Data.SQLite.Core package.
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 rel="stylesheet" href="_content/DevExpress.Blazor/dx-blazor.css"> <link rel="stylesheet" href="_content/DevExpress.Blazor.Reporting.Viewer/css/dx-blazor-reporting-components.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")); } } }
Run the project. 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.