Skip to main content

Create an ASP.NET Core Application with a Document Viewer

  • 4 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 Document Viewer control.

Follow the steps below to create an ASP.NET Core application with a Document Viewer:

  • Ensure that Node.js 10.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 (if the package’s version does not match the version you installed, check the PATH environment variable’s value - as there may be a conflict between an x86 and x64 package).

Create a New Project

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

    Create New Web Application

  2. Select the DevExpress v22.1 Web App Template Gallery, and click Next:

    Select Web App Template Gallery

  3. Specify a project name and location, and click Create:

     Web App Template Gallery Configure Project

  4. In the invoked DevExpress Template Gallery, select Reporting Application in the .NET Core category.

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

    Select framework version and click Create Project.

  5. Set Add Viewer Page to true to add the Document Viewer (the Viewer.cshtml view) to the web application. You can add a Web Document Viewer and a Report Designer to the application.

    web-reporting-project-wizard-select-viewer

    Use the following Document Viewer settings:

    • Report Storage Name- the server-side report storage‘s class name.
    • Data Binding Mode* - switches between the Expressions and Expressions (Advanced) modes that specify how data is fetched to reports and controls. See Data Binding Modes for more information.

    Click Create Project to apply these settings to the project.

  6. After Visual Studio has created the application, right-click the package.json file in Solution Explorer and choose Restore Packages.

    Restore Packages

  7. (Optional) You can configure the Document Viewer to load a different report when the application starts. Navigate to the Views | Home | Viewer.cshtml file and replace the built-in report name (TestReport in this example) with the name of your report:

    @{
        var viewerRender = Html.DevExpress().WebDocumentViewer("DocumentViewer")
            .Height("1000px")
            .Bind("TestReport");
        @viewerRender.RenderHtml()
    }
    
  8. Run the project to see the result:

    asp-net-core-document-viewer-result

Use .NET Core CLI

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

  1. Open the command prompt (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 package is installed.

  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 to access the NuGet package source.

  3. Use the command below to create a new project with a Document Viewer.

    dotnet new dx.reporting --nuget-feed https://nuget.devexpress.com/{auth_key}/api --name DocumentViewerApp --add-viewer 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) - the framework version. Use values netcoreapp2.1 or netcoreapp3.0. The default value is netcoreapp3.0.
    • -av | –add-viewer - specifies whether to create a web page with a Document Viewer. The default value is true.
    • -ul | –use-logger (optional) - specifies whether to log the Report Designer‘s server-side errors and events. The default value is false.

    See Create an ASP.NET Core Application with a Report Designer for information on other settings.

  4. Navigate to the newly created application folder and download client resources.

    cd DocumentViewerApp
    npm install
    

    Ensure that Node.js 10.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 (if the package’s version does not match the version you installed, check the PATH environment variable’s value - 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. The command output contains the application URL which can be different on different hosts:

    Now listening on: http://localhost:2009

    Open your browser and navigate to the URL to see the result.

    asp-net-core-document-viewer-result