Migrate ASPxWebDocumentViewer from Web Forms to ASP.NET Blazor
- 4 minutes to read
You can migrate ASPxWebDocumentViewer
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 Viewer’s services can also be migrated to a new application because interface implementation is similar in all web frameworks.
#Prerequisites
- .NET 8.0 or later SDK
- Visual Studio 2022 with the ASP.NET and web development workload
You may require additional packages to run our Reporting components on Linux or iOS: Use Reporting on Linux.
Important
In .NET 8, the System.
#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:
dotnet new blazor -o AspNetBlazorDocumentViewer
#Install the DevExpress NuGet Packages
Install NuGet packages for Blazor Reporting:
Select Tools → NuGet Package Manager → Manage NuGet Packages for Solution.
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.
Build the project.
#Configure Services on Startup (Program.cs)
All Web Document Viewer services that you register in DefaultWebDocumentViewerContainer
for 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 Viewer-specific services (for example, IHttpContextAccessor
). You do not require 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. Note that 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) { DefaultWebDocumentViewerContainer.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.ConfigureWebDocumentViewer(viewerConfigurator => {
viewerConfigurator.UseCachedReportSourceBuilder();
});
});
var app = builder.Build();
app.UseRouting();
app.UseDevExpressBlazorReporting();
app.UseDevExpressControls();
app.UseEndpoints(endpoints => {
endpoints.MapControllers();
});
app.Run();
#Migrate Controller Logic
Some ASP.NET Web Forms applications can process viewer requests by HTTP handlers registered in the “web.config” file. This option is no longer available. Create the WebDocumentViewerController controller for ASP.NET Blazor.
using DevExpress.AspNetCore.Reporting.WebDocumentViewer;
using DevExpress.AspNetCore.Reporting.WebDocumentViewer.Native.Services;
// ...
public class CustomWebDocumentViewerController : WebDocumentViewerController {
public CustomWebDocumentViewerController(IWebDocumentViewerMvcControllerService 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 displays the Document Viewer and loads the TestReport:
- Web Forms Markup
<asp:Content ID="Content" ContentPlaceHolderID="MainContent" runat="server"> <dx:ASPxWebDocumentViewer ID="ASPxWebDocumentViewer1" runat="server" ReportSourceId="WebFormsExample.Reports.TestReport" > </dx:ASPxWebDocumentViewer> </asp:Content>
- ASP.NET Blazor View
@page "/reportviewer/" @using DevExpress.Blazor.Reporting @using DevExpress.XtraReports.UI @using DxBlazorApplication1.PredefinedReports <link href="_content/DevExpress.Blazor.Themes/blazing-berry.bs5.css" rel="stylesheet" /> <link href="_content/DevExpress.Blazor.Reporting.Viewer/css/dx-blazor-reporting-components.bs5.css" rel="stylesheet" /> <DxReportViewer @ref="reportViewer" Report="Report" RootCssClasses="w-100 h-100" /> @code { DxReportViewer reportViewer; XtraReport Report = new TestReport(); }
#Migrate Client-Side Customization
To handle Client-Side events use the DxDocumentViewerCallbacks object members. Check the following documentation for more details on how to use Client-Side API in ASP.NET Blazor application: Customization - Document Viewer for Blazor Server.
- Web Forms Markup
<asp:Content ID="Content" ContentPlaceHolderID="MainContent" runat="server"> <dx:ASPxWebDocumentViewer ID="ASPxWebDocumentViewer1" runat="server" ReportSourceId="WebFormsExample.Reports.TestReport" > <ClientSideEvents BeforeRender="onbeforeRender"/> </dx:ASPxWebDocumentViewer> </asp:Content>
- ASP.NET Blazor View
@page "/reportviewer/" @using DevExpress.Blazor.Reporting @using DevExpress.XtraReports.UI @using DxBlazorApplication1.PredefinedReports <link href="_content/DevExpress.Blazor.Themes/blazing-berry.bs5.css" rel="stylesheet" /> <link href="_content/DevExpress.Blazor.Reporting.Viewer/css/dx-blazor-reporting-components.bs5.css" rel="stylesheet" /> <DxReportViewer @ref="reportViewer" Report="Report" RootCssClasses="w-100 h-100"> <DxDocumentViewerCallbacks BeforeRender="onBeforeRender"/> <DxReportViewer/> @code { DxReportViewer reportViewer; XtraReport Report = new TestReport(); }
Note some functionality specific for the ASP.NET Blazor platform:
The Init event no longer exists in ASP.NET Blazor. You can rewrite your customization logic using the
BeforeRender
event.ASP.NET Blazor uses callbacks which have the only one handler. You cannot use subscription with the
AddHandler
method.