Create an ASP.NET Core Application with the Document Viewer

This tutorial describes how to use the DevExpress Template Gallery and .NET Core command line interface (CLI) to create a new ASP.NET Core application with the HTML5 Document Viewer control.

Tip

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

The Add a New Report to an ASP.NET Core Application tutorial provides instructions on how to add a report to an ASP.NET Core application.

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.

    create-new-application-windows-forms

  2. In the invoked New Project dialog, select the Installed | Visual C# | Web category and the DevExpress v18.2 Template Gallery template.

    asp-net-mvc-reports-create-devexpress-template-gallery

    Specify the application name and click OK.

  3. In the invoked DevExpress Template Gallery, select Reporting Application under the NET Core category and click Create Project.

    create-new-aspnet-core-reporting-application-template-gallery

  4. In the invoked DevExpress ASP.NET MVC Project Wizard, enable the Create Viewer Page check box to add the Document Viewer to the web application (the Viewer.cshtml page).

    Tip

    You can add the Web Document Viewer and Report Designer to the application.

    create-viewer-page

    This page provides the following control options:

    • Create Report Storage - Specifies whether to create server-side storage for web reports. This option adds a new class inherited from the abstract ReportStorageWebExtension class and registers this custom storage in the application. The Document Viewer does not allow you to show report layouts with subreports if you did not implement the report storage.
    • Report Storage Name - Specifies the report storage class name.
    • Data Binding Mode - Specifies the mode to provide data to report controls. Select Expressions or Expressions (Advanced) to enable expression bindings for report element properties and additional summary features.
    • Log Errors and Events - Specifies whether to use the LoggerService class to log server-side errors and events related to the Document Viewer functionality to a particular file.
    • Add Sample Data Source - Specifies whether to add a sample database file to an application and register the connection string in the app.settings file.

    Click Create Project to complete the creation process.

  5. Once Visual Studio created an application, right-click the bower.json file in the Solution Explorer window and choose "Restore Packages".

    Tip

    Follow instructions from the Bower: A package manager for the web article if Bower is not installed on your machine.

  6. The created project includes the registered ReportStorageWebExtension1 report storage. This storage provides reports added to the project at design time as embedded resources. The following code demonstrates how to properly pass a report to the Document Viewer's Bind method so that ReportStorageWebExtension1 can find the report in the project's resources:

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

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 that the Document Viewer requires.

  3. Use the command below to create a new project with the Document Viewer. Pass the the NuGet Feed URL obtained above as a parameter.

    dotnet new dx.reporting --nuget-feed https://nuget.devexpress.com/{auth_key}/api --name DocumentViewerApp --add-designer false

    DevExpress Reporting templates have the following parameters:

    • -nf | --nuget-feed (required) - Specifies your personal DevExpress NuGet Feed URL.
    • -ad | --add-designer - Specifies whether to create a web page with the Report Designer that enables your end-users to create and customize reports. The default value is true.
    • -av | --add-viewer - Specifies whether to create a web page with the Document Viewer that allows you to preview, print, and export reports. The default value is true.
    • -ads | --add-data-source - Specifies whether to add a sample database file to a project and register the corresponding connection string in the application configuration file. The default value is false.
    • -ul | --use-logger - Specifies whether to log server-side errors and events related to the Document Viewer functionality to a specific file. The default value is false.
  4. Run the commands below to navigate to the created application's folder and download all the necessary client resources.

    cd DocumentViewerApp

    bower install

    Tip

    Follow instructions in the Bower: A package manager for the web article if Bower is not installed on your machine.

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

    dotnet restore

    dotnet run

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