Skip to main content
All docs
V24.2

DevExpress v24.2 Update — Your Feedback Matters

Our What's New in v24.2 webpage includes product-specific surveys. Your response to our survey questions will help us measure product satisfaction for features released in this major update and help us refine our plans for our next major release.

Take the survey Not interested

Migrate ASPxReportDesigner from Web Forms to ASP.NET Blazor

  • 4 minutes to read

You can migrate an ASPxReportDesigner customization to a new .NET application. The component uses HTML/JavaScript and shares core functionality across different web frameworks - the client-side API is the same regardless of the platform, allowing you to migrate the customization code to a new app with minimal adjustments. The custom implementation of Document Designer’s services can also be migrated to a new application because interface implementation is similar in all web frameworks.

#Prerequisites

You may require additional packages to run our Reporting components on Linux or iOS: Use Reporting on Linux.

Important

In .NET 8, the System.Drawing.Common library is compatible with Windows only. An exception is thrown on other platforms. See the following topic for more information: Reporting .NET/.NET Core Limitations.

#Create an ASP.NET Blazor Application

Create a New ASP.NET Blazor Project. Use Visual Studio or the .NET CLI to create a new project:

console
dotnet new blazor -o AspNetBlazorReportDesigner

#Install the DevExpress NuGet Packages

Install NuGet packages for Blazor Reporting:

  1. Select ToolsNuGet Package ManagerManage NuGet Packages for Solution.

  2. In the invoked dialog, open the Browse tab, and install the following NuGet packages:

    • DevExpress.Blazor
    • DevExpress.Blazor.Reporting.JSBasedControls
    • DevExpress.AspNetCore.Reporting

    The DevExpress 24.2 Local package is automatically added as a package source to your NuGet configuration files if you used the DevExpress .NET Product Installer.

    Getting Started - Install Package

  3. Build the project.

#Configure Services on Startup (Program.cs)

All Web Report Designer services you register in DefaultReportDesignerContainer for an ASP.NET Web Forms app can be registered in the built-in DI container in ASP.NET Blazor applications. You can parameterize and inject other services within the constructors of Document Designer-specific services (for example, IHttpContextAccessor). You do not need to update the signature and definition of services that exist in your legacy ASP.NET Web Forms app. You can copy the implementation of your custom services to your new application as-is. You can use the dependency-injection concept for all migrated services.

The following code snippet registers the IWebDocumentViewerReportResolver service:

ASP.NET Web Forms
using DevExpress.XtraReports.Web.WebDocumentViewer;
// ...
void Application_Start(object sender, EventArgs e) {
    DefaultReportDesignerContainer.Register<IWebDocumentViewerReportResolver, CustomWebDocumentViewerReportResolver>();
// ...    
}
ASP.NET Blazor
using DevExpress.XtraReports.Web.Extensions;
// ...
var builder = WebApplication.CreateBuilder(args);
builder.Services.AddSingleton<IWebDocumentViewerReportResolver, CustomWebDocumentViewerReportResolver>();    
// ... 
var app = builder.Build();

The following code snippet references services required by DevExpress Reporting:

using DevExpress.Blazor.Reporting;
using DevExpress.XtraReports.Web.Extensions;

var builder = WebApplication.CreateBuilder(args);
builder.Services.AddMvc();
builder.Services.AddDevExpressBlazorReporting();
// ...
builder.Services.ConfigureReportingServices(configurator => {
    configurator.ConfigureReportDesigner(designerConfigurator => {
    });
    configurator.ConfigureWebDocumentViewer(viewerConfigurator => {
        viewerConfigurator.UseCachedReportSourceBuilder();
    });
});

var app = builder.Build();
app.UseRouting();
app.UseDevExpressBlazorReporting();
app.UseDevExpressControls();
app.UseEndpoints(endpoints => {
    endpoints.MapControllers();
});

app.Run();

#Migrate Controller Logic

ASP.NET Web Forms applications can process designer requests by HTTP handlers registered in the “web.config” file. This option is no longer available. Create the ReportDesignerController controller for ASP.NET Blazor.

ASP.NET Blazor Controller
using DevExpress.AspNetCore.Reporting.ReportDesigner;
using DevExpress.AspNetCore.Reporting.ReportDesigner.Native.Services;
// ...
public class CustomReportDesignerController : ReportDesignerController {
public CustomReportDesignerController(IReportDesignerMvcControllerService controllerService)
    : base(controllerService) { 
        public override Task<IActionResult> Invoke() {
        return base.Invoke();
        }
    }
}

#Add a Report

The .cs and .repx reports are cross-platform and can be reused in any platform reporting application. Refer to the following topic for information on how to prepare reports for migration: Migrate DevExpress Reports to .NET Applications.

#Adjust Views

The following code sample that displays the Report Designer and loads the TestReport (the using directive is correct if the TestReport is created in the Reports folder):

Web Forms Markup
<asp:Content ID="Content" ContentPlaceHolderID="MainContent" runat="server">
    <dx:ASPxReportDesigner ID="ASPxReportDesigner1" runat="server" ReportSourceId="WebFormsExample.Reports.TestReport">
    </dx:ASPxReportDesigner>
</asp:Content>
ASP.NET Blazor View
@page "/reportdesigner"
@using AspNetBlazorReportDesigner.Reports

<DxReportDesigner ReportName="TestReport" Height="1000px" Width="100%">
    <DxReportDesignerCallbacks BeforeRender="onBeforeRender" />
</DxReportDesigner>

#Migrate Client-Side Customization

To handle Client-Side events use the DxReportDesignerCallbacks object members. Check the following documentation for more details on how to use Client-Side API in ASP.NET Blazor application: Customization - Report Designer for Blazor Server.

Web Forms Markup
<asp:Content ID="Content" ContentPlaceHolderID="MainContent" runat="server">
    <dx:ASPxReportDesigner ID="ASPxReportDesigner1" runat="server" ReportSourceId="WebFormsExample.Reports.TestReport" >
       <ClientSideEvents BeforeRender="onbeforeRender"/>
    </dx:ASPxReportDesigner>
</asp:Content>
ASP.NET Blazor View
@page "/reportdesigner"

@using AspNetBlazorReportDesigner.Reports

<DxReportDesigner ReportName="TestReport" Height="1000px" Width="100%">
    <DxReportDesignerCallbacks BeforeRender="onBeforeRender" />
</DxReportDesigner>

Note some functionality specific for the ASP.NET Blazor platform:

  1. The Init event no longer exists in ASP.NET Blazor. You can rewrite your customization logic using the BeforeRender event.

  2. ASP.NET Blazor uses callbacks that have only one handler. You cannot use a subscription with the AddHandler method.