Create and View Reports in an ASP.NET Core Blazor Application

• Mar 11, 2026
• 3 minutes to read

This topic describes how to create and view a report at runtime in an ASP.NET Core Blazor application.

Note

ASP.NET Core Blazor Report Designer supports only desktop browsers.

Prerequisites

The Reports V2 module is installed for your XAF ASP.NET Core Blazor application. If not, add the Reports V2 module to your application.

Limitations

In ASP.NET Core Blazor Report Designer, you cannot create reports that use ViewDataSource. New reports use CollectionDataSource.

Copy a Predefined Report

1. Select a predefined report in the Reports List View.

2. Click the Copy Predefined Report button.

   

3. Select the created copy and modify the report.

Create a New Report from Scratch

To create a report at runtime, follow these steps:

1. Choose the Reports item in the Navigation.
2. Click New.

3. In the Report Wizard dialog that opens, specify the following and click Next.

   • Display Name - the report’s name.
   • Data Type - the business object type to be used in the report. Only the types that have the DefaultClassOptionsAttribute or VisibleInReportsAttribute attribute applied can be selected.

   

4. Select the report type.

   

5. Follow the wizard’s prompts to specify report columns and other settings.

   

6. Click the Finish button to display the new report in the Report Designer where you can access advanced report layout customization options.

   

This adds the data source component and sets its ObjectTypeName property to the business object type selected on the first page of the Report Wizard.

When the VisibleInReports attribute is applied to a business class property, it specifies whether the target property is visible in the Report Designer field list. In the Report Designer, you can modify the existing field layout and add more fields.

After a report is saved in the designer, it is added to the Reports List View. You can click a report to preview it.

Add a New Data Source

You can add a new data source in the Report Wizard.

1. In the Report Wizard, select Add Data Source from the side menu.

   

2. Select the CollectionDataSource type and click Next.

   

3. Choose an existing business class that you want to use in this Collection Data Source. Click Finish to open the report in Report Designer.

Alternatively, you can add a new data source in the Report Designer. The option is available in the Report Designer’s menu.

Display a Report in a Popup Window

XAF Blazor ReportsV2 module displays the Report Designer and the Report Preview window in the root Detail View. Set the ReportsBlazorModuleV2.DesignAndPreviewDisplayMode property to Popup if you want to keep the current view visible while designing/previewing reports.

File: SolutionName.Blazor.Server/Startup.cs

C#

using DevExpress.ExpressApp.ApplicationBuilder;
using DevExpress.ExpressApp.Blazor.ApplicationBuilder;
using DevExpress.ExpressApp.Blazor.Services;
using DevExpress.ExpressApp.ReportsV2.Blazor;

namespace SolutionName.Blazor.Server;

public class Startup {
    // ...
    public void ConfigureServices(IServiceCollection services) {
        // ...
        services.AddXaf(Configuration, builder => {
            // ...
            builder.Modules
                // ...
                .AddReports(options => {
                    options.DesignAndPreviewDisplayMode = DesignAndPreviewDisplayModes.Popup;
                    options.EnableInplaceReports = true;
                    options.ReportDataType = typeof(DevExpress.Persistent.BaseImpl.EF.ReportDataV2);
                    options.ReportStoreMode = DevExpress.ExpressApp.ReportsV2.ReportStoreModes.XML;
                });
            // ...
        });
        // ...
    }
}

By design, XAF ASP.NET Core Blazor ReportsV2 module shows In-Place Reports from a nested list view in a popup.