Create a Blazor Report Viewer (Native) Application

• Oct 08, 2021
• 4 minutes to read

Prerequisites

1. Install the .NET 5.0 SDK.
2. Install Visual Studio 2019 (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 v21.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.

   

   For more information on templates used to create a Blazor project, review the following help topic: Install Components and Create an Application.

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 21.1 Local package source, and install the DevExpress.Blazor.Reporting.Viewer NuGet package.

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

   

3. Build the project.

Register DevExpress Components

Call the AddDevExpressNativeBlazorReporting method to add services. Call the MapControllers method to specify endpoint routing.

Add the following lines to the Startup.cs file:

Startup.cs

using Microsoft.AspNetCore.Builder;
using Microsoft.AspNetCore.Hosting;
using Microsoft.Extensions.DependencyInjection;
using DevExpress.Blazor.Reporting.Extensions;
// ...
    public class Startup
    {
        // ...
        public void ConfigureServices(IServiceCollection services)
        {
            services.AddRazorPages();
            services.AddServerSideBlazor();
            // ...
            services.AddDevExpressServerSideBlazorReportViewer();
            services.AddControllers()
                .AddDevExpressServerSideBlazorReportViewerControllers();
        }

        public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
        {
            // ...
            app.UseDevExpressServerSideBlazorReportViewer();
            // ...
            app.UseEndpoints(endpoints =>
            {
                endpoints.MapBlazorHub();
                endpoints.MapFallbackToPage("/_Host");
                endpoints.MapControllers();
            })
        }
        // ...
    } 

Add Report Viewer

1. Create a new Viewer.razor page.
2. Add links to the DevExpress Blazor stylesheets.
3. Add the <DxReportViewer>…</DxReportViewer> markup.

The page has the following content:

Viewer.razor

@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 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.

   Show Visual Guide

   
   

4. When you finish the Report Wizard, the TestReport.vsrepx file is added to the project. The Visual Studio Report Designer opens the newly created report. Change the Date field format:

   

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.

Viewer.razor

@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

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