ASP.NET MVC Reporting Extension Integration
- 8 minutes to read
This topic explains how to incorporate DevExpress Reporting Extensions for ASP.NET MVC into existing ASP.NET MVC applications.
When you create a new ASP.NET MVC application using the Devexpress Template Gallery or use the general approach to integrate reporting extensions into an existing project, the resulting application is configured to support the whole set of DevExpress ASP.NET MVC extensions. This may be redundant for some applications, particularly if you want to only utilize the XtraReports Suite. In this case, perform the steps described below to incorporate DevExpress Reporting Extensions for ASP.NET MVC into your project.
Reference the Libraries and Configure the Application Settings
You can install NuGet packages and have the references and settings configured automatically. As an alternative, you can reference the assemblies and register settings manually.
Install NuGet Packages
Right-click the References node in the Solution Explorer, select Manage NuGet Packages and install the following packages from the DevExpress NuGet Gallery:
- DevExpress.Web.Mvc5
- DevExpress.Web.Reporting
After installation, all references and configuration settings are added automatically.
Reference the Assemblies Manually
You do not have to add NuGet packages if you have DevExpress components installed on your machine. Add references to the following assembly files in the ASP.NET MVC application (refer to the Assemblies Deployed with ASP.NET MVC Reporting Applications document to learn more).
- DevExpress.Charts.v24.2.Core
- DevExpress.CodeParser.v24.2
- DevExpress.Data.v24.2
- DevExpress.DataAccess.v24.2
- DevExpress.Office.v24.2.Core
- DevExpress.PivotGrid.v24.2.Core
- DevExpress.Printing.v24.2.Core
- DevExpress.RichEdit.v24.2.Core
- DevExpress.Sparkline.v24.2.Core
- DevExpress.Web.ASPxThemes.v24.2
- DevExpress.Web.Mvc.v24.2 (or DevExpress.Web.Mvc5.v24.2 if using ASP.NET MVC 5)
- DevExpress.Web.v24.2
- DevExpress.Xpo.v24.2
- DevExpress.XtraCharts.v24.2
- DevExpress.XtraReports.v24.2
- DevExpress.XtraReports.v24.2.Web
The DevExpress installer registers all assemblies in the GAC. You can open the Reference Manager dialog (for instance, using the PROJECT | Add Reference… menu item) and select these assemblies in the dialog’s Extensions tab.
Note
The version numbers and public key mentioned in this document may differ depending on the product version you purchased.
Set the CopyLocal property of the referenced assemblies to true or add the following lines to the ‘configuration > system.web > compilation > assemblies‘ section of the application’s Web.config file.
...
<assemblies>
...
<add assembly="DevExpress.Charts.v24.2.Core, Version=24.2.3.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a" />
<add assembly="DevExpress.CodeParser.v24.2, Version=24.2.3.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a" />
<add assembly="DevExpress.Data.v24.2, Version=24.2.3.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a" />
<add assembly="DevExpress.DataAccess.v24.2, Version=24.2.3.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a" />
<add assembly="DevExpress.Office.v24.2.Core, Version=24.2.3.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a" />
<add assembly="DevExpress.PivotGrid.v24.2.Core, Version=24.2.3.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a" />
<add assembly="DevExpress.Printing.v24.2.Core, Version=24.2.3.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a" />
<add assembly="DevExpress.RichEdit.v24.2.Core, Version=24.2.3.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a" />
<add assembly="DevExpress.Sparkline.v24.2.Core, Version=24.2.3.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a" />
<add assembly="DevExpress.Web.ASPxThemes.v24.2, Version=24.2.3.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a" />
<add assembly="DevExpress.Web.Mvc.v24.2, Version=24.2.3.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a" />
<add assembly="DevExpress.Web.v24.2, Version=24.2.3.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a" />
<add assembly="DevExpress.Xpo.v24.2, Version=24.2.3.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a" />
<add assembly="DevExpress.XtraCharts.v24.2, Version=24.2.3.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a" />
<add assembly="DevExpress.XtraReports.v24.2, Version=24.2.3.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a" />
<add assembly="DevExpress.XtraReports.v24.2.Web, Version=24.2.3.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a" />
...
</assemblies>
Note
When using the ASP.NET MVC 5 framework, you should add the DevExpress.Web.Mvc5.v24.2 assembly instead of the DevExpress.Web. Mvc.v24.2 assembly, as shown in the code sample below.
<assemblies>
...
<add assembly="DevExpress.Web.Mvc5.v24.2, Version=24.2.3.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a" />
...
</assemblies>
Register Settings in the Application Configuration Files Manually
The next step is to register the DevExpress HTTP handler, required namespaces and DevExpress configuration section in the application’s configuration files.
Important
If you create a backend reporting application (without UI), only step 1 (Register the ASPxHttpHandlerModule service) is mandatory. You can skip steps 2 and 3.
Register the ASPxHttpHandlerModule service in four sections of the application’s Web.config file (system.web/httpModules, system.webServer/modules, system.web/httpHandlers and system.webServer/handlers).
<system.web> ... <httpHandlers> ... <add type="DevExpress.Web.ASPxHttpHandlerModule, DevExpress.Web.v24.2, Version=24.2.3.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a" verb="GET,POST" path="DXXRD.axd" validate="false" /> <add type="DevExpress.Web.ASPxHttpHandlerModule, DevExpress.Web.v24.2, Version=24.2.3.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a" verb="GET,POST" path="DXXRDV.axd" validate="false" /> <add type="DevExpress.Web.ASPxHttpHandlerModule, DevExpress.Web.v24.2, Version=24.2.3.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a" verb="GET,POST" path="DXQB.axd" validate="false" /> </httpHandlers> <httpModules> <add type="DevExpress.Web.ASPxHttpHandlerModule, DevExpress.Web.v24.2, Version=24.2.3.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a" name="ASPxHttpHandlerModule" /> </httpModules> </system.web> <system.webServer> <handlers> ... <add type="DevExpress.Web.ASPxHttpHandlerModule, DevExpress.Web.v24.2, Version=24.2.3.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a" verb="GET,POST" path="DXXRD.axd" name="ASPxReportDesignerHandlerModule" preCondition="integratedMode" /> <add type="DevExpress.Web.ASPxHttpHandlerModule, DevExpress.Web.v24.2, Version=24.2.3.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a" verb="GET,POST" path="DXXRDV.axd" name="ASPxWebDocumentViewerHandlerModule" preCondition="integratedMode" /> <add type="DevExpress.Web.ASPxHttpHandlerModule, DevExpress.Web.v24.2, Version=24.2.3.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a" verb="GET,POST" path="DXQB.axd" name="ASPxQueryBuilderDesignerHandlerModule" preCondition="integratedMode" /> </handlers> <modules runAllManagedModulesForAllRequests="true"> <add type="DevExpress.Web.ASPxHttpHandlerModule, DevExpress.Web.v24.2, Version=24.2.3.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a" name="ASPxHttpHandlerModule" /> </modules> </system.webServer>To make the DevExpress Reporting Extensions available for use in web project pages, register the DevExpress namespaces in the ‘system.web.webPages.razor‘ section, which is located within the View folder’s Web.config file.
<system.web.webPages.razor> ... <pages pageBaseType="System.Web.Mvc.WebViewPage"> <namespaces> <add namespace="System.Web.Helpers" /> <add namespace="System.Web.Mvc" /> <add namespace="System.Web.Mvc.Ajax" /> <add namespace="System.Web.Mvc.Html" /> <add namespace="System.Web.Routing" /> <add namespace="System.Web.WebPages" /> <add namespace="System.Web.UI.WebControls" /> <add namespace="DevExpress.Web.ASPxThemes" /> <add namespace="DevExpress.XtraReports" /> <add namespace="DevExpress.XtraReports.UI" /> <add namespace="DevExpress.XtraReports.Web" /> <add namespace="DevExpress.XtraReports.Web.DocumentViewer" /> <add namespace="DevExpress.Web.Mvc" /> <add namespace="DevExpress.Web.Mvc.UI" /> </namespaces> </pages> </system.web.webPages.razor>Note
If you use the ASPX view engine, register these namespaces in the ‘configuration > system.web > pages > namespaces‘ section of the application’s Web.config file.
You can also insert the @using directives into view pages to import the required namespaces.
The DevExpress configuration section manages global configuration options. Register this section in the application’s Web.config file using the following code.
<configuration> <configSections> <sectionGroup name="devExpress"> <section name="themes" type="DevExpress.Web.ThemesConfigurationSection, DevExpress.Web.v24.2, Version=24.2.3.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a" requirePermission="false" /> <section name="compression" type="DevExpress.Web.CompressionConfigurationSection, DevExpress.Web.v24.2, Version=24.2.3.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a" requirePermission="false" /> <section name="settings" type="DevExpress.Web.SettingsConfigurationSection, DevExpress.Web.v24.2, Version=24.2.3.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a" requirePermission="false" /> <section name="errors" type="DevExpress.Web.ErrorsConfigurationSection, DevExpress.Web.v24.2, Version=24.2.3.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a" requirePermission="false" /> <section name="resources" type="DevExpress.Web.ResourcesConfigurationSection, DevExpress.Web.v24.2, Version=24.2.3.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a" requirePermission="false" /> </sectionGroup> </configSections> ... <devExpress> <themes enableThemesAssembly="true" styleSheetTheme="" theme="Mulberry" customThemeAssemblies="" /> <compression enableHtmlCompression="false" enableCallbackCompression="true" enableResourceCompression="true" enableResourceMerging="true" /> <settings doctypeMode="Html5" rightToLeft="false" ieCompatibilityVersion="edge" /> <errors callbackErrorRedirectUrl="" /> <resources> <add type="ThirdParty" /> <add type="DevExtreme" /> </resources> </devExpress> </configuration>
Note
Rebuild the project after changing the Configuration section.
Attach Java Script Files and Style Sheets
Note
If you create a backend reporting application (without the client part), you can skip this step. Review the following help sections for more information on third-party JavaScript client frameworks in Reporting application:
Register reporting scripts using the ExtensionsFactory.GetScripts (or ExtensionsFactory.RenderScripts, if your project uses the ASPX view engine) method in the View (or Layout View) page’s HEAD or BODY tag. Typically, scripts can be attached to all Views in a central location within the layout View.
<head>
...
@Html.DevExpress().GetScripts(
new Script { ExtensionSuite = ExtensionSuite.Report }
)
...
</head>
Attach style sheets using the ExtensionsFactory.GetStyleSheets extension method in the View page’s HEAD (recommended) or BODY tag. Typically, style sheets can be attached to all Views in a central location within the layout View (before the @RenderBody() expression).
<head>
...
@Html.DevExpress().GetStyleSheets(
new StyleSheet { ExtensionSuite = ExtensionSuite.Report }
)
...
</head>
Override the Default Model Binder
DevExpress editors are bound to data model fields by using Bind (dataObject, propertyName) methods or using strongly typed helpers, the DevExpressEditorsBinder model binder must be used instead of the default model binder to correctly transfer values from DevExpress editors back to corresponding data model fields.
Specify the DevExpressEditorsBinder as a model binder as follows:
Decorate the Action Method Parameter
You can declare DevExpressEditorsBinder as a parameter attribute on an action method: ([ModelBinder(typeof(DevExpressEditorsBinder))]).
Controller:
[HttpPost] public ActionResult ModelBinding([ModelBinder(typeof(DevExpressEditorsBinder))] MyModelData myModel) { ... }Overriding the Default Model Binder
You can assign DevExpressEditorsBinder to the ModelBinders.Binders.DefaultBinder property to replace the global default model binder.
Global.asax:
protected void Application_Start(){ ... ModelBinders.Binders.DefaultBinder = new DevExpress.Web.Mvc.DevExpressEditorsBinder(); }
Note
Starting with v12.1, the DevExpressEditorsBinder is automatically defined as a default model binder within projects created with the help of Template Gallery.
Perform Additional Project Adjustments
At this stage, DevExpress Reporting Extensions are fully functional, so the following steps are optional but can be useful in certain scenarios.
Include the ignore route statements with the following patterns to prevent requests from being passed to a controller.
{resource}.axd/{*pathInfo}- for the Web resource files (e.g., scripts, styles);{resource}.ashx/{*pathInfo}- for the ASHX handler, which processes the file upload functionality of DevExpress ASP.NET MVC extensions (e.g., UploadControl, FileManager, HtmlEditor).
In the registered route collection, add the required ignore route statements above the other route definitions.
// ... public static void RegisterRoutes(RouteCollection routes) { // Ignore route statements. routes.IgnoreRoute("{resource}.axd/{*pathInfo}"); routes.IgnoreRoute("{resource}.ashx/{*pathInfo}"); // Route definitions. // ... } // ...Note
If you use the ASP.NET MVC 3 framework, you can find the route definition in the ~/Global.asax.cs file. If you use the ASP.NET MVC 4 or 5 framework, the route definition is placed in the ~/App_Start/RouteConfig.cs file by default.
- If you create an MVC project using the standard ASP.NET MVC Web Application template provided by Visual Studio, the project’s Content folder contains the automatically generated Site.css file. Specific type selectors that are defined in this file and relate directly to HTML element types (such as links, input elements, tables and table cells) may affect the appearance of DevExpress MVC Reporting extensions. To fix this problem, clear the style settings defined in the element type selectors. This requirement also applies to your custom CSS files and rules.
Specify the following document type for all Views to ensure proper operation of DevExpress MVC Reporting Extensions:
<!DOCTYPE html>Check and correct (if necessary) the document type for all Views containing DevExpress MVC Reporting Extensions and/or document type of layout pages used by Views.
Add Extension Code
You can now use DevExpress MVC Reporting Extensions in your ASP.NET MVC application. This example uses the ReportDesigner extension (the project was initially created using the ASP.NET MVC 4 Web Application template). Add the following code to the Index View page.
@Html.DevExpress().ReportDesigner(settings => {
settings.Name = "ReportDesigner";
settings.SaveCallbackRouteValues = new { Controller = "Home", Action = "ReportDesigner_Save" };
}).Bind(new DevExpress.XtraReports.UI.XtraReport()).GetHtml()
After building and running the application, the Index page looks as follows:
