xtrareports-403747-web-reporting-asp-net-core-reporting-document-viewer-in-asp-net-applications-quick-start-add-a-document-viewer-to-a-devextreme-asp-net-core-application.md
Follow this step-by-step tutorial to add a Document Viewer to a DevExtreme ASP.NET Core application. The guide includes information about prerequisites, npm configuration, library management, application and services setup, sample report creation, troubleshooting, and limitations.
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 a new DevExtreme ASP.NET Core Application from a template.
Set application type to Razor Pages and a layout to Bootstrap.
A detailed guide you can find in the following help topic: ASP.NET Core DevExtreme Getting Started.
Follow the steps below to install NuGet packages:
Right-click Dependencies in the Solution Explorer and select Manage NuGet Packages from the context menu.
Install the following packages:
Right-click the project in the Solution Explorer and select Add | New Item from the context menu. Select npm Configuration File in the invoked Add New Item dialog.
Right-click package.json in the Solution Explorer and select Restore Packages. Alternatively, you can execute the following command in the folder that contains the package.json file:
You must register JS and CSS resources once and in the correct order. Otherwise, client-side errors may occur, as described in the following help topic: Reporting Application Diagnostics.
To create resource bundles, add a new bundleconfig.json file with the following content (or modify the content of an existing bundleconfig.json file if needed):
[
{
"outputFileName": "wwwroot/js/vendor.js",
"inputFiles": [
"node_modules/knockout/build/output/knockout-latest.js",
],
"minify": {
"enabled": false
}
},
{
"outputFileName": "wwwroot/css/reporting.viewer.part.bundle.css",
"inputFiles": [
"node_modules/@devexpress/analytics-core/dist/css/dx-analytics.common.css",
"node_modules/@devexpress/analytics-core/dist/css/dx-analytics.light.css",
"node_modules/devexpress-reporting/dist/css/dx-webdocumentviewer.css"
],
"minify": {
"enabled": false,
"adjustRelativePaths": false
}
},
{
"outputFileName": "wwwroot/js/reporting.viewer.part.bundle.js",
"inputFiles": [
"node_modules/@devexpress/analytics-core/dist/js/dx-analytics-core.min.js",
"node_modules/devexpress-reporting/dist/js/dx-webdocumentviewer.min.js"
],
"minify": {
"enabled": false
},
"sourceMap": false
}
]
Note that third-party bundles are merged into vendor bundles. Libraries specific to the Document Viewer are included in the related bundles.
Open the Program.cs file and modify the code as shown in the following code snippet:
Implement a controller to process the Document Viewer requests. In the Controllers folder, create the ReportingControllers.cs file with the following content:
Right-click the project in the Solution Explorer and select Add | New Folder from the context menu. Rename the created folder to Reports.
Right-click the Reports folder and select Add | New Item from the context menu. In the invoked Add New Item dialog, click the Reporting tree node and select DevExpress v25.2 Report.
Select the Blank report type in the invoked Report Wizard. The Report Designer displays the newly created blank report.
Drop an XRLabel from the Toolbox to the Detail band and rename the label to Hello, world!. Save the report and close the designer.
See the following section for more information about creating reports in Visual Studio: Create a Report from A to Z.
Add the DevExpress.AspNetCore namespace directive to the _ViewImports.cshtml file. As an alternative, you can add this namespace to the view that contains the Document Viewer control.
Add a new page (Viewer.cshtml) to the Page folder with the following code, which displays the Document Viewer and loads the TestReport :
Open the _Layout.cshtml file (Pages/Shared folder). Include the vendor.js bundle that contains the Knockout library before the DevExtreme library. Add a link to the Viewer.cshtml page.
When you run the application, the page contains the Document Viewer with the TestReport:
If the page does not display the Document Viewer component, or it is displayed incorrectly, check the following:
bundleconfig.json code above. For more information, review the following help topic: Script Registration Order.Review the following help topic for more information: Troubleshooting.
Review the following help topic for details: Reporting .NET/.NET Core Limitations.
You have now completed a basic DevExtreme ASP.NET Core App with a Document Viewer control. Refer to the following articles for more information on Reporting features:
Create a Report from A to ZView step-by-step tutorials that demonstrate how to create a simple table report.Open a Report in Document ViewerExplore ways to display a report in a Document Viewer Control.Document Viewer CustomizationCustomize Document Viewer elements.Mobile Mode in Document ViewerEnable mobile mode in the Document Viewer.Cloud IntegrationDeploy and integrate DevExpress Reporting applications with cloud services. See Also