Skip to main content
BuyLog In
.NET Reporting Tools
Search in…
Docs > Reporting for Web > Reporting for ASP.NET Core > End-User Report Designer > Quick Start > Start with a DevExtreme ASP.NET Core Application
All docs
V23.2
Reporting
Product Information
.NET / .NET Core Support
Get Started with DevExpress Reporting
Create Different Report Types (Walkthroughs)
Detailed Guide to DevExpress Reporting
Localize Reporting Applications
Security Considerations
Visual Studio Report Designer
VS Code Report Designer
Reporting for Desktop
Reporting for .NET MAUI
Reporting for Web
Common Features
Document Viewer for Web
End-User Report Designer for Web
Web UI Development Bundles that Include Reports
Reporting for Blazor
Reporting for ASP.NET Core
Document Viewer
End-User Report Designer
Quick Start
Start with a DevExtreme ASP.NET Core Application
Start with an ASP.NET Core MVC Application
Start with an ASP.NET Core Razor Application
Use Visual Studio Templates
Use .NET CLI Templates
Add a Report Storage
Data Sources in Web End-User Report Designer
Add Features to the Report Designer
Customize the Report Designer
Report Parameters
Server-Side Configuration
Content Security Policy (CSP)
Tasks and Solutions
Use ASP.NET Core Reporting in non-Windows Environments
Best Practices
Reporting for Angular
Reporting for Knockout-based Applications
Reporting for React
Reporting for Vue
Reporting for ASP.NET MVC
Reporting for ASP.NET Web Forms
Version Upgrade Guide
Troubleshooting
Cloud Integration
Cross-Platform .NET App UI
Backend Web API Service / REST API for Reporting
WCF Report Service
End-User Documentation
Redistribution and Deployment
API Reference
ASP.NET Core API Reference
Blazor API Reference
Client API Reference
Client API Reference (Web Forms & MVC)
Download CHM

Add an End-User Report Designer to a DevExtreme ASP.NET Core Application

  • 6 minutes to read

This tutorial describes how to add the Report Designer control to a DevExtreme ASP.NET Core Application.

Prerequisites

Important

In .NET 6, 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 DevExtreme ASP.NET Core Application

Create a new DevExtreme ASP.NET Core Application from a template as described in the following help topic: Configure a Visual Studio Project for the DevExtreme Application:

Create New DevExtreme Project

Configure New DevExtreme Project

Select Project Settings

Install NuGet Packages

Follow the steps below to install NuGet packages:

  1. Right-click Dependencies in the Solution Explorer and select Manage NuGet Packages from the context menu.

    devextreme-context-menu-manage-nuget-packages

  2. Install the following packages:

    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.

Configure npm

  1. Install Node.js (LTS version) from the Node.js website if you do not have Node.js installed.

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

    Add npm Configuration File to the Project

    Open the newly created package.json file, replace its content with the following code, and save the file:

    {
"version": "1.0.0",
"name": "asp.net",
"private": true,
"dependencies": {
    "@devexpress/analytics-core": "23.2-stable",
    "bootstrap": "^4.3.1",
    "devexpress-reporting": "23.2-stable",
    "devextreme": "23.2-stable"
}
}

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

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, modify the bundleconfig.json file as follows:

[
  {
    "outputFileName": "wwwroot/css/vendor.css",
    "inputFiles": [
      // Adds the UTF-8 charset to display icons correctly  
      "wwwroot/css/devextreme/Charset.css",

      "wwwroot/css/devextreme/bootstrap.css",
      "wwwroot/css/devextreme/dx.common.css",

      // Predefined themes: https://js.devexpress.com/DevExtreme/Guide/Themes_and_Styles/Predefined_Themes/
      "wwwroot/css/devextreme/dx.light.css",
    ],
    "minify": {
      "enabled": false
    }
  },
  {
    "outputFileName": "wwwroot/js/vendor.js",
    "inputFiles": [
      "wwwroot/js/devextreme/jquery.js",
      "node_modules/knockout/build/output/knockout-latest.js",
      "wwwroot/js/devextreme/bootstrap.js",
      "wwwroot/js/devextreme/dx.all.js",
      "wwwroot/js/devextreme/aspnet/dx.aspnet.mvc.js",
      "wwwroot/js/devextreme/aspnet/dx.aspnet.data.js"
    ],
    "minify": {
      "enabled": false
    }
  },
  {
    "outputFileName": "wwwroot/css/reporting.designer.part.bundle.css",
    "inputFiles": [
      "node_modules/ace-builds/css/ace.css",
      "node_modules/ace-builds/css/theme/dreamweaver.css",
      "node_modules/ace-builds/css/theme/ambiance.css",
      "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",
      "node_modules/@devexpress/analytics-core/dist/css/dx-querybuilder.css",
      "node_modules/devexpress-reporting/dist/css/dx-reportdesigner.css"
    ],
    "minify": {
      "enabled": false,
      "adjustRelativePaths": false
    }
  },
  {
    "outputFileName": "wwwroot/js/reporting.designer.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",
      "node_modules/@devexpress/analytics-core/dist/js/dx-querybuilder.min.js",
      "node_modules/devexpress-reporting/dist/js/dx-reportdesigner.min.js"
    ],
    "minify": {
      "enabled": false
    },
    "sourceMap": false
  }
]

Note that third-party bundles are merged into vendor bundles. Libraries specific to the Report Designer are included in the related bundles.

Configure Application and Services

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

    using DevExpress.AspNetCore;
using DevExpress.AspNetCore.Reporting;
//...

var builder = WebApplication.CreateBuilder(args);
//...

builder.Services.AddDevExpressControls();

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

app.UseDevExpressControls();
//...

  2. Implement controllers to process the Report Designer requests. In the Controllers folder, create the ReportingControllers.cs file with the following content:

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


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

public class CustomReportDesignerController : ReportDesignerController {
    public CustomReportDesignerController(IReportDesignerMvcControllerService controllerService)
        : base(controllerService) { }
}

public class CustomQueryBuilderController : QueryBuilderController {
    public CustomQueryBuilderController(IQueryBuilderMvcControllerService controllerService)
        : base(controllerService) {    }
}

An application with End-User Report Designer requires all three controllers for proper operation.

Add a Sample Report

  1. Right-click the project in the Solution Explorer and select Add | New Folder from the context menu. Rename the newly created folder to Data.

  2. Right-click the project in the Solution Explorer and select Add | Existing Item from the context menu. Open the following path and copy the nwind.xml file to the project’s Data folder: C:\Users\Public\Documents\DevExpress Demos 23.2\Components\Data\nwind.xml

  3. Right-click the project in the Solution Explorer and select Add | New Folder from the context menu. Rename the newly created folder to Reports.

  4. 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 v23.2 Report.

    Add New Report

    Rename the new report to TestReport and click Add.

  5. In the invoked Report Wizard, select the Table report type:

    Select Table Report

    Click Next.

  6. In the invoked Data Source Wizard, select XML file. Click Next.

    Report Wizard - Select Data Source Type

  7. On the next page, select the first option to create a new data connection. Click Next.

    Data Source Wizard - Specify Data Connection

  8. Specify the nwind.xml file in the Data folder. Click Next.

    Data Source Wizard - Specify the XML File

  9. Save the connection string:

    Save Connection String

    Click Next.

  10. Select the Categories table:

    Select Categories Table

    Click Next.

  11. Select data fields:

    Select Data Fields

    Click Finish.

Add the End-User Report Designer Component

  1. 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 Report Designer control.

    @using DevExpress.AspNetCore

  2. Add a new page (Designer.cshtml) with the following code, which displays the Report Designer 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.

    @page

<link rel="stylesheet" href="~/css/reporting.designer.part.bundle.css" />
<script src="~/js/reporting.designer.part.bundle.js"></script>

@(Html.DevExpress().ReportDesigner("reportDesigner")
    .Height("1000px")
        .Bind(new Reports.TestReport()))

    The page includes script and style bundles related to the Report Designer. The bundles are defined in the bundleconfig.json file.

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

    ...
    <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="/Designer" class="nav-link">Report Designer</a></li>
        </ul>
    </div>
...

Run the Application

When you run the application, the page contains the End-User Report Designer with the TestReport. You can design a report, preview it, print and export, but you cannot save it or load another report.

Troubleshooting

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

  • The script files should be registered in the correct order, as demonstrated in the bundleconfig.json code above. For more information, review the following help topic: Script Registration Order.
  • There should be no duplicate registrations. Report Designer 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.

Limitations

Review the following help topic for details: Reporting .NET/.NET Core Limitations.

What’s Next

You have now completed a basic DevExtreme ASP.NET Core App with a Report Designer control. Refer to the following articles for more information on Reporting features:

Add a Report Storage
Create and register a report storage to enable users to save and load reports.
Data Sources in End-User Report Designer
Manage data sources in the Report Designer to enable users to create a data-bound report.
Add Features to the Report Designer
Extend the End-User Report Designer in ASP.NET Core Applications in an ASP.NET Core application.
Customize End-User Report Designer
Customize available End-User Report Designer elements.
See Also