Add an End-User Report Designer to an ASP.NET MVC Application

Jul 03, 2024
5 minutes to read

This topic describes how to configure an ASP.NET MVC project to use DevExpress controls, add the Report Designer control to a view page, and display a report.

You can add the Report Designer to an existing application. To keep things simple, we begin with a newly created ASP.NET MVC web application.

Create a New ASP.NET MVC Web Application

Follow the steps below to create a new project from a Visual Studio template.

Select Template

Configure New Project

Create New ASP.NET MVC App

Run DevExpress ASP.NET Project Wizard

Invoke the DevExpress ASP.NET Project Wizard to update the existing project. Click the Extensions menu item in Visual Studio and select DevExpress → ASP.NET Controls → Run Wizard to Update Project.

Run Wizard to Update Project

Click Update Project.

The Wizard updates the Web.config file with DevExpress project settings and adds references to DevExpress assemblies.

Include Client-Side Scripts

Add the following section to the Web.config file to automatically register third-party scripts and DevExtreme libraries:

Web.config

<configuration>  
  <devExpress>  
    ...  
    <resources>  
      <add type="ThirdParty" />  
      <add type="DevExtreme" />  
    </resources>  
  </devExpress>  
</configuration>

Add the following code to the _Layout.cshtml file to include Reporting scripts and stylesheets, and make them available in all views:

_Layout.cshtml

<head>
...
@Html.DevExpress().GetStyleSheets(
        new StyleSheet { ExtensionSuite = ExtensionSuite.Report }
)
@Html.DevExpress().GetScripts( 
        new Script { ExtensionSuite = ExtensionSuite.Report }
)  
</head>

Comment out the line that registers the jQuery scripts in the _Layout.cshtml file:

_Layout.cshtml

@*@Scripts.Render("~/bundles/jquery")*@

The jQuery script library is already registered as one of the third-party scripts with the add type="ThirdParty" directive in the Web.config file. The line that adds jQuery scripts one more time results in an error. The following message appears in the browser console: jQuery script was attached multiple times and mixed up with DevExpress scripts.

For more information, review the “Attach the Required JavaScript Files” section of the following help topic: Manual Integration into an Existing Project.

Add a Sample Report

Right-click the project in the Solution Explorer and select Add | New Folder from the context menu. Rename the newly created folder to Reports.
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 v24.1 Report.

Rename the new report to TestReport and click Add.
Select the Blank report type in the invoked Report Wizard.
The Report Designer displays the newly created blank report. Save the report and close the designer.
Rebuild the project.

Review the following help topic for more information: Add a New Report in Visual Studio.

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.

Implement MVC Controller to Process Requests

An application can register the ASPxHttpHandlerModule handler to process resources and requests. For more information, review the following help topic: Register HTTP Handlers.

An alternative method is to implement MVC controllers to handle the requests, as described in the following steps:

Add a reference to the DevExpress.XtraReports.v24.1.Web assembly to resolve the base controller type.

Implement default controllers (Viewer, Designer, and Query Builder) that process the Report Designer requests. To do this, in the Controllers folder, create a new file (ReportingControllers.cs) with the following content:

ReportingControllers.cs

using DevExpress.Web.Mvc.Controllers;
using System.Web.Mvc;

namespace WebApplication1.Controllers
{

    public class WebDocumentViewerController : WebDocumentViewerApiControllerBase
    {
        public override ActionResult Invoke()
        {
            return base.Invoke();
        }
    }

    public class ReportDesignerController : ReportDesignerApiControllerBase
    {
        public override ActionResult Invoke()
        {
            return base.Invoke();
        }
    }

    public class QueryBuilderController : QueryBuilderApiControllerBase
    {
        public override ActionResult Invoke()
        {
            return base.Invoke();
        }
    }
}

Create a Model and Pass the Model to the View

Create a ReportDesignerModel model and specify all the necessary parameters on the server:

Implement the HomeController as follows:

HomeController.cs

using System.Web.Mvc;
using DevExpress.XtraReports.Web.ReportDesigner;
using DevExpress.XtraReports.Web.ReportDesigner.Services;


public class HomeController : Controller {
    public ActionResult Index() {
        var builder = DefaultReportDesignerContainer.Current.GetService(typeof(IReportDesignerModelBuilder)) as IReportDesignerModelBuilder;
        var model = builder.Report("TestReport")
            .DesignerUri(@Url.Action("Invoke", "ReportDesigner"))
            .ViewerUri(@Url.Action("Invoke", "WebDocumentViewer"))
            .QueryBuilderUri(@Url.Action("Invoke", "QueryBuilder"))
            .BuildModel();
        return View(model);
    }
}

The code instructs the Report Designer to use default controllers with the specified handlers.

Implement and register the IReportProvider service to translate a report string identifier to a report instance.

CustomReportProvider.cs

using DevExpress.XtraReports.Services;
using DevExpress.XtraReports.UI;
using WebApplication1.Reports;
public class CustomReportProvider : DevExpress.XtraReports.Services.IReportProvider {
    public XtraReport GetReport(string id, ReportProviderContext context) {
        return id == "TestReport" ? new TestReport() : new XtraReport();
    }
}

Global.asax.cs

using DevExpress.XtraReports.Web.WebDocumentViewer;
// ...
public class MvcApplication : System.Web.HttpApplication {
    protected void Application_Start() {
        // ...
        DevExpress.XtraReports.Web.ReportDesigner.DefaultReportDesignerContainer.Register<IReportProvider, CustomReportProvider>();
        // ...
        }
}

Replace the Index.cshtml page content with the following code snippet:

Index.cshtml

@model DevExpress.XtraReports.Web.ReportDesigner.ReportDesignerModel

@Html.DevExpress().ReportDesigner(settings =>
{
    settings.Name = "ReportDesigner";
    settings.DisableHttpHandlerValidation = true;
}).Bind(Model).GetHtml()

The code disables default HTTP handlers.

Initialize Report Designer on Startup

Add a reference to the DevExpress.XtraReports.v24.1.Web.WebForms assembly.

Add the following line to the Global.asax.cs file after all service registration methods:

Global.asax.cs

// ...
public class MvcApplication : System.Web.HttpApplication {
    protected void Application_Start() {
        // ...
        // ...
        DevExpress.Web.Mvc.MVCxReportDesigner.StaticInitialize();
    }
}

Troubleshooting

Run the project and observe the result. If the Report Designer is not displayed or an error message is shown, review the following help topics to diagnose and remedy the problem:

Watch Video: Reporting: ASP.NET MVC End-User Report Designer (YouTube)

Next Steps

Implement report storage used to store reports created in the Report Designer.
Register default data sources available for all reports opened in the Report Designer.
Register default data connections available in the Data Source Wizard when creating new data sources.

Controls

Tools

Controls and Extensions

Tools

Maintenance Mode

Controls

Tools

Controls and Extensions

Tools

Maintenance Mode

Create a New ASP.NET MVC Web Application

Run DevExpress ASP.NET Project Wizard

Include Client-Side Scripts

Add a Sample Report

Implement MVC Controller to Process Requests

Create a Model and Pass the Model to the View

Initialize Report Designer on Startup

Troubleshooting

Next Steps