Add the Document Viewer to an ASP.NET Core Application (CTP)

This tutorial describes how to add the Document Viewer control to an ASP.NET Core application.

Tip

See an overview on using DevExpress Reporting in ASP.NET Core applications.

Learn how to add a report to an ASP.NET Core application using the Add a New Report to an ASP.NET Core Application (CTP) tutorial.

Install Required Packages

Perform the following steps to install the NuGet packages required for the Document Viewer control:

Note

If you prefer using Bower packages, install the xtrareports.js bower package instead.

  1. Right-click the Dependencies node in the Solution Explorer and select Manage NuGet Packages in the invoked context menu.

    context-menu-manage-nuget-packages

  2. Select DevExpress 18.1 Local in the Package source drop-down list and go to the Browse page. Enable the Include prerelease check box, find the DevExpress.AspNetCore.Reporting package and install it.

    install-asp-net-core-reporting-nuget-package

  3. Right-click the application name in the Solution Explorer and select Add | Add New Item. In the invoked Add New Item dialog, select the Installed | Visual C# | ASP.NET Core | Web category and the npm Configuration File item template. Click Add.

    add-npm-config-file

    This adds the package.json file to the project. Open this file and add the following dependencies:

    {
        "version": "1.0.0",
        "name": "asp.net",
        "private": true,
        "dependencies": {
            "devexpress-reporting": "^18.1.3",
            "globalize": "~1.3.0",
            "cldrjs": "~0.5.0",
            "jquery-ui-dist": "^1.12.1"
        }
    }
    
  4. Right-click the package.json file and select Restore Packages. This adds the node_modules folder to the application project. Configure the application so that it can serve this folder's files.

    using DevExpress.AspNetCore;
    using DevExpress.AspNetCore.Reporting;
    using Microsoft.Extensions.FileProviders;
    using System.IO;
    //...
    
    public class Startup {
    //...
        public void Configure(IApplicationBuilder app, IHostingEnvironment env) {
            // ...
            app.UseStaticFiles();
            // ...
            app.UseStaticFiles(new StaticFileOptions {
                FileProvider = new PhysicalFileProvider(Path.Combine(env.ContentRootPath, "node_modules")),
                RequestPath = "/node_modules"
            });         
        }
    }
    
    Note

    All the files in the node_modules folder are now accessible from the client. To make only required client resources accessible, use bundling and minification by the means of Gulp, as an example.

Add the Document Viewer Control

Do the following to integrate the Document Viewer into the ASP.NET Core project:

  1. Open the Startup file and modify it to configure services as demonstrated below.

    using DevExpress.AspNetCore;
    using DevExpress.AspNetCore.Reporting;
    //...
    
    public class Startup {
    //...
        public void ConfigureServices(IServiceCollection services) {
            // Register reporting services in an application's dependency injection container.
            services.AddDevExpressControls();
            // Adds MVC controllers for processing requests with the default routes.
            services.AddMvc().AddDefaultReportingControllers(); 
        }
    
        public void Configure(IApplicationBuilder app, IHostingEnvironment env) {
            // ...
            app.UseStaticFiles();
            // Initialize reporting services.
            app.UseDevExpressControls();
            // ...
        }
    }
    
  2. In the _ViewImports.cshtml file, import the DevExpress.AspNetCore namespace to be used by all other Views. Alternatively, you can add this namespace to the Views with reporting controls.

    @using DevExpress.AspNetCore
    
  3. Create a new View file or open an existing one (for example, the Index.cshtml file), and link all the required resources as shown below.

    <link href="~/node_modules/jquery-ui-dist/jquery-ui.min.css" rel="stylesheet" />
    
    <script src="~/node_modules/jquery/dist/jquery.min.js"></script>
    <script src="~/node_modules/jquery-ui-dist/jquery-ui.min.js"></script>
    
    <script src="~/node_modules/knockout/build/output/knockout-latest.js"></script>
    
    <script src="~/node_modules/cldrjs/dist/cldr.js"></script>
    <script src="~/node_modules/cldrjs/dist/cldr/event.js"></script>
    <script src="~/node_modules/cldrjs/dist/cldr/supplemental.js"></script>
    <script src="~/node_modules/cldrjs/dist/cldr/unresolved.js"></script>
    
    <script src="~/node_modules/globalize/dist/globalize.js"></script>
    <script src="~/node_modules/globalize/dist/globalize/currency.js"></script>
    <script src="~/node_modules/globalize/dist/globalize/message.js"></script>
    <script src="~/node_modules/globalize/dist/globalize/number.js"></script>
    <script src="~/node_modules/globalize/dist/globalize/date.js"></script>
    
    <script src="~/node_modules/devextreme/dist/js/dx.all.js"></script>
    <link href="~/node_modules/devextreme/dist/css/dx.common.css" rel="stylesheet" />
    <link href="~/node_modules/devextreme/dist/css/dx.light.css" rel="stylesheet" />
    
    <!-- If your application contains the Document Viewer only -->
    <script src="~/node_modules/devexpress-reporting/dist/js/dx-designer.js"></script>
    <script src="~/node_modules/devexpress-reporting/dist/js/web-document-viewer.js"></script>
    <script src="~/node_modules/devexpress-reporting/dist/html/web-document-viewer.html" type="text/html"></script>
    <link href="~/node_modules/devexpress-reporting/dist/css/web-document-viewer-light.min.css" rel="stylesheet" />
    

    Make sure that you meet all the requirements for deploying the control on the client. Refer to the Document Viewer Requirements and Limitations topic for a list of necessary client resources.

  4. In the View file, use the WebDocumentViewer.overloads wrapper to display the End-User Report Designer on your web page.

    @Html.DevExpress().WebDocumentViewer("WebDocumentViewer").Height("1000px")
    
  5. Open the Program file and modify the BuildWebHost method as shown below to disable scoped services' validation:

    public static IWebHost BuildWebHost(string[] args) =>
        WebHost.CreateDefaultBuilder(args)
            .UseStartup<Startup>()
            .UseDefaultServiceProvider(options => options.ValidateScopes = false)
            .Build();
    
  6. In the _Layout.cshtml file, move the following links from the body to the head section:

    <head>
        ...
        <environment include="Development">
            <script src="~/node_modules/jquery/dist/jquery.js"></script>
            <script src="~/node_modules/bootstrap/dist/js/bootstrap.js"></script>
            ...
        </environment>
        <environment exclude="Development">
            ...
        </environment>
    </head>
    

    Perform this action to avoid overriding scripts required to correctly render the control, since jQuery links in the environment containers are inserted after rendering the reporting control by default.

Provide Report Storage

Implement Report Storage to display reports in the Document Viewer.

Do the following to implement server-side report storage:

  1. Create a new folder under the Services name to store all custom services by right-clicking the application name in the Solution Explorer and selecting Add | New Folder.
  2. Add a new class by inheriting from the abstract ReportStorageWebExtension class and overriding its methods.

    See the Implement a Report Storage topic for detailed information on this class and a custom storage example. You can use the Report Storage implementation that gets reports from the project's embedded resources. This allows you to view reports added at design time.

  3. Register the custom report storage in the Startup class using the static ReportStorageWebExtension.RegisterExtensionGlobal method.

    public void Configure(IApplicationBuilder app, IHostingEnvironment env) {
        // ...
        DevExpress.XtraReports.Web.Extensions.ReportStorageWebExtension.RegisterExtensionGlobal(new CustomReportStorageWebExtension());
    }
    
  4. The Document Viewer uses the Report Storage to get a report by its unique name. The following code demonstrates how to bind the Document Viewer to a report's name:

    @Html.DevExpress().WebDocumentViewer("WebDocumentViewer").Height("1000px").Bind("<ReportName>")
    

Additional Customization

You can register custom and/or predefined services to provide specific functionality for the Document Viewer. Refer to the Register Services in the Document Viewer topic for the available services list and methods used for their registration.

In ASP.NET Core applications, you can register these services using similar methods in the Startup class. The only difference is that these methods are available at the level of the ConfigureServices method's parameter.

See Introduction to Dependency Injection in ASP.NET Core for more information on registering the services.

public void ConfigureServices(IServiceCollection services) {
    // ...
    services.ConfigureReportingServices(configurator => {
        configurator.ConfigureWebDocumentViewer(viewerConfigurator => {
            viewerConfigurator.RegisterWebDocumentViewerDrillThroughProcessor<CustomDrillThroughProcessor>();
        });
    });

    services.AddSingleton<WebDocumentViewerOperationLogger, MyOperationLogger>();
}