Skip to main content

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

  • 4 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, but to keep this topic simple, we start 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:

<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:

<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:

@*@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. If you leave the line that attaches jQuery scripts, the error jQuery script was attached multiple times and mixed up with DevExpress scripts is shown in the browser console.

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

  1. Right-click the project in the Solution Explorer and select Add | New Folder from the context menu. Rename the newly created folder to Reports.

  2. 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 v22.1 Report.

    Add New Report

    Rename the new report to TestReport and click Add.

  3. Select the Blank report type in the invoked Report Wizard.

  4. The Report Designer displays the newly created blank report. Save the report and close the designer.
  5. 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.

Modify Controllers

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

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

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

  2. Open the HomeController.cs file and add the following code that passes the CachedReportSourceWeb object as a model object to the Index view:

    using System.Web.Mvc;
    using DevExpress.XtraReports.Web;
    // ...
    
    public class HomeController : Controller {
        public ActionResult Index()
        {
            return View(new Reports.TestReport());
        }
    }
    

Add the ReportDesigner Extension

Insert the following code in the View page:

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

<script type="text/javascript">
    ReportDesigner.handlerUri = '@Url.Action("Invoke", "ReportDesigner")';
    ReportDesigner.viewerHandlerUri = '@Url.Action("Invoke", "WebDocumentViewer")';;
    ReportDesigner.queryBuilderHandlerUri = '@Url.Action("Invoke", "QueryBuilder")';
</script>

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

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

See Also