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

• Aug 01, 2019
• 3 minutes to read

Note

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

This tutorial describes how to add an End-User Report Designer to an ASP.NET MVC reporting application:

1. Add a required report to the current project and rebuild this project.

2. Insert the ReportDesigner MVC extension in one of the following ways:

   • Use the DevExpress MVC Extension Wizard

     Open the main view (named Index.cshtml) and right-click anywhere in the view window. In the invoked context menu, select Insert DevExpress MVC Extension.

     

     In the invoked dialog, select the Reports tab and then the ReportDesigner extension. Specify the required report as a model class to display in the Web Report Designer and click Insert. Note that you should add the report to the project before running this dialog.

     

     The Web Report Designer displays a new empty report if you did not choose a report.

     After that, the required style sheet and script extensions are registered automatically, and the following view code is generated:

     Razor

     @Html.DevExpress().ReportDesigner(settings => {
         settings.Name = "ReportDesigner";
     }).Bind(new DXWebApplication1.XtraReport1()).GetHtml()
     

   • Manually Register the Required Extension

     Switch to the HomeController.cs file and pass a new instance of the added report as a model object to the Index view returned by the corresponding action method.

     C#

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

     VB.NET

     Imports System.Web.Mvc
     ' ...
     
     Public Class HomeController
         Inherits Controller
         Public Function Index() As ActionResult
             Return View(New XtraReport1())
         End Function
     End Class
     

     Switch the Index.cshtml file and add the following code to generate the Designer:

     Razor

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

     Register the corresponding style sheet and script extensions in the _Layout.cshtml file.

     Razor

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

3. Add the “resources” section to the application’s Web.config file to automatically transfer all necessary script files to a client application.

   XML

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

   See the Report Designer Requirements and Limitations document to learn about manual integration of the Report Designer.

4. Implement report storage used to store reports created in the Report Designer.
5. If required, you can register default data sources available for all reports opened in the Report Designer.
6. You can also register default data connections available in the Data Source Wizard when creating new data sources.

Run the application to view the result in a web browser.