Blazor Reporting — Upcoming Features (v22.2) — Report Viewer for WebAssembly (ASP.NET Core Hosted)

Reporting Team Blog
13 September 2022
The information contained within this blog post details our current/projected development plans. Please note that this information is being shared for INFORMATIONAL PURPOSES ONLY and does not represent a binding commitment on the part of Developer Express Inc. This blog post and the features/products listed within it are subject to change. You should not rely or use this information to help make a purchase decision about Developer Express Inc products.

As you may already know, DevExpress Reports has been part of our Blazor distribution for a couple of years. Blazor-specific report components include our Blazor Report Viewer (unique because it is a native Blazor component) and two JavaScript-based Blazor server components: the DevExpress Document Viewer for Blazor (JS) and the DevExpress Report Designer for Blazor (JS).

Though our JS-based report components can be integrated into ASP.NET Core hosted Blazor WebAssembly applications (via JavaScript Interoperability), we decided to create new platform-specific components. Specifically, we decided to create Blazor WebAssemby wrappers for our JS-based controls to minimize implementation costs and reduce support inquiries.

Our server and WASM components will be named differently. Different names should reduce confusion and will make it easier to diagnose issues should they arise

The current DevExpress Reports distribution includes the following components: DxReportViewer, DxDocumentViewer and DxReportDesigner components. The new components will be named as follows:

  • DxWasmDocumentViewer
  • DxWasmReportDesigner

Our new WASM components will be delivered as part of the following Nuget package: DevExpress.Blazor.Reporting.JSBasedControls.WebAssembly. Like other DevExpress Blazor Report components, these new components will require a server backend (customizable via parameters and JavaScript function calls).

The benefit of the Reporting Blazor WASM components is the much easier integration of DevExpress Reports into existing Blazor WebAssembly (ASP.NET Core hosted) applications.

Integration Details

A DevExpress-powered Blazor WASM reporting application consists of a backend application that stores and processes reports/documents and a client application.

Backend App

An ASP.NET Core app that implements server-side controller actions for reporting components. For Report Designer, declare the GetReportDesignerModel method to set up the component and pass seralized client-side settings to a result model:


 public class CustomWebDocumentViewerController : WebDocumentViewerController {
     public CustomWebDocumentViewerController(IWebDocumentViewerMvcControllerService controllerService) : base(controllerService) {
     }
 }
    
public class CustomReportDesignerController : ReportDesignerController {
     public CustomReportDesignerController(IReportDesignerMvcControllerService controllerService) : base(controllerService) {
     }

     [HttpPost("[action]")]
     public object GetReportDesignerModel(
         [FromForm] string reportUrl,
         [FromForm] ReportDesignerOptionsBase options,
         [FromServices] IReportDesignerClientSideModelGenerator designerClientSideModelGenerator) {
         Dictionary dataSources = new Dictionary();
         SqlDataSource ds = new SqlDataSource("NWindConnectionString");
         dataSources.Add("sqlDataSource1", ds);
         
         ReportDesignerModel model;
         
         	if(string.IsNullOrEmpty(reportUrl))
                model = designerClientSideModelGenerator.GetModel(new XtraReport(), dataSources, "/DXXRD", "/DXXRDV", "/DXXQB");
            else
                model = designerClientSideModelGenerator.GetModel(reportUrl, dataSources, "/DXXRD", "/DXXRDV", "/DXXQB");
                
         model.WizardSettings.EnableSqlDataSource = true;
         model.Assign(options);
         
         var modelJsonScript = designerClientSideModelGenerator.GetJsonModelScript(model);
         return Content(modelJsonScript, "application/json");
     }
 }

Client App

A client application must specify Request Options - settings that specify how to process requests from the client component on the server side.

The following code declares the DxWasmDocumentViewer component on the page:


@page "/viewer"

<DxWasmDocumentViewer ReportUrl="Report1" Height="1000px" Width="100%">
	<DxDocumentViewerExportSettings UseSameTab=false></DxDocumentViewerExportSettings>
	<DxWasmDocumentViewerRequestOptions InvokeAction="DXXRDV"></DxWasmDocumentViewerRequestOptions>
</DxWasmDocumentViewer>

The Designer component needs a custom server action that returns a report model with all required report data, parameters, and settings. The following code declares the DxWasmReportDesigner component on the page:


@page "/designer"

<DxWasmReportDesigner ReportUrl="Report1" Height="1000px" Width="100%" AllowMDI="true">
	<DxWasmReportDesignerRequestOptions GetDesignerModelAction="DXXRD/GetReportDesignerModel">
	</DxWasmReportDesignerRequestOptions>
    <DxReportDesignerWizardSettings UseFullscreenWizard=false />
</DxWasmReportDesigner>

Your Feedback Matters

Please share your thoughts about v22.2-related plans described in this post (new Blazor WASM components).

Free DevExpress Products - Get Your Copy Today

The following free DevExpress product offers remain available. Should you have any questions about the free offers below, please submit a ticket via the DevExpress Support Center at your convenience. We'll be happy to follow-up.