Add a Report Designer to an ASP.NET MVC Application

• Mar 06, 2025
• 5 minutes to read

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

If you add the Document Viewer to an existing application, start with the following section: .

Create a New ASP.NET MVC Web Application

1. Create a new project in Visual Studio and select ASP.NET Web Application (.NET Framework) on the start page as a project template:

2. Specify the project name, location and target framework:

3. In the next page, select MVC as a project template:

Run DevExpress ASP.NET Project Wizard

IInvoke the DevExpress ASP.NET Project Wizard to update the existing project. To do this, click the Extensions menu item in Visual Studio and select DevExpress → ASP.NET Controls → 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

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

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

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

Add a Sample Report

1. Right-click the project in the Solution Explorer and select Add | New Folder from the context menu. Rename the 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 v25.2 Report.

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.

Implement MVC Controller to Process Requests

You 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. To do this, follow the steps below:

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

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

Create a Model and Pass the Model to the View

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

1. Implement HomeController as follows:

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

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

Initialize Report Designer on Startup

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

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

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:

• Report Designer Requirements and Limitations
• Troubleshooting
• Client Script Libraries

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.

See Also

Create a Report in Visual Studio