Add a JavaScript-Based Document Viewer to a Blazor Web App (Interactive Server)
- 5 minutes to read
This tutorial adds the Document Viewer control (DxDocumentViewer) to a Blazor Web App (Interactive Server) template.
Create a New Project
This section describes how to create a new Blazor project. If you want to start this tutorial using an existing application, go to Step 2.
Click Create a new project on Visual Studio’s start page and select the Blazor Web App template. Select Server from the Interactive Render Mode drop-down list.
Click Next.
Specify the project name and location, and click Next.
Specify additional options and click Create.
For additional information on available Blazor templates, refer to the following topic: Tooling for ASP.NET Core Blazor.
Install 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.Reporting.JSBasedControlsDevExpress.AspNetCore.Reporting
The DevExpress 25.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.
Refer to the following topic for more information: Install NuGet Packages in Visual Studio, VS Code, and Rider.
Register DevExpress Resources
Register the services required for Blazor Reporting, and specify endpoint routing. For this, call the following methods in the Program.cs file:
using DevExpress.Blazor.Reporting; using DevExpress.XtraReports.Web.Extensions; // ... builder.Services.AddMvc(); builder.Services.AddDevExpressBlazorReporting(); // ... app.UseDevExpressBlazorReporting();Register DevExpress.Blazor and DevExpress.Blazor.Reporting namespaces in the _Imports.razor file:
@using DevExpress.Blazor @using DevExpress.Blazor.ReportingIn the App.razor file, call the RegisterScripts(Action<ResourcesConfigurator>) method to register DevExpress client resources:
<head> @*...*@ @DxResourceManager.RegisterScripts() @*...*@ </head>
Add a Report Name Resolution Service
If you pass a report name to a method that opens a report, you must implement and register one of the following services (to resolve report names):
- IReportProvider
- A recommended service for the Document Viewer and Report Designer. The primary advantage of
IReportProviderservice is that it can be attached to reports created at runtime. IReportProviderAsync uses asynchronous operations. - ReportStorageWebExtension
- This service is called when no other report name resolution services are available. It is designed to obtain reports (stored in our REPX format) from external storage (a file or a database). Note that the GetData method returns a serialized report. If you use the GetData method to specify the default parameter value for a loaded report, set the Value property to the parameter value.
In this example, we implement the IReportProvider service to load reports from the Reports folder in the project directory:
Create a MyReportProvider.cs file in the Services folder with the following code:
using DevExpress.XtraReports.Services; using DevExpress.XtraReports.UI; namespace BlazorApp.Services { public class MyReportProvider: IReportProvider { public XtraReport GetReport(string reportName, ReportProviderContext context) { XtraReport report = new XtraReport(); string reportFolder = "Reports"; if (Directory.EnumerateFiles(reportFolder). Select(Path.GetFileNameWithoutExtension).Contains(reportName)) { byte[] reportBytes = File.ReadAllBytes(Path.Combine(reportFolder, reportName + ".repx")); using (MemoryStream ms = new MemoryStream(reportBytes)) report = XtraReport.FromXmlStream(ms); } return report; } } }Register the
MyReportProviderservice in the Program.cs file:using DevExpress.Blazor.Reporting; using DevExpress.XtraReports.Services; using BlazorApp.Services; // ... builder.Services.AddDevExpressBlazorReporting(); builder.Services.AddScoped<IReportProvider, MyReportProvider>(); // ...Add a new Reports folder to a project. The folder name is specified in the
IReportProviderimplementation.
Create a Sample Report
To perform this step, you should install DevExpress Reporting v25.2 on your machine. Refer to the following topic for more information: Run the Installation Wizard - DevExpress Unified Component Installer.
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.
Name the report TestReport.cs and click Add.
Select Blank in the invoked Report Wizard page and click Finish.
Modify the newly created report in the Visual Studio Report Designer. Add a label and type Hello, World!:
Click the report’s smart tag and select Save…:
In the invoked Save As dialog, specify the Reports project folder, Report XML Files (.repx) file type, and the TestReport.repx file name.
Add a Document Viewer to a Page
Create a new razor file (DocumentViewer.razor) in the Pages folder. Use the code below to generate a page with a Document Viewer component.
Enable interactivity for DevExpress components:
Make sure the required interactive services are registered.
Add an appropriate render mode attribute to a component’s page.
@page "/documentviewer"
@rendermode InteractiveServer
<DxDocumentViewer ReportName="TestReport" Height="1000px" Width="100%">
<DxDocumentViewerTabPanelSettings Width="340" />
</DxDocumentViewer>
The DxDocumentViewer component loads the TestReport report to create a document.
Add Navigation Links
Add navigation links to the NavMenu.razor page:
Run the Project
Run the project. The Document Viewer loads the TestReport.repx report:
Next Steps
- Restore Data Connections
- Learn how to implement a service that restores data connections for data-aware reports loaded in the Document Viewer.
- Specify Report Parameters
- Learn how to specify report parameters using the built-in Parameters Panel or create custom UI elements and use them to submit parameter values to the report.
- Handle Client-Side Events
- Learn how to handle client-side events raised by the JavaScript-based Document Viewer.
- Customize Parameter Editors
- Learn how to customize built-in parameter editors in the JavaScript-based Document Viewer.
- Customize the Tab Panel
- Learn how to customize the Document Viewer Tab Panel.
- Customize the Toolbar
- Learn how to customize the Document Viewer Toolbar.
- Troubleshooting
- This 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 help topic: Reporting Application Diagnostics.