Create Blazor Report Viewer Application from DevExpress Template

• Jun 05, 2022
• 5 minutes to read

Prerequisites

1. Install the .NET 6.0 SDK.
2. Install Visual Studio 2022 (latest version) with the ASP.NET and web development workload.
3. Use the DevExpress .NET Product Installer to install DevExpress Blazor components.

When you use the DevExpress .NET Product Installer to install Blazor components, the DevExpress Template Gallery automatically appears in Visual Studio’s New Project menu. The Gallery contains DevExpress Blazor project templates.

Create a New Blazor Application

Perform the following steps to create a sample Blazor application in Visual Studio:

1. Click Create a new project on Visual Studio’s start page and select the DevExpress v22.1 Blazor App Template Gallery.

   

   Click Next.

2. Specify the project name and location.

   

   Click Create.

3. Select the Blazor Server Application.

   

   Click Run Wizard.

4. The DevExpress Blazor Project Wizard allows you to select a theme to change the appearance of all components, and specify the culture used to localize UI elements. Click Create Project.

   

The Server Application template creates a project that includes the following:

• References to the DevExpress Blazor NuGet package and DevExpress resources
• The DevExpress Blazing Berry theme
• Sidebar navigation based on the TreeView component
• The Data Grid component

Install the DevExpress Blazor Reporting NuGet Package

1. Right-click the Dependencies node in the Solution Explorer and select Manage NuGet Packages in the context menu.

2. In the invoked dialog, click the Browse tab, select the DevExpress 22.1 Local package source, and install the DevExpress.Blazor.Reporting.Viewer NuGet package.

   The DevExpress 22.1 Local package is automatically added as a package source to your NuGet configuration files if you use the DevExpress .NET Product Installer.

   

   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.

3. Build the project.

Register DevExpress Components

1. Call the following methods to register services and apply settings specific to DevExpress:

   • AddDevExpressServerSideBlazorReportViewer method
   • UseDevExpressServerSideBlazorReportViewer method
   • MapControllers method to specify endpoint routing.

   Add the following lines to the Program.cs file:

   Program.cs

   using DxBlazorApplication1.Data;
   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.AddSingleton<WeatherForecastService>();
   builder.Services.Configure<DevExpress.Blazor.Configuration.GlobalOptions>(options => {
       options.BootstrapVersion = DevExpress.Blazor.BootstrapVersion.v5;
   });
   builder.Services.AddDevExpressServerSideBlazorReportViewer();
   builder.WebHost.UseWebRoot("wwwroot");
   builder.WebHost.UseStaticWebAssets();
   
   var app = builder.Build();
   app.UseDevExpressServerSideBlazorReportViewer();
   
   // Configure the HTTP request pipeline.
   if (!app.Environment.IsDevelopment())
   {
       app.UseExceptionHandler("/Error");
   
       app.UseHsts();
   }
   app.UseHttpsRedirection();
   
   app.UseStaticFiles();
   
   app.UseRouting();
   
   
   app.MapBlazorHub();
   app.MapFallbackToPage("/_Host");
   app.MapControllers();
   
   app.Run(); 
   

Implement the Export Controller

1. In Visual Studio, create a new Controllers folder.

2. Add a new class file ReportingControllers.cs with the following content:

   Controllers/ReportingControllers.cs

   using DevExpress.Blazor.Reporting.Controllers;
   using DevExpress.Blazor.Reporting.Internal.Services;
   
   public class DownloadExportResultController : DownloadExportResultControllerBase {
       public DownloadExportResultController(ExportResultStorage exportResultStorage) : 
           base(exportResultStorage) {
       }
   }
   

Add Report Viewer

1. Create a new Viewer.razor page in the Pages folder.
2. Add links to the DevExpress Blazor stylesheets.

3. Add the <DxReportViewer>…</DxReportViewer> markup.

   The following code illustrates how to add a Report Viewer:

   Pages/Viewer.razor

   @page "/viewer"
   
   @using DevExpress.Blazor.Reporting
   
   <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">
   </DxReportViewer>
   
   @code {
       DxReportViewer? reportViewer;
   }
   

Add Navigation Link

1. Add a navigation link to the Shared/NavMenu.razor page:

   Shared/NavMenu.razor

   <div class="sidebar @StateCssClass">
   
   <DxTreeView AllowSelectNodes="true" CssClass="app-sidebar">
       <Nodes>
           <DxTreeViewNode NavigateUrl="./" Text="Overview"></DxTreeViewNode>
           <DxTreeViewNode NavigateUrl="datagrid" Text="Data Grid"></DxTreeViewNode>
           <DxTreeViewNode NavigateUrl="viewer" Text="Report Viewer"></DxTreeViewNode>
       </Nodes>
   </DxTreeView>
   </div>
   
   @code {
       [Parameter] public string StateCssClass { get; set; }
   }
   

2. Run the project.

3. Click the hamburger menu in the upper left corner and Select Report Viewer. The page displays the Report Viewer component:

   

Add a Report to the Project

1. In Visual Studio, create a new Reports folder.
2. Press Ctrl+Shift+A or select PROJECT | Add New Item… in the main menu.

3. Select the DevExpress Report item and proceed to the Report Wizard to create the TestReport.cs file.

   Show Visual Guide

   

4. 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’:

   

Specify a Report to View and Assign a Data Source

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.

Pages/Viewer.razor

@page "/viewer"

@using DevExpress.Blazor.Reporting
@using DevExpress.XtraReports.UI;

@using DxBlazorApplication1.Data
@inject WeatherForecastService ForecastService

<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; }
    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

Run the project and see the result. The Report Viewer displays a tabular report with data from the WeatherForecastService data source.

View Example: Report Viewer for Blazor (native) - Getting Started