Search code examples
c#angularreportdevexpressasp.net-core-webapi

How to use DevExpress report designer and report viewer in Angular 10

I'm using Angular 10 for front-end and .net core webAPI with repository pattern for back-end. I'm trying to use DevExpress(v20.1) reports. But I couldn't figure it out how to make it. I'm searcing it for a week but no result. This page and this page explains it. but I couldn't figure out how to configure this part of code;

public class ReportDesignerController : Controller {
//...
 public ActionResult GetReportDesignerModel(string reportUrl) {
     string modelJsonScript =
         new ReportDesignerClientSideModelGenerator(HttpContext.RequestServices)
         .GetJsonModelScript(
             reportUrl,                 
             GetAvailableDataSources(), //this metod implemented 
             "DXXRD",   
             "DXXRDV",
             "DXXQB"      
         );
     return Content(modelJsonScript, "application/json");
 }

}

can anyone tell me how to configure "DXXRD","DXXRDV","DXXRDV" correctly. I'm not using mvc so when I replace code with this;

new ReportDesignerClientSideModelGenerator()
         .GetJsonModelScript(
             reportUrl,                 
             GetAvailableDataSources(), 
             "ReportDesigner/Invoke",    
             "WebDocumentViewer/Invoke", 
             "QueryBuilder/Invoke"       .
         );

I have to use MVC to be able to call these controllers and views. But I'm not using mvc. At the point where I am now, I started to think that I wouldn't be able to achieve this without MVC. So;

  • Is it possible to use DevExpress Reporting in projects like my project?
  • If yes how?
Solution

  • DevExpress Reporting components uses ASP.NET MVC Core controllers to process requests from the Report Designer, Document Viewer, and Query Builder using predefined routes:

    So it's mandatory to register the MVC middleware and ASP.NET Core MVC reporting controllers in your app. You can proceed by adding the following code at application startup:

        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();
            // ...
      }
    }

    You can find more information in documentation: