Standalone Report Parameters Panel in ASP.NET Core Applications

• Sep 26, 2024
• 5 minutes to read

This tutorial describes how to add the Standalone Report Parameters Panel control to an ASP.NET Core web application.

DevExpress Reporting applications that include the Standalone Report Parameters Panel component are composed of two parts - the server (backend) and the client.

View Example: Reporting for ASP.NET Core - Standalone Report Parameters Panel

Prerequisites

• .NET 8.0 (or later) SDK
• Visual Studio 2022 (v17.0) or higher

Visual Studio workloads:

• ASP.NET and web development
• .NET Core cross-platform development

Note

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

Configure the Server Part (Backend)

1. Install the following NuGet packages:

   • DevExpress.AspNetCore.Reporting
   • BuildBundlerMinifier
   • Microsoft.Web.LibraryManager.Build

   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.

2. Open Program.cs and add the following code:

   Program.cs

   using DevExpress.AspNetCore;
   using DevExpress.AspNetCore.Reporting;
   //...
   
   var builder = WebApplication.CreateBuilder(args);
   
   // Add services to the container.
   builder.Services.AddControllersWithViews();
   
   builder.Services.AddDevExpressControls();
   builder.Services.AddMvc();
   builder.Services.ConfigureReportingServices(configurator => {
       configurator.ConfigureWebDocumentViewer(viewerConfigurator => {
           viewerConfigurator.UseCachedReportSourceBuilder();
       });
   });
   // ...
   var app = builder.Build();
   app.UseDevExpressControls();
   System.Net.ServicePointManager.SecurityProtocol |= System.Net.SecurityProtocolType.Tls12;
   
   // ...
   

3. Like the Document Viewer component, the Standalone Parameter Panel requires a controller to handle requests. In the Controllers folder, create a 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)
       {
       }
   }
   

4. Create a new report with several parameters. Save the report as TestReport.repx (XML format). Review the following topic for more information: Add a New Report in Visual Studio.

   Tip

   To edit a report without Microsoft Visual Studio, you can use VS Code with a dedicated extension:

   Visual Studio Code (VS Code) Report Designer Extension (CTP)

5. Create a Reports folder in the project. Paste the TestReport.repx file created in the previous step. Specify that the file should be copied to the output directory.

6. Create and register a report resolution service that translates report identifiers to report instances. For this purpose, implement the IReportProvider interface in the CustomReportProvider.cs class as follows:

   using DevExpress.XtraReports.Services;
   using DevExpress.XtraReports.UI;
   
   public class CustomReportProvider : DevExpress.XtraReports.Services.IReportProvider {
       public XtraReport GetReport(string id, ReportProviderContext context) {
           var reportNameToOpen = id ?? "TestReport";
           string path = $"Reports\\{reportNameToOpen}.repx";
           if (!System.IO.File.Exists(path)) return new XtraReport();
           return XtraReport.FromXmlFile(path);
       }
   }
   

   Register the custom service at application startup:

   Program.cs

   using DevExpress.XtraReports.Services;
   // ...
   builder.Services.AddScoped<IReportProvider,CustomReportProvider>();
   

7. Add a controller action that supplies the model for the client-side Parameters Panel component. Use the following code example:

   HomeController.cs

   using DevExpress.XtraReports.Web.ParametersPanel;
   using Microsoft.AspNetCore.Mvc;
   // ...
       public IActionResult Panel(
           [FromQuery] string reportName,
           [FromServices] IReportParametersPanelClientSideModelGenerator clientSideModelGenerator) {
           reportName = string.IsNullOrEmpty(reportName) ? "TestReport" : reportName;
           ReportParametersPanelModel parametersPanelModel =
               clientSideModelGenerator.GetModel(reportName, WebDocumentViewerController.DefaultUri);
           return View("Panel", parametersPanelModel);
       }
   

8. If the report uses data from a database, add a connection string to the appsettings.json file and reference the libraries needed to interact with the database. If a sample report retrieves data from the nwind.db SQLite database (a database file from DevExpress demos), install the System.Data.SQLite.Core NuGet package, copy the nwind.dbfile to the Data folder, specify that the file should be copied to the output directory, and add the following connection string:

   appsettings.json

   "ConnectionStrings": {
       "NWindConnectionString": "XpoProvider=SQLite;Data Source=|DataDirectory|Data/nwind.db"
   }
   

Configure the Client (Frontend) Part

1. Install the following npm libraries:

   • bootstrap
   • devextreme-dist
   • @devexpress/analytics-core
   • devexpress-reporting

2. Modify the bundleconfig.json file (if exists) or add a new file with the following content:

   bundleconfig.json

   [
   {
       "outputFileName": "wwwroot/css/dx.material.orange.light.bundle.css",
       "inputFiles": [
       "node_modules/devextreme-dist/css/dx.material.orange.light.css",
       "node_modules/@devexpress/analytics-core/dist/css/dx-analytics.material.orange.light.css"
       ],
       "minify": {
       "enabled": false,
       "adjustRelativePaths": false
       }
   },
   {
       "outputFileName": "wwwroot/css/thirdparty.bundle.css",
       "inputFiles": [
       "node_modules/bootstrap/dist/css/bootstrap.min.css",
       "node_modules/devextreme-dist/css/dx.light.css"
       ],
       "minify": {
       "enabled": false,
       "adjustRelativePaths": false
       }
   },
   {
       "outputFileName": "wwwroot/css/viewer.part.bundle.css",
       "inputFiles": [
       "node_modules/@devexpress/analytics-core/dist/css/dx-analytics.common.css",
       "node_modules/devexpress-reporting/dist/css/dx-webdocumentviewer.css"
       ],
       "minify": {
       "enabled": false,
       "adjustRelativePaths": false
       }
   },
   {
       "outputFileName": "wwwroot/js/site.thirdparty.bundle.js",
       "inputFiles": [
       "node_modules/jquery/dist/jquery.min.js",
       "node_modules/bootstrap/dist/js/bootstrap.min.js"
       ],
       "minify": {
       "enabled": false
       },
       "sourceMap": false
   },
   {
       "outputFileName": "wwwroot/js/reporting.thirdparty.bundle.js",
       "inputFiles": [
       "node_modules/knockout/build/output/knockout-latest.js",
       ],
       "minify": {
       "enabled": false
       },
       "sourceMap": false
   },
   {
       "outputFileName": "wwwroot/js/viewer.part.bundle.js",
       "inputFiles": [
       "node_modules/devextreme-dist/js/dx.all.js",
       "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

   If your application already uses libraries listed above, remove duplicate library references to ensure they are registered only once.

3. Modify the libman.json file (if it exists) or add a new file with the following content:

   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"
       ]
       }
   ]
   }
   

Add a Standalone Report Parameters Panel Control

1. Reference the DevExpress.AspNetCore namespace in the _ViewImports.cshtml file. Alternatively, you can reference this namespace in the view that contains the Standalone Report Parameters Panel control.

   _ViewImports.cshtml

   @using DevExpress.AspNetCore
   

2. Add the following links to the Layout.cshtml page’s head section (the Views | Shared folder):

   _Layout.cshtml

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

3. Create a View with the following content:

   Panel.cshtml

   @model DevExpress.XtraReports.Web.ParametersPanel.ReportParametersPanelModel
   @{
       var panelRender = Html.DevExpress().ReportParametersPanel("ParametersPanel")
           .Height("100%")
           .Width("750px")
           .Bind(Model);
       @panelRender.RenderHtml()
   }
   
   @section Scripts {
       <link rel="stylesheet" href="~/css/viewer.part.bundle.css" />
       <link rel="stylesheet" href="~/css/dx.material.orange.light.bundle.css" />
       <script src="~/js/reporting.thirdparty.bundle.js"></script>
       <script src="~/js/viewer.part.bundle.js"></script>
   
       @panelRender.RenderScripts()
   }
   

Run the Application

The application’s page contains the Standalone Report Parameters Panel control that displays parameters from the TestReport report:

Next Steps

For information on how to apply parameter values obtained from the Standalone Report Parameters Panel to the report, review the following help topic: How to Use Parameter Values from the Standalone Report Parameters Panel (ASP.NET Core App).