Skip to main content
BuyLog In
.NET Reporting Tools
Search in…
Docs > Web Reporting > Blazor Reporting > Report Viewer (Native) > Quick Start > App from Microsoft Template (.NET 5.0)
All docs
V21.2
Reporting
Product Information
Get Started with DevExpress Reporting
Create Reports
Detailed Guide to DevExpress Reporting
Visual Studio Report Designer
WinForms Reporting
WPF Reporting
Web Reporting
General Information
Document Viewer
Mobile Viewer UI
Report Designer
ASP.NET Web Forms Reporting
ASP.NET MVC Reporting
ASP.NET Core Reporting
JavaScript Reporting
Blazor Reporting
Report Viewer (Native)
Quick Start
App from DevExpress Template
App from Microsoft Template (.NET 5.0)
App from Microsoft Template (.NET 6.0)
App from CLI (.NET 5.0)
App from CLI (.NET 6.0)
Load a Report and Restore the Data Connection
Interface Elements
Specify Parameter Values
Report Layout in Razor Markup
Report Designer and Document Viewer (JavaScript-Based)
Application Deployment
Client-Side API
Application Security
Accessibility
End-User Documentation
WinUI Reporting
WCF Report Service
Discontinued Platforms
Localize Reporting Applications
Redistribution and Deployment
API Reference
ASP.NET Core API Reference
Blazor API Reference
Client API Reference
Client API Reference (Web Forms & MVC)
Download CHM

Create Blazor Report Viewer Application from Microsoft Template .NET 5

  • 6 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.

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.

  1. Click Create a new project on Visual Studio’s start page, select the Blazor Server App template, and click Next.

    Getting Started - Create a New Project

  2. Specify the project name and location, and click Next.

    Getting Started - Configure a New Project

  3. Specify additional options, and click Create.

    **Blazor Server App**

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.

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

  2. Use your DevExpress credentials to log into nuget.devexpress.com.

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

  1. In Visual Studio, select Tools → NuGet Package Manager → Package Manager Settings.

    Getting Started - Package Manager Settings

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

    Getting Started - NuGet Feed API

    Note

    Make sure the nuget.org package source is also enabled.

  3. 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:

    In the invoked dialog, open the Browse tab, and install the DevExpress.Blazor and DevExpress.Blazor.Reporting.Viewer NuGet packages.

    Getting Started - Install Package

    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.

  4. Build the project.

Refer to the following topic for more information: Setup Visual Studio's NuGet Package Manager.

4. Register DevExpress Resources

  1. Add the following line to the Pages/_Host.cshtml file’s HEAD section: 

    <head>
    <!--...-->
    <link href="_content/DevExpress.Blazor/dx-blazor.css" rel="stylesheet" />
    <link href="_content/DevExpress.Blazor.Reporting.Viewer/css/dx-blazor-reporting-components.css" rel="stylesheet" />
</head>

  2. Register the DevExpress.Blazor namespace in the _Imports.razor file:

    @using DevExpress.Blazor

  3. DevExpress Blazor components use an RCL (Razor class library) with static assets to share resources. Call the UseStaticWebAssets method on the host builder in the Program.cs file to enable the application to load client-side resources. 

    public class Program {
    // ...

    public static IHostBuilder CreateHostBuilder(string[] args) =>
        Host.CreateDefaultBuilder(args)
            .ConfigureWebHostDefaults(webBuilder => {
                webBuilder.UseStartup<Startup>();
                webBuilder.UseStaticWebAssets();
            });
}

    Refer to the following topics for more information:

  4. Optional. Apply a DevExpress Bootstrap theme. We use the DevExpress Blazing Berry theme in our demos and documentation.

  5. The DevExpress.Blazor NuGet package automatically adds the AddDevExpressBlazor method to the project. This method is required to register the DevExpress Blazor services. You should check whether your project calls this method at startup (Startup.DevExpress.cs file).

  6. 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 Startup.cs file:

    // ...
    public class Startup {
        // ...
        public void ConfigureServices(IServiceCollection services) {
            services.AddRazorPages();
            services.AddServerSideBlazor();
            // ...
            services.AddDevExpressServerSideBlazorReportViewer();
        }

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

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:

    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 page has the following content:

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

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

    @* ... *@
<div class="@NavMenuCssClass" @onclick="ToggleNavMenu">
    <ul class="nav flex-column">
        @* ... *@
        <li class="nav-item px-3">
            <NavLink class="nav-link" href="viewer">
                <span class="oi oi-list-rich" aria-hidden="true"></span> Viewer
            </NavLink>
        </li>
    </ul>
</div>
@* ... *@

  2. Run the project.

  3. Select Viewer in the menu. The page displays the empty Report Viewer component:

    Blazor 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

    Blazor — Add a New Report
    Blazor Report Wizard — Select Type Blazor Report Wizard — Select Data Source Type Blazor Report Wizard — Select Assembly Blazor Report Wizard — Select Data Source Blazor Report Wizard — Select Data Schema Blazor Report Wizard — Select Fields

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

    Blazor Report — Change Date 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.

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

Blazor Reporting — Getting Started result