Add a JavaScript-Based Report Designer to a Blazor Web App (Interactive WebAssembly) with an ASP.NET Core Backend (Visual Studio)

• Feb 16, 2026
• 7 minutes to read

This tutorial adds a Report Designer (DxWasmReportDesigner) to an application created with the Blazor Web App (Interactive WebAssembly) template.

Create a New Project from a Template

This section describes how to create a new Blazor project. If you wish to start this tutorial using an existing application, go to Step 2.

1. Click Create a new project on Visual Studio’s start page and select the Blazor Web App template. Select WebAssembly from the Interactive Render Mode drop-down list.

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

3. Specify additional options and click Create.

You can use this tutorial to integrate the Standalone Report Parameters Panel into a Blazor WebAssembly Hosted (available in ASP.NET Core 7.0 or earlier) template.

For additional information on available Blazor templates, refer to the following help topic: Tooling for ASP.NET Core Blazor.

Install NuGet Packages

1. Install the following NuGet packages to the projects:

2. Build the project.

Register DevExpress Resources

1. In the Program.cs file of the main project, add the following code:

2. In the _Imports.razor file of the main project, register the DevExpress.Blazor namespace:

3. In the App.razor file of the main project, call the RegisterScripts(Action<ResourcesConfigurator>) method to register DevExpress client resources:

Implement Reporting Controllers

1. Create a Controllers folder in the main project.
2. In the created folder, add a new ReportingControllers.cs class file with the following content:

Create a Sample Report

Note

To perform this step, you should install DevExpress Reporting on your machine. Refer to the following topic for more information: Run the Installation Wizard - DevExpress Unified Component Installer.

1. Switch to the BlazorWasmReportingApp project. Select Project -> Add New Item… to invoke the Add New Item dialog. Navigate to the Reporting node and select the DevExpress v.25.2 Report item template.

2. Select Blank in the invoked Report Wizard page and click Finish.

3. Modify the newly created report in the Visual Studio Report Designer. Add a label and type Hello, World!:

4. Click the report’s smart tag and select Save… :

Implement a Report Storage

1. Implement the ReportStorageWebExtension descendant to save and load reports.

2. Add the ReportFactory.cs class file to the server project with the following code:

3. In the Program.cs file, register the ReportStorage service:

Create a Page With the Report Designer

In the BlazorWasmReportingApp.Client/Pages folder, create a new Razor component (ReportDesigner.razor) with the following content:

• Designer.razor

@page "/designer"
@using DevExpress.Blazor.Reporting
@rendermode InteractiveWebAssembly

<DxWasmReportDesigner ReportName="TestReport" Height="700px" Width="100%" DevelopmentMode=true>
    <DxWasmReportDesignerRequestOptions GetDesignerModelAction="DXXRD/GetReportDesignerModel">
    </DxWasmReportDesignerRequestOptions>
</DxWasmReportDesigner>

The DxWasmReportDesigner component loads the TestReport report.

Add Navigation Links

Modify the NavMenu.razor file to include links to the newly created page:

• NavMenu.razor

<div class="nav-item px-3">
    <NavLink class="nav-link" href="designer">
        <span class="oi oi-list-rich" aria-hidden="true"></span> Designer
    </NavLink>
</div>

Run the Project

Run the project and see the result. The Report Designer displays the TestReport:

Next Steps

Use Data Sources Learn how to use data sources in the JavaScript-based Report Designer.Customize the Report Designer UI and Behavior

Refer to the following topics to learn how to customize the Report Designer UI and behavior:

• Handle Client-Side Events
• Customize Report and Data Source Wizards
• Customize Toolbar and Menu
• Specify Parameter Editing Settings
• Enable Rich Text Editor
• Create and Register Custom Controls in Toolbox
• Add Custom Functions to Expression Editor

TroubleshootingThis topic lists common issues that can occur in a Web Reporting application and describes solutions. For information on how to identify the cause of an issue, refer to the following topic: Reporting Application Diagnostics.