Report Designer Server-Side Configuration (ASP.NET Core)
- 5 minutes to read
This document describes how to create and configure an ASP.NET Core application as a server-side solution to use the End-User Web Report Designer in JavaScript. You can use DevExpress or Visual Studio template to create an application.
Note
The complete sample project How to Use the ASP.NET Core Back-End to Integrate the Document Viewer and Report Designer in JavaScript with React Library is available in the DevExpress Examples repository.
Step 1. Create an ASP.NET Core Application
Use DevExpress Template
You can use the Template Gallery to create a new ASP.NET Core project. Follow the steps below:
Invoke the DevExpress Template Gallery, select Reporting Application under the NET Core category and click Create Project.
In the DevExpress ASP.NET MVC Project Wizard, enable the Create Designer Page and Create Report Storage check boxes and click Create Project.
(optionally) Open the ReportStorageWebExtension file and customize the report storage implementation.
Refer to Create an ASP.NET Core Application with a Report Designer for a detailed tutorial.
Use Microsoft Visual Studio Template
You can create the ASP.NET Core application based on the built-in VS template and configure it for the DevExpress Report Designer. Follow the steps below:
- Create a new ASP.NET Core Web Application (or open an existing application).
Create a new project
Configure a new project
Specify the application type
Right-click the Dependencies node in the Solution Explorer and select Manage NuGet Packages in the invoked context menu.
Select DevExpress 19.2 Local in the Package source drop-down list and go to the Browse page. Find the DevExpress.AspNetCore.Reporting package and install it.
Open the Startup file and modify it to configure services as demonstrated below.
using DevExpress.AspNetCore; using DevExpress.AspNetCore.Reporting; //... public class Startup { //... public void ConfigureServices(IServiceCollection services) { // Register reporting services in an application's dependency injection container. services.AddDevExpressControls(); // Use the AddMvcCore (or AddMvc) method to add MVC services. services.AddMvcCore(); } public void Configure(IApplicationBuilder app, IHostingEnvironment env) { // ... app.UseStaticFiles(); // Initialize reporting services. app.UseDevExpressControls(); // ... } }Add reports to the application.
Provide a server-side report storage. For this, add a new class, inherit it from the abstract ReportStorageWebExtension class and override its methods. See the Implement a Report Storage topic for more information and examples.
Add the report storage implemented in the previous step as a scoped service. For this. open the Startup.cs file and add the following code in the ConfigureServices method:
using DevExpress.XtraReports.Web.Extensions; // ... public void ConfigureServices(IServiceCollection services) { //... services.AddScoped<ReportStorageWebExtension, CustomReportStorageWebExtension>(); //... }
Step 2. Configure the Application
Enable cross-origin requests (CORS) in the created ASP.NET Core application. For this, in a ConfigureServices method, specify the client application’s URL. It prohibits any other application from getting access to the report’s backend. Use the WithOrigins method to set it up. Open the Startup.cs file and insert the following code:
//... public class Startup { //... public void ConfigureServices(IServiceCollection services) { // ... services.AddCors(options => { options.AddPolicy("AllowCorsPolicy", builder => { builder.WithOrigins("http://localhost:3000"); builder.WithHeaders("Content-Type"); }); }); // ... } // ... }In a Configure method, call the UseCors method.
Important
The UseCors method should be called before any MVC-related code. Place the UseCors method before the UseMvc or UseEndpoints methods.
Pass the policy name as a parameter:
//... public class Startup { //... public void Configure(IApplicationBuilder app, IHostingEnvironment env) { // ... app.UseCors("AllowCorsPolicy"); // ... } // ... }In the code above, the policy allows cross-origin requests only from http://localhost:3000.
Important
Set the origin URL to the URL of the client application (in this example, http://localhost:3000).
Create a controller and add an action to create the Report Designer model. In this action, use the ReportDesignerClientSideModelGenerator class and provide the following initialization data:
- the report URL (required);
- available data sources (optional);
- default reporting controller URIs (required).
using Microsoft.AspNetCore.Mvc; using DevExpress.XtraReports.Web.ReportDesigner; //... public class ReportDesignerController : Controller { //... public ActionResult GetReportDesignerModel(string reportUrl) { string modelJsonScript = new ReportDesignerClientSideModelGenerator(HttpContext.RequestServices) .GetJsonModelScript( reportUrl, // The URL of a report that is opened in the Report Designer when the application starts. GetAvailableDataSources(), // Available data sources in the Report Designer that can be added to reports. "DXXRD", // The URI path of the default controller that processes requests from the Report Designer. "DXXRDV",// The URI path of the default controller that that processes requests from the Web Document Viewer. "DXXQB" // The URI path of the default controller that processes requests from the Query Builder. ); return Content(modelJsonScript, "application/json"); } }Implement a method declared in the previous step that creates data sources for the Report Designer (the GetAvailableDataSources method in this example).
Tip
Skip this step if you do not need to provide data sources for the Report Designer.
using System.Collections.Generic; using DevExpress.DataAccess.Sql; public class ReportDesignerController : ReportDesignerApiController { // ... Dictionary<string, object> GetAvailableDataSources() { var dataSources = new Dictionary<string, object>(); SqlDataSource ds = new SqlDataSource("Northwind_Connection"); var query = SelectQueryFluentBuilder.AddTable("Products").SelectAllColumns().Build("Products"); ds.Queries.Add(query); ds.RebuildResultSchema(); dataSources.Add("SqlDataSource", ds); return dataSources; } }Note
The connection name specified in code refer to the appsettings.json file’s ConnectionStrings section:
"ConnectionStrings": { "Northwind_Connection": "XpoProvider=MSSqlServer;Server=localhost;>Database=Northwind;Persist Security Info=true;;Integrated Security=SSPI" }