DevExpress JavaScript-Based Reporting Components (Blazor WebAssembly Apps with ASP.NET Core Backend)

This package includes DevExpress JavaScript-Based Components for Blazor Reporting. These components are built on top of DevExtreme JavaScript widgets, require an ASP.NET Core backend with MVC controllers, and communicate with the server via Fetch API.

Install this package in the client project and pair it with DevExpress.AspNetCore.Reporting in the main project to handle report generation on the backend.

Included Components

• Document Viewer (DxWasmDocumentViewer): Displays an interactive document preview generated from a DevExpress Report. The Document Viewer allows users to preview data, change report parameters, print, and export the resulting document.
• End-User Report Designer (DxWasmReportDesigner): Allows users to create and modify reports using a drag-and-drop interface. Supports various data source types. Includes a fully functional Document Viewer to preview and export reports.
• Standalone Report Parameters Panel (DxWasmReportParametersPanel): A panel with report parameter editors. Use this component to submit report parameter values, programmatically create a report based on the specified values, and then export or email it without displaying a preview to users.

Examples

Example 1: Add a Document Viewer to a Blazor WebAssembly Hosted App

1. Install the following package in the Client project:

   dotnet add package DevExpress.Blazor.Reporting.JSBasedControls.WebAssembly
   

2. Install the following package in the main project:

   dotnet add package DevExpress.AspNetCore.Reporting
   

3. Register DevExpress Resources.

4. Implement a Document Viewer Controller.

5. Implement a Report Name Resolution Service.

6. Create a Sample Report.

7. Add a DxWasmDocumentViewer component to a Razor page in the client project:

   @page "/viewer"
   
   <DxWasmDocumentViewer ReportName="TestReport" Height="700px" Width="100%">
       <DxDocumentViewerExportSettings UseSameTab="false">
   
       </DxDocumentViewerExportSettings>
       <DxWasmDocumentViewerRequestOptions InvokeAction="DXXRDV">
       </DxWasmDocumentViewerRequestOptions>
   </DxWasmDocumentViewer>
   

Example 2: Add an End-User Report Designer to a Blazor WebAssembly Hosted App

1. Install the following package in the Client project:

   dotnet add package DevExpress.Blazor.Reporting.JSBasedControls.WebAssembly
   

2. Install the following package in the main project:

   dotnet add package DevExpress.AspNetCore.Reporting
   

3. Register DevExpress Resources.

4. Implement Reporting Controllers.

5. Create a Sample Report.

6. Implement a Report Storage.

7. Add a DxWasmReportDesigner component to a Razor page in the client project:

   @page "/designer"
   @using DevExpress.Blazor.Reporting
   @rendermode InteractiveWebAssembly
   
   <DxWasmReportDesigner ReportName="TestReport" Height="700px" Width="100%" DevelopmentMode=true>
       <DxWasmReportDesignerRequestOptions GetDesignerModelAction="DXXRD/GetReportDesignerModel">
       </DxWasmReportDesignerRequestOptions>
   </DxWasmReportDesigner>
   

Example 3: Add a Standalone Report Parameters Panel to a Blazor WebAssembly Hosted App

1. Install the following package in the Client project:

   dotnet add package DevExpress.Blazor.Reporting.JSBasedControls.WebAssembly
   

2. Install the following package in the main project:

   dotnet add package DevExpress.AspNetCore.Reporting
   

3. Register DevExpress Resources.

4. Implement Controllers.

5. Add a Sample Report.

6. Add a Report Resolution Service.

7. Add a DxWasmReportParametersPanel component to a Razor page in the client project:

   @page "/panel"
   @rendermode InteractiveWebAssembly
   @using DevExpress.Blazor.Reporting
   
   <DxWasmReportParametersPanel ReportName="TestReport" Height="1000px" Width="650px">
       <DxWasmReportParametersPanelRequestOptions InvokeAction="DXXRDV">
       </DxWasmReportParametersPanelRequestOptions>
   </DxWasmReportParametersPanel>
   

Evaluation Period, Pricing Options, and Licensing Terms

Whether you own a license or want to start a 30-day evaluation, download and register your DevExpress license key. To obtain your key, sign in to the DevExpress Download Manager with an existing DevExpress.com account or create a free account. For key registration instructions, see License Key for DevExpress Products.

If you purchase a license after evaluating a product, re-register your updated DevExpress license key to remove evaluation warnings and messages.

This package is included in the following commercial subscriptions:

• DevExpress Reporting Subscription
• DevExpress ASP.NET Subscription
• DevExpress DXperience Subscription
• DevExpress Universal Subscription

See DevExpress Subscriptions & Licensing for subscription comparison tables, purchasing FAQ, and licensing information.

Related Components/Packages

DevExpress.Blazor.Reporting.JSBasedControls — JavaScript-based DevExpress Reporting Components for Blazor applications (DxDocumentViewer, DxReportDesigner, and DxReportParametersPanel). These components support Interactive Server and Interactive WebAssembly render modes and can be used in Blazor WebAssembly Standalone apps.

dotnet add package DevExpress.Blazor.Reporting.JSBasedControls

DevExpress.Blazor.Reporting.Viewer — DevExpress Report Viewer (DxReportViewer). This is a native Blazor component.

dotnet add package DevExpress.Blazor.Reporting.Viewer

DevExpress.AIIntegration.AspNetCore.Reporting — AI-powered Summarize, Translate, Prompt-to-Report, Prompt-to-Expression, Localization, and Test Data extensions for the Document Viewer and Report Designer. Install this package alongside DevExpress.AspNetCore.Reporting in the server project.

dotnet add package DevExpress.AIIntegration.AspNetCore.Reporting

Documentation

• Blazor Reporting Overview
• JavaScript-Based Document Viewer
• JavaScript-Based Report Designer
• JavaScript-Based Standalone Report Parameters Panel

Software Bill of Materials (SBOM)

To access SBOM files for DevExpress packages, please refer to the following article: Software Bill of Materials (SBOM) for DevExpress .NET assemblies/NuGet packages, JavaScript, VCL and other redistributable artifacts.

See Also: Information Security | Security - What You Need to Know

Useful Online Resources

• www.devexpress.com
• DevExpress Support Center
• DevExpress Blogs