Skip to main content
A newer version of this page is available. .
All docs
V21.2

Create Blazor Report Viewer Application from Microsoft Template .NET 6

  • 7 minutes to read

Prerequisites

  1. Install the .NET 6.0 SDK.
  2. 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.

  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. Set the Framework to “.NET 6.0 (Long-term support)” 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 ToolsNuGet Package ManagerPackage Manager Settings.

    Getting Started - Package Manager Settings

  2. Navigate to NuGet Package ManagerPackage 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 ToolsNuGet Package ManagerManage 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. Register the DevExpress.Blazor namespace in the _Imports.razor file:

    @using DevExpress.Blazor
    
  2. 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();
    // ...
    
  3. Do the following to apply the DevExpress Blazing Berry bootstrap theme to the application:

    1. Navigate to the DevExpress Bootstrap Themes repository, select the Blazing Berry theme, and download the bootstrap.min.css file.
    2. Copy the file to the wwwroot\css\bootstrap folder and replace the original bootstrap.min.css file with this new file.
    3. 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;
      }
      
  4. Register the services required for Blazor Reporting, and specify endpoint routing. For this, call the following methods in the Program.cs file:

    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();
    
  5. 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) {
        }
    }
    
  6. 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;
    }
    
  7. 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>
    
  8. Type the following command in the command prompt in the application folder to run the application:

    dotnet watch run
    
  9. When the browser opens the application, navigate to the Viewer page:

    App from Microsoft Blazor Template with Empty DevExpress Report Viewer

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

  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

  5. 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;
        }
    }
    
  6. Run the project and see the result. The Report Viewer displays a tabular report with data from the WeatherForecastService data source:

    Blazor Reporting New Report Result

Load a Report from a File

  1. 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 the ProductListReport.repx file to the Reports folder.

  2. 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 the nwind.db database to the project’s Data folder and add the connection string entry to the appsettings.json file:

    {
        // ...
        "connectionStrings": {
            "NWindConnectionString": "XpoProvider=SQLite;Data Source=Data\\nwind.db"
        }
    }
    
  3. Open the NuGet Package Manager and install the System.Data.SQLite.Core package.

  4. 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 resulting Viewer.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"));
            }
        }
    }
    
  5. Run the project. The application page appears as follows:

    App from Microsoft Blazor Template with a Report

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.