Add a Document Viewer and Report Designer (JavaScript-Based) to a Project (Blazor Application Created with a DevExpress Blazor Application Template)
- 7 minutes to read
Tip
To create a Blazor Reporting application, use preconfigured DevExpress templates to create an application with minimal effort and maximum efficiency. For more information, review the following help topics:
This tutorial integrates the Document Viewer and Report Designer controls in a sample Blazor Server application created from the DevExpress Blazor template.
#Prerequisites
- .NET 8.0 or later
- Visual Studio 2022 (latest version) with the ASP.NET and web development workload
- DevExpress .NET Product Installer
When you install Blazor components with the DevExpress .NET Product Installer, the DevExpress Template Gallery automatically appears in Visual Studio’s New Project menu. The Gallery contains DevExpress Blazor project templates.
Note
We implemented a new dotnet CLI-powered Project Wizard you can use across multiple IDEs. The new wizard suggests additional templates: Cross-IDE Project Template Kit.
#Create a New Blazor Application
Follow the steps below to create a sample Blazor application in Visual Studio:
Click Create a new project on Visual Studio’s start page, select the DevExpress v24.2 Blazor App Template Gallery, and click Next.
Specify the Project Name and Location, and click Create.
In the invoked Template Gallery, specify Project Name, Target Framework, Render Mode, and Authentication options, and click Run Wizard.
Select Server from the Render Mode drop-down list.
The DevExpress Blazor Project Wizard allows you to select a theme to change the appearance of all components, and specify the culture used to localize UI elements. Click Create Project.
For more information on available settings, refer to the following topic: Visual Studio: DevExpress Template Gallery.
Click Create Project in the wizard.
The application template creates a project that includes the following:
- References to the DevExpress Blazor NuGet package and DevExpress resources
- The DevExpress Blazing Berry theme
- Application layout based on the GridLayout component
- Sidebar navigation based on the Menu component
- The Grid component
#Install the DevExpress Blazor Reporting NuGet Package
Right-click Dependencies in the Solution Explorer and select Manage NuGet Packages from the context menu.
In the invoked dialog, click the Browse tab, select the DevExpress 24.2 Local package source, and install the following NuGet packages:
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 use the DevExpress .NET Product Installer.
Build the project.
#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.AddDevExpressBlazorReporting(); // ... app.UseDevExpressBlazorReporting();
Register the DevExpress.Blazor.Reporting namespace in the _Imports.razor file:
@using DevExpress.Blazor.Reporting
#Add the Report Storage
Implement the ReportStorageWebExtension descendant to save and load reports.
The code below is a sample storage that uses the file system to store reports. Add the CustomReportStorageWebExtension.cs class file to your project with following content:
using DevExpress.XtraReports.UI; using System.ServiceModel; public class CustomReportStorageWebExtension : DevExpress.XtraReports.Web.Extensions.ReportStorageWebExtension { readonly string reportDirectory = "Reports"; const string FileExtension = ".repx"; public CustomReportStorageWebExtension() { if (!Directory.Exists(reportDirectory)) { Directory.CreateDirectory(reportDirectory); } } public override bool CanSetData(string url) { // Determines whether a report with the specified URL can be saved. // Add custom logic that returns **false** for reports that should be read-only. // Return **true** if no valdation is required. // This method is called only for valid URLs (if the **IsValidUrl** method returns **true**). return true; } public override bool IsValidUrl(string url) { // Determines whether the URL passed to the current report storage is valid. // Implement your own logic to prohibit URLs that contain spaces or other specific characters. // Return **true** if no validation is required. return Path.GetFileName(url) == url; } public override byte[] GetData(string url) { // Uses a specified URL to return report layout data stored within a report storage medium. // This method is called if the **IsValidUrl** method returns **true**. // You can use the **GetData** method to process report parameters sent from the client // if the parameters are included in the report URL's query string. try { if (Directory.EnumerateFiles(reportDirectory).Select(Path.GetFileNameWithoutExtension).Contains(url)) { return File.ReadAllBytes(Path.Combine(reportDirectory, url + FileExtension)); } } catch (Exception) { throw new FaultException(new FaultReason("Could not get report data."), new FaultCode("Server"), "GetData"); } throw new FaultException(new FaultReason(string.Format("Could not find report '{0}'.", url)), new FaultCode("Server"), "GetData"); } public override Dictionary<string, string> GetUrls() { // Returns a dictionary that contains the report names (URLs) and display names. // The Report Designer uses this method to populate the Open Report and Save Report dialogs. return Directory.GetFiles(reportDirectory, "*" + FileExtension) .ToDictionary(x => Path.GetFileNameWithoutExtension(x)); } public override void SetData(XtraReport report, string url) { // Saves the specified report to the report storage with the specified name // (saves existing reports only). var resolvedUrl = Path.GetFullPath(Path.Combine(reportDirectory, url + FileExtension)); if (!resolvedUrl.StartsWith(reportDirectory + Path.DirectorySeparatorChar)) { throw new FaultException("Invalid report name."); } report.SaveLayoutToXml(resolvedUrl); } public override string SetNewData(XtraReport report, string defaultUrl) { // Allows you to validate and correct the specified name (URL). // This method also allows you to return the resulting name (URL), // and to save your report to a storage. The method is called only for new reports. SetData(report, defaultUrl); return defaultUrl; } }
The
HelloWorld
class instance in theReportFactory.Reports
method is a sample XtraReport class created as described in the next section.In Program.cs, register the
CustomReportStorageWebExtension
:using DevExpress.XtraReports.Web.Extensions; // ... builder.Services.AddDevExpressBlazorReporting(); // ... builder.Services.AddScoped<ReportStorageWebExtension, CustomReportStorageWebExtension>();
Important
Register the
Report
after theStorage Web Extension Add
method.DevExpress Blazor Reporting Add a new Reports folder to a project.
The folder name should be specified in the
ReportStorageWebExtension
implementation.
#Create a Sample Report
To perform this step, you should install DevExpress Reporting v24.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.24.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 a Report Designer to a Page
Create a new razor file (ReportDesigner.razor) in the Pages folder. Use the code below to generate a page with a Report Designer 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 "/reportdesigner"
@rendermode InteractiveServer
<DxReportDesigner ReportName="TestReport" Height="1000px" Width="100%" AllowMDI="true">
<DxReportDesignerWizardSettings UseFullscreenWizard="true" />
</DxReportDesigner>
The DxReportDesigner loads the TestReport report.
Note
If you implement a custom report that inherits from Xtra
#Add Navigation Links
Add navigation links to the NavMenu.razor page:
#Run the Project
Run the project. The Document Viewer and Report Designer components load the TestReport.repx report:
#Next Steps
- Troubleshooting
- 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 topic: Reporting Application Diagnostics.
- Specify Report Parameters
- Topic describes 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.
- Document Viewer Customization
- Topic describes how to specify the Viewer’s properties and handle events to adjust the Document Viewer appearance and behavior.
- Report Designer Customization
- Topic describes how handle events to adjust the Report Designer appearance and behavior.