ActiveReports 15 .NET Edition
ActiveReports 15 User Guide / Concepts / ActiveReports Web Designer / Web Designer ASP.NET Middleware
In This Topic
    Web Designer ASP.NET Middleware
    In This Topic

    ASP.NET Core middleware is a software to handle http requests and response. Each middleware component serves specific purpose like one middleware authenticates a user, the other middleware handles the static files like javascript or css files. These middleware components together setup a request processing pipeline.

    The request pipeline is configured in the Configure method in the Startup class. It is these middleware components in the pipeline that determine how a request is processed in ASP.NET Core. The default code developed by the ASP.NET Core Web App template sets up the request processing pipeline for the application using set of middlewares - UseDeveloperExceptionPage() and UseStaticFiles() of IApplicationBuilder interface. The middlewares are executed in the order in which they are added in the pipeline.

    To allow designing reports from browser, you need to configure ActiveReports Web Designer in ASP.NET Core middleware. It is done by adding the UseDesigner() middleware in Configure method, that configures middleware for ActiveReports API and handlers. To use previewing ability of the JSViewer with the designer, add UseReporting() middleware along with the UseDesigner() middleware. 

    Create an ASP.NET Core Project

     The steps to create a Web Designer sample using ASP .NET MVC Core application are as follows:

    1. Open Microsoft Visual Studio 2019 and create a new ASP .NET Core Web Application project.

      Configure your new project dialog

    2. Type a name for your project and click Create.

      Create a new ASP.NET core web application dialog

    3. Select ASP.NET Core 5.0 and choose a template of the framework you are building your application with, from the project templates:

      Create a new ASP.NET core web application dialog

      • ASP.NET Core with Angular (for Integration to Angular Application)
      • ASP.NET Core with React.js (for Integration to React Application)
      • ASP.NET Core Empty (for Pure JavaScript Integration)

      Configure ActiveReports in ASP.NET Core Middleware

    4. Right-click the Solution under the Solution Explorer and select Manage Nuget Packages.

    5. In the window that appears, go to Browse and input Microsoft.AspNetCore.StaticFiles, select the latest version and click Install.

      Nuget Package Manager dialog

    6. In the window that appears, go to Browse and input the following package and click Install

      GrapeCity.ActiveReports.Aspnetcore.Designer

      Nuget Package Manager dialog

    7. In the License Acceptance dialog that appears, click I Accept.

    8. Create 'resources' folder in your sample project root; you can put your existing reports, themes, and images in this folder.

    9. Make sure to set the Build Action property of the resources to 'Embedded Resource'.

    10. Open 'Startup.cs' file and add the following 'using' statement at the top.

      using GrapeCity.ActiveReports.Aspnetcore.Designer;
      

    11. Modify the content for the Startup.cs file as follows to enable the application to use ActiveReports:

      Startup.cs
      Copy Code
      using System.IO;
      using Microsoft.AspNetCore.Builder;
      using Microsoft.AspNetCore.Hosting;
      using Microsoft.Extensions.DependencyInjection;
      using GrapeCity.ActiveReports.Aspnetcore.Designer;
      namespace WebDesignerSample
      {
              public class Startup
              {
                      // resources (reports, themes, images) location
                      private static readonly DirectoryInfo ResourcesRootDirectory = new DirectoryInfo(".\\resources\\");
                      public void ConfigureServices(IServiceCollection services)
                      {
                              // web designer services
                              services.AddDesigner();
                      }
                      public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
                      {
                              // web designer middleware
                              app.UseDesigner(config => config.UseFileStore(ResourcesRootDirectory));
                              // static files middlewares
                              app.UseDefaultFiles();
                              app.UseStaticFiles();
                      }
              }
      }