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.
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.
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
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 v23.2 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.
Modify Controllers
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.v23.2.Web assembly to resolve the base controller type.
Open the
HomeController.csfile and add the following code that passes the CachedReportSourceWeb object as a model object to theIndexview: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:
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.