Create an ASP.NET Core Application with a Report Designer

• Mar 27, 2020
• 6 minutes to read

This tutorial describes how to use the DevExpress Template Gallery or .NET Core command line interface (CLI) to generate a basic ASP.NET Core application that contains the End-User Report Designer control.

Tip

See ASP.NET Core Reporting for information about DevExpress Reporting in ASP.NET Core applications.

The Create a Report in Visual Studio tutorial provides instructions on how to add a report to an ASP.NET Core application.

Use the DevExpress Template Gallery

Perform the following steps to create an ASP.NET Core application in Visual Studio:

1. Select FILE | New | Project in the main menu or press CTRL+SHIFT+N to create a new project.

   

2. Select the Installed | Visual C# | Web category in the invoked New Project dialog and select the DevExpress v19.2 Template Gallery template.

   

   Specify the application name and click OK.

3. Select Reporting Application from the NET Core category in the invoked DevExpress Template Gallery.

   

   Select framework version and click Create Project.

4. Enable the Add Designer Page checkbox in the invoked DevExpress ASP.NET MVC Project Wizard to add the Report Designer (the Designer.cshtml page) to the web application.

   

   Use the following Report Designer settings:

   • Report Storage Name - Specifies the class name of a sample server-side report storage. This storage allows you to open report layout files (REPX) from the Reports folder and instances of report types contained in the assembly. A storage service implemented in the template is based on the Reports folder. If you modify a report in the Web Report Designer, it is saved to the REPX file in the Reports folder.
   • Data Binding Mode - Specifies the data fetch mode for report controls. You can switch between legacy binding mode and expression bindings.
   • Log Errors and Events - Specifies whether to use the LoggerService class to log the Report Designer‘s server-side errors and events.
   • Add Sample Database - Specifies whether to create a sample connection string and register it in the Report Designer to create SQL Data Sources in the Report Wizard and Data Source Wizard. The connection string is also used to register a predefined data source.
   • Add Sample JSON Data Connection Storage - Specifies whether to create a storage and register it to create JSON Data Sources in the Report Wizard and Data Source Wizard.

     Important

     Install the Newtosoft.Json package to work with JSON data source.

   • Add Sample Data Object - Specifies whether to add a sample data object to an application and register this data object to create Object Data Sources in the Report Wizard and Data Source Wizard.
   • Enable Rich Text Editor - Specifies whether to add an in-line Rich Text Editor for the RichText control.

   Click Create Project to apply these settings to the project.

5. Once Visual Studio created an application, right-click the Dependencies | npm folder in the Solution Explorer window and choose Restore Packages (you should run Visual Studio with administrator privileges).

6. You can specify a report to open in the Report Designer when the application starts. Navigate to the Views | Home | Designer.cshtml file and replace the built-in unique report name with your report’s name:

   Designer.cshtml

   @Html.DevExpress().WebDocumentViewer("DocumentViewer").Height("1000px").Bind("TestReport")
   

Tip

The template implements the ReportStorageWebExtension1 class that saves the reports you change in the Report Designer to a file in the Reports folder. You can create a ReportStorageWebExtension class descendant and implement logic to save reports to any other location.

Use the Console

Use the .NET Core command line interface (CLI) to create an ASP.NET Core Reporting application from the console:

1. Open the console and type the following command to install DevExpress CLI templates:

   dotnet new -i "DevExpress.DotNet.Web.ProjectTemplates"
   

   The console displays the list of templates installed on your machine after the installation command is finished.

   

2. Refer to the https://nuget.devexpress.com/#feed-url page and obtain the NuGet Feed URL. This URL includes your personal feed authorization key and is used to install NuGet packages for the Report Designer.

3. Use the command below to create a new project with a Report Designer and provide it with a sample data source. Pass the NuGet Feed URL as a parameter.

   dotnet new dx.reporting --nuget-feed https://nuget.devexpress.com/{auth_key}/api --name ReportDesignerApp --add-designer true --add-data-source true
   

   Specify the following command line parameters to customize the project:

   • -nf | –nuget-feed (required) - Specifies your personal DevExpress NuGet Feed URL.
   • -f |–framework (optional) to specify the framework to target. Use values netcoreapp2.1 or netcoreapp3.0. The default value is netcoreapp3.0.
   • -ad | –add-designer - Specifies whether to create a web page with the Report Designer. The default value is true.
   • -av | –add-viewer (optional) - Specifies whether to create a web page with a Document Viewer. The default value is true.
   • -ads | –add-data-source - Specifies whether to create a sample connection string and register it in the Report Designer to create SQL Data Sources in the Report Wizard and Data Source Wizard. The connection string is also used to register a predefined data source. The default value is false.
   • -ul | –use-logger (optional) - Specifies whether to log the Report Designer‘s server-side errors and events. The default value is false.
   • -ajs | –add-json-data-connection-storage (optional) - Specifies whether to create a storage and register it to create JSON Data Sources in the Report Wizard and Data Source Wizard. For the storage to work correctly, ensure that the Newtosoft.Json package is installed. The default value is false.
   • -ao | –add-data-object (optional) - Specifies whether to add a sample data object to an application and register this data object to create Object Data Sources in the Report Wizard and Data Source Wizard. The default value is false.
   • -rte | –enable-rich-text-editor (optional) - Specifies whether to add an in-line Rich Text Editor for the RichText control. The default value is false.

4. Run the commands below to navigate to the created application’s folder and download the client resources.

   cd ReportDesignerApp
   

   npm install
   

   Tip

   Make sure Node.js 8.0 or later with the npm package manager is installed on your computer.
   Use the node -v and npm -v console commands on 64-bit Windows systems to check package versions.
   Check the PATH environment variable’s value if a package’s version does not match the version you installed, as there may be a conflict between an x86 and x64 package.

5. Use the following commands to restore dependencies, build the application, and get the application’s URL:

   dotnet restore
   

   dotnet run
   

6. Open your browser and insert the generated URL to see the result.