Add a Document Viewer to a DevExtreme ASP.NET Core Application (Razor Pages)

Mar 24, 2026
6 minutes to read

Follow this step-by-step tutorial to add a Document Viewer to an ASP.NET Core Bootstrap Application project template. This tutorial targets the Visual Studio IDE.

Prerequisites

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 Limitations.

Create a DevExtreme ASP.NET Core Application

Skip this step if you already have a DevExtreme ASP.NET Core application.

Open Visual Studio and select Create a new project.
In the Create a new project dialog, search for DevExpress Template Kit.
Select the DevExpress v25.2 Template Kit template.
Click Next.
Specify the project name and location, and click Create.
Click ASP.NET Core in the left pane of the Template Kit window.
Select the ASP.NET Core Bootstrap Application template. Select Razor Pages in the App Type option.
Click Create Project.

For more information on how to get started with DevExtreme-based controls, refer to the following topics:

Install NuGet Packages

Install the following NuGet package:

DevExpress.AspNetCore.Reporting

For more information on how to install NuGet packages for DevExpress components, review the following help topic: Choose Between Offline and Online DevExpress NuGet Feeds.

Install npm packages

Modify the package.json file as follows to add reporting npm packages to the project:

package.json

{
  "name": "DXApplication14",
  "version": "1.0.0",
  "license": "MIT",
  "private": true,
  "dependencies": {
    "bootstrap": "^5.3.8",
    "devextreme-aspnet-data": "5.1.0",
    "devextreme-dist": "25.2-stable",
    "@devexpress/analytics-core": "25.2-stable",
    "devexpress-reporting": "25.2-stable",
    "jquery": "^3.7.1"
  }
}

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:
```
npm install
```

Manage Libraries

Modify the libman.json file as follows:

libman.json

{
  "version": "1.0",
  "defaultProvider": "filesystem",
  "libraries": [
    // ...
    {
      "library": "node_modules/devextreme-dist/css/icons/",
      "destination": "wwwroot/css/icons",
      "files": [
        "dxiconsmaterial.ttf",
        "dxiconsmaterial.woff",
        "dxiconsmaterial.woff2",
        "dxicons.ttf",
        "dxicons.woff2",
        "dxicons.woff"
      ]
    },
    {
      "library": "node_modules/@devexpress/analytics-core/dist/css/",
      "destination": "wwwroot/css/reporting",
      "files": [
        "dx-analytics.light.css",
        "dx-analytics.common.css"
      ]
    },
    {
      "library": "node_modules/devexpress-reporting/dist/css/",
      "destination": "wwwroot/css/reporting",
      "files": [
        "dx-webdocumentviewer.css"
      ]
    },
    {
      "library": "node_modules/@devexpress/analytics-core/dist/js/",
      "destination": "wwwroot/js/reporting",
      "files": [
        "dx-analytics-core.min.js"
      ]
    },
    {
      "library": "node_modules/devexpress-reporting/dist/js/",
      "destination": "wwwroot/js/reporting",
      "files": [
        "dx-webdocumentviewer.min.js"
      ]
    },
    {
      "library": "node_modules/knockout/build/output/knockout-latest.js",
      "destination": "wwwroot/js/reporting"
    }
  ]
}

Reference the js and css files in the _Layout.cshtml file as follows:

_Layout.cshtml

@* ...*@
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>DXApplication1</title>
    <link href="~/css/devextreme/bootstrap.css" rel="stylesheet" />
    @* Predefined themes: https://js.devexpress.com/DevExtreme/Guide/Themes_and_Styles/Predefined_Themes/ *@
    <link href="~/css/devextreme/dx.light.css" rel="stylesheet" />
    <link href="~/css/reporting/dx-analytics.common.css" rel="stylesheet" />
    <link href="~/css/reporting/dx-analytics.light.css" rel="stylesheet" />
    <link href="~/css/reporting/dx-webdocumentviewer.css" rel="stylesheet" />
    <link rel="stylesheet" href="~/css/Site.css" />

    <script src="~/js/devextreme/jquery.js"></script>
    <script src="~/js/devextreme/bootstrap.js"></script>
    <script src="~/js/reporting/knockout-latest.js"></script>
    <script src="~/js/devextreme/dx.all.js"></script>
    <script src="~/js/devextreme/aspnet/dx.aspnet.mvc.js"></script>
    <script src="~/js/devextreme/aspnet/dx.aspnet.data.js"></script>
    <script src="~/js/reporting/dx-analytics-core.min.js"></script>
    <script src="~/js/reporting/dx-webdocumentviewer.min.js"></script>
</head>
@* ...*@

Configure Application and Services

Open the Program.cs file and modify the code as shown in the following code snippet:

Program.cs

using DevExpress.AspNetCore;

var builder = WebApplication.CreateBuilder(args);

// Add services to the container.
builder.Services
    .AddDevExpressControls()
    .AddRazorPages()
    .AddJsonOptions(options => options.JsonSerializerOptions.PropertyNamingPolicy = null);

var app = builder.Build();
//...
app.UseDevExpressControls();

//...

app.Run();

Implement a controller to process the Document Viewer requests. In the Controllers folder, create the ReportingControllers.cs file with the following content:

ReportingControllers.cs

using DevExpress.AspNetCore.Reporting.WebDocumentViewer;
using DevExpress.AspNetCore.Reporting.WebDocumentViewer.Native.Services;

public class CustomWebDocumentViewerController : WebDocumentViewerController {
    public CustomWebDocumentViewerController(IWebDocumentViewerMvcControllerService controllerService)
        : base(controllerService) {    }
}

Add a Sample Report

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.

Rename the new report to TestReport and click Add.
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 Document Viewer Component

Register 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.
- _ViewImports.cshtml
```
@using DevExpress.AspNetCore
```
Add a Razor Page (Viewer.cshtml) with the following code, which displays the Document Viewer and loads the TestReport:

Note
If you implement a custom report that inherits from XtraReport and want to open it in the End-User Report Designer, add a constructor without parameters to this report.
- Viewer.cshtml
```
@page

@(Html.DevExpress().WebDocumentViewer("DocumentViewer")
    .Height("1000px")
        .Bind(new Reports.TestReport()))
```

Open the Layout.cshtml file (Views|Shared folder) and add a link to the Viewer.cshtml page:

_Layout.cshtml

...
    <div id="navbar" class="collapse navbar-collapse">
        <ul class="navbar-nav mr-auto">
            <li class="active nav-item"><a href="#" class="nav-link">Home</a></li>
            <li class="nav-item"><a href="#about" class="nav-link">About</a></li>
            <li class="nav-item"><a href="#contact" class="nav-link">Contact</a></li>
            <li class="nav-item"><a href="/Viewer" class="nav-link">Document Viewer</a></li>
        </ul>
    </div>
...

Run the Application

When you run the application, the page contains the Document Viewer with the TestReport.

Troubleshooting

If the page does not display the Document Viewer component, or it is displayed incorrectly, check the following:

The script files should be registered in the correct order. For more information, review the following help topic: Script Registration Order.
There should be no duplicate registrations. The Document Viewer component bundles should be included in the pages that contain the component.
The version of the DevExpress scripts (npm packages) should match the version of the server-side libraries (NuGet packages). You can enable Development Mode to check for library version mismatch on every request to the server. For more information, review the following help topic: Server-Side Libraries Version.

Review the following help topic for more information: Troubleshooting.

What’s Next

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 Z: View step-by-step tutorials that demonstrate how to create a simple table report.
Open a Report in Document Viewer: Explore ways to display a report in a Document Viewer Control.
Document Viewer Customization: Customize Document Viewer elements.
Mobile Mode in Document Viewer: Enable mobile mode in the Document Viewer.
Cloud Integration: Deploy and integrate DevExpress Reporting applications with cloud services.

Controls

FREE UTILITIES

Controls and Extensions

FREE UTILITIES

Controls

FREE UTILITIES

Controls and Extensions

FREE UTILITIES

Prerequisites

Create a DevExtreme ASP.NET Core Application

Install NuGet Packages

Install npm packages

Manage Libraries

Configure Application and Services

Add a Sample Report

Add the Document Viewer Component

Run the Application

Troubleshooting

What’s Next