Creating a Server Side for the Report Designer

• Jul 05, 2018
• 4 minutes to read

This document describes how to create and configure an ASP.NET MVC application as a server-side solution for using the End-User Web Report Designer in JavaScript:

1. Create a new ASP.NET MVC project using the Template Gallery and enable the Report Suite to include all the required resources automatically. Refer to Adding a New Report to an ASP.NET MVC Application for a step-by-step tutorial.

   You can provide a reporting functionality to an existing MVC application by registering the required extensions as described in Manual Integration of ASP.NET MVC Reporting Extensions Into an Existing Project.

2. Implement your custom MVC controllers by inheriting them from the following classes:

   • WebDocumentViewerApiController
   • ReportDesignerApiController
   • QueryBuilderApiController

3. For the added controllers, override the Invoke action to allow cross-domain requests:

   C#

   using System.Web.Mvc;
   using DevExpress.Web.Mvc.Controllers;
   //...
   
   public class ReportDesignerController : ReportDesignerApiController {
       //...
       public override ActionResult Invoke() {
           var result = base.Invoke();
           Response.AppendHeader("Access-Control-Allow-Origin", "*");
           return result;
       }
   }
   

   VB.NET

   Imports System.Web.Mvc
   Imports DevExpress.Web.Mvc.Controllers
   '...
   
   Public Class ReportDesignerController
       Inherits ReportDesignerApiController
       '...
       Public Overrides Function Invoke() As ActionResult
           Dim result = MyBase.Invoke()
           Response.AppendHeader("Access-Control-Allow-Origin", "*")
           Return result
       End Function
   End Class
   

   Additionally, override the GetLocalization action in the same way if you need to customize localization strings.

4. Implement a server-side report storage by inheriting from the ReportStorageWebExtension class and overriding its methods.

   C#

   using DevExpress.XtraReports.Web.Extensions;
   
   public class MyReportStorage : ReportStorageWebExtension {
      // ...
   }
   

   VB.NET

   Imports DevExpress.XtraReports.Web.Extensions
   
   Public Class MyReportStorage
       Inherits ReportStorageWebExtension
       ' ...
   End Class
   

   Register the custom web report storage using the static ReportStorageWebExtension.RegisterExtensionGlobal method on the application’s startup.

   C#

   using DevExpress.XtraReports.Web.Extensions;
   
   protected void Application_Start() {
       // ...
       ReportStorageWebExtension.RegisterExtensionGlobal(new MyReportStorage());
   }
   

   VB.NET

   Imports DevExpress.XtraReports.Web.Extensions
   
   Protected Sub Application_Start()
       ' ...
       ReportStorageWebExtension.RegisterExtensionGlobal(New MyReportStorage())
   End Sub
   

5. In your ReportDesignerApiController implementation, add an action to create the Report Designer model using the ReportDesignerClientSideModelGenerator class and provide the following initialization data:

   • A report URL (required);
   • Available data sources (optional);
   • URIs for reporting controllers’ Invoke actions (required).
   C#

   using System.Web.Mvc;
   using DevExpress.Web.Mvc.Controllers;
   using DevExpress.XtraReports.Web.ReportDesigner;
   //...
   
   public class ReportDesignerController : ReportDesignerApiController {
       //...
        public ActionResult GetReportDesignerModel(string reportUrl) {
            Response.AppendHeader("Access-Control-Allow-Origin", "*");
   
            string modelJsonScript =
                new ReportDesignerClientSideModelGenerator()
                .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.
                    "ReportDesigner/Invoke",   // The URI path of the controller action that processes requests from the Report Designer.
                    "WebDocumentViewer/Invoke",// The URI path of the controller action that processes requests from the Web Document Viewer.
                    "QueryBuilder/Invoke"      // The URI path of the controller action that processes requests from the Query Builder.
                );
            return Content(modelJsonScript, "application/json");
        }
   }
   

   VB.NET

   Imports System.Web.Mvc
   Imports DevExpress.Web.Mvc.Controllers
   Imports DevExpress.XtraReports.Web.ReportDesigner
   '...
   
   Public Class ReportDesignerController
       Inherits ReportDesignerApiController
       '...
       Public Function GetReportDesignerModel(reportUrl As String) As ActionResult
           Response.AppendHeader("Access-Control-Allow-Origin", "*")
           Dim modelJsonScript As String = New ReportDesignerClientSideModelGenerator().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.
              "ReportDesigner/Invoke",   ' The URI path of the controller action that processes requests from the Report Designer.
              "WebDocumentViewer/Invoke",' The URI path of the controller action that processes requests from the Report Designer.
              "QueryBuilder/Invoke")     ' The URI path of the controller action that processes requests from the Query Builder.
           Return Content(modelJsonScript, "application/json")
       End Function
   End Class
   

6. Declare a method that creates data sources for the Report Designer (that is, the GetAvailableDataSources method used at the previous step when creating the Report Designer model):

   Tip

   Skip this step if you do not need to provide data sources for the Report Designer.

   C#

   using System.Web.Mvc;
   using System.Collections.Generic;
   using DevExpress.Web.Mvc.Controllers;
   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;
       }
   }
   

   VB.NET

   Imports System.Web.Mvc
   Imports System.Collections.Generic
   Imports DevExpress.Web.Mvc.Controllers
   Imports DevExpress.DataAccess.Sql
   
   Public Class ReportDesignerController
       Inherits ReportDesignerApiController
       ' ...
   
       Private Function GetAvailableDataSources() As Dictionary(Of String, Object)
           Dim dataSources = New Dictionary(Of String, Object)()
           Dim ds As New SqlDataSource("Northwind_Connection")
           Dim query = SelectQueryFluentBuilder.AddTable("Products").SelectAllColumns().Build("Products")
           ds.Queries.Add(query)
           ds.RebuildResultSchema()
           dataSources.Add("SqlDataSource", ds)
           Return dataSources
       End Function
   End Class