VintaSoft Imaging .NET SDK 11.0 for Web
In This Topic
    Add web image viewer to an ASP.NET Core application with React.js
    In This Topic

    This tutorial shows how to create a blank ASP.NET Core Web application in Visual Studio .NET 2019 and add image viewer to ASP.NET Core application with React.js.

    Here are steps, which must be done:

    1. Create a blank ASP.NET Core Web application.

      • Open Visual Studio .NET 2019 and create a new project, of ASP.NET Core Web application type:
        Create a new ASP.NET Core With React.js project
      • Configure the project to use ASP.NET Core 5.0:
        Configure the ASP.NET Core project
    2. Server side: Add references to the Vintasoft assemblies to your ASP.NET Core Web application.

      Copy Vintasoft.Shared.dll, Vintasoft.Imaging.dll, Vintasoft.Imaging.Pdf.dll, Vintasoft.Imaging.Office.OpenXml, Vintasoft.Shared.Web.dll, Vintasoft.Imaging.Web.Services.dll and Vintasoft.Imaging.AspNetCore.ApiControllers.dll assemblies from "<SdkInstallPath>\VintaSoft Imaging .NET v11.0\Bin\DotNet5\AnyCPU\" directory to the "Bin" directory of ASP.NET Core Web application and add references to assemblies in ASP.NET Core Web application.

      Add references to the Vintasoft assemblies
    3. Server side: Create web services, which allow to upload/download file, manage image collection, get information about images, get thumbnails and render image tiles.

      • Create web service that allows to upload/download file

        • Press the right mouse button on the "Controllers" folder and select the "Add => Controller..." menu from context menu
          Select 'Add => Controller' context menu for 'Controllers' folder
        • Select Empty API controller template, set the controller name to the "MyVintasoftFileApiController" and press the "Add" button
          Select Empty API controller template, set the controller name to the MyVintasoftFileApiController and press the Add button
        • Specify that MyVintasoftFileApiController class is derived from Vintasoft.Imaging.AspNetCore.ApiControllers.VintasoftFileApiController class
          Source codes of Vintasoft File API controller
          Here are source codes of MyVintasoftFileApiController class:
          using Microsoft.AspNetCore.Hosting;
          
          namespace WebApplication1.Controllers
          {
              public class MyVintasoftFileApiController : Vintasoft.Imaging.AspNetCore.ApiControllers.VintasoftFileApiController
              {
          
                  public MyVintasoftFileApiController(IWebHostEnvironment hostingEnvironment)
                      : base(hostingEnvironment)
                  {
                  }
          
              }
          }
                          
          
      • Create web service that allows to manage image collection

        • Press the right mouse button on the "Controllers" folder and select the "Add => Controller..." menu from context menu
          Select 'Add => Controller' context menu for 'Controllers' folder
        • Select Empty API controller template, set the controller name to the "MyVintasoftImageCollectionApiController" and press the "Add" button
          Select Empty API controller template, set the controller name to the MyVintasoftImageCollectionApiController and press the Add button
        • Specify that MyVintasoftImageCollectionApiController class is derived from Vintasoft.Imaging.AspNetCore.ApiControllers.VintasoftImageCollectionApiController class
          Source codes of Vintasoft Image Collection API controller
          Here are source codes of MyVintasoftImageCollectionApiController class:
          using Microsoft.AspNetCore.Hosting;
          
          namespace WebApplication1.Controllers
          {
              public class MyVintasoftImageCollectionApiController : Vintasoft.Imaging.AspNetCore.ApiControllers.VintasoftImageCollectionApiController
              {
          
                  public MyVintasoftImageCollectionApiController(IWebHostEnvironment hostingEnvironment)
                      : base(hostingEnvironment)
                  {
                  }
          
              }
          }
                          
          
      • Create web service that allows to get information about images, get thumbnails and render image tiles

        • Press the right mouse button on the "Controllers" folder and select the "Add => Controller..." menu from context menu
          Select 'Add => Controller' context menu for 'Controllers' folder
        • Select Empty API controller template, set the controller name to the "MyVintasoftImageApiController" and press the "Add" button
          Select Empty API controller template, set the controller name to the MyVintasoftImageApiController and press the Add button
        • Specify that MyVintasoftImageApiController class is derived from Vintasoft.Imaging.AspNetCore.ApiControllers.VintasoftImageApiController class
          Source codes of Vintasoft Image API controller
          Here are source codes of MyVintasoftImageApiController class:
          using Microsoft.AspNetCore.Hosting;
          
          namespace WebApplication1.Controllers
          {
              public class MyVintasoftImageApiController : Vintasoft.Imaging.AspNetCore.ApiControllers.VintasoftImageApiController
              {
          
                  public MyVintasoftImageApiController(IWebHostEnvironment hostingEnvironment)
                      : base(hostingEnvironment)
                  {
                  }
          
              }
          }
                          
          
    4. Compile the project for restoring dependencies using 'npm'.

    5. Client side: Delete files, which are not necessary in this demo.

      • Delete files "ClientApp\src\components\Counter.js", "ClientApp\src\components\FetchData.js", "ClientApp\src\components\Home.js", "ClientApp\src\components\NavMenu.js", "ClientApp\src\components\NavMenu.css" - these React components are not necessary in this demo.

      • Delete files "WeatherForecast.cs" and "Controllers\WeatherForecastController.cs" - the WeatherForecast Web API controller is not necessary in this demo.

      • Open file "ClientApp\src\components\Layout.js" and delete lines "import { NavMenu } from './NavMenu';" and "<NavMenu />" - this demo does not need navigation menu.

      • Open file "ClientApp\src\App.js" and delete code that uses the following React components: Home, FetchData, Counter - these React components are not necessary in this demo.
        Here are source codes of "App.js" file after update:
        import React, { Component } from 'react';
        import { Route } from 'react-router';
        import { Layout } from './components/Layout';
        
        import './custom.css'
        
        export default class App extends Component {
          static displayName = App.name;
        
          render () {
            return (
                <Layout>
              </Layout>
            );
          }
        }
                                    
        
    6. Client side: Add JavaScript files to the ASP.NET Core Web application.

      • Copy jQuery (version 3 or higher) file into "ClientApp\public\" folder.
        You can use jquery-3.4.1.min.js file from "<InstallPath>\VintaSoft Imaging .NET v11.0\Examples\ASP.NET MVC\CSharp\AspNetMvcImagingDemo\Scripts\External\" folder or jQuery (version 3 or higher) file from any other source.

        Copy Vintasoft.Shared.js and Vintasoft.Imaging.Html5.js files from "<InstallPath>\VintaSoft Imaging .NET v11.0\Bin\JavaScript\" folder into the "ClientApp\public\" folder.

        Add references to Vintasoft JavaScript files
      • Add references to jQuery and Vintasoft JavaScript files to the header of "ClientApp\public\index.html" file:
        <!DOCTYPE html>
        <html lang="en">
        <head>
            <meta charset="utf-8">
            <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
            <meta name="theme-color" content="#000000">
            <base href="%PUBLIC_URL%/" />
            <!--
              manifest.json provides metadata used when your web app is added to the
              homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
            -->
            <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
            <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
        
            <script src="jquery-3.4.1.min.js" type="text/javascript"></script>
            <script src="Vintasoft.Shared.js" type="text/javascript"></script>
            <script src="Vintasoft.Imaging.Html5.js" type="text/javascript"></script>
        
            <!--
              Notice the use of %PUBLIC_URL% in the tags above.
              It will be replaced with the URL of the `public` folder during the build.
              Only files inside the `public` folder can be referenced from the HTML.
        
              Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
              work correctly both with client-side routing and a non-root public URL.
              Learn how to configure a non-root public URL by running `npm run build`.
            -->
            <title>VintaSoft Document Viewer (ASP.NET Core + React.js)</title>
        </head>
        <body>
            <noscript>
                You need to enable JavaScript to run this app.
            </noscript>
            <div id="root"></div>
            <!--
              This HTML file is a template.
              If you open it directly in the browser, you will see an empty page.
        
              You can add webfonts, meta tags, or analytics to this file.
              The build step will place the bundled scripts into the <body> tag.
        
              To begin the development, run `npm start` or `yarn start`.
              To create a production bundle, use `npm run build` or `yarn build`.
            -->
        </body>
        </html>
                                    
        

        Add references to jQuery and Vintasoft JavaScript files to the header of index.html file
      • Add CSS-style "imageViewerContainer", which defines width and height of image viewer container, to the "ClientApp\src\custom.css" file, add CSS-style "thumbnailViewerContainer", which defines width and height of thumbnail viewer container, to the "ClientApp\src\custom.css" file,:
        /* Provide sufficient contrast against white background */
        a {
          color: #0366d6;
        }
        
        code {
          color: #E01A76;
        }
        
        .btn-primary {
          color: #fff;
          background-color: #1b6ec2;
          border-color: #1861ac;
        }
        
        .thumbnailViewerContainer {
            width: 240px;
            height: 650px;
            float: left;
        }
        
        .imageViewerContainer {
            width: 650px;
            height: 650px;
            float: left;
        }
                                    
        

        Add CSS-style 'imageViewerContainer' to the 'custom.css' file
    7. Client side: Create React.js component that displays image viewer.

      • Create folder "wwwroot\UploadedImageFiles\SessionID" and copy test PDF document "<SdkInstallPath>\VintaSoft\Imaging .NET v11.0\Images\VintasoftImagingDemo.pdf" to the folder. This document will be displayed in document viewer.

      • Create "ImageViewerDemo.js" file that will contain source codes of React.js component (ImageViewerDemo class):
        • Select "Add => New Item..." context menu for folder "ClientApp\src\components\" => "Add new item" dialog will appear
        • Select "JavaScript File" type for new item
        • Set "ImageViewerDemo.js" as element name
        • Click the "Add" button => dialog will be closed and file "ImageViewerDemo.js" will be added into folder "ClientApp\src\components\"

        Add ImageViewerDemo class declaration with 'render' function (renders demo header and div element that will display image viewer) to the "ImageViewerDemo.js" file:
        ImageViewerDemo React.js component with 'render' function

        Add 'componentDidMount' function (contains JavaScript code that initializes and created image viewer) to the ImageViewerDemo class:
        ImageViewerDemo React.js component with 'componentDidMount' function

        Here is JavaScript code of React.js component (ImageViewerDemo class):
        import React, { Component } from 'react';
        
        export class ImageViewerDemo extends Component {
        
            render() {
                return (
                    <div>
                        <h1>VintaSoft Image Viewer Demo (ASP.NET Core + React.js)</h1>
        
                        <div id="WebThumbnailViewer1Div" class="thumbnailViewerContainer"></div>
                        <div id="WebImageViewer1Div" class="imageViewerContainer"></div>
                    </div>
                );
            }
        
            componentDidMount() {
                // declare reference to the Vintasoft namespace
                let Vintasoft = window.Vintasoft;
        
                // set the session identifier
                Vintasoft.Shared.WebImagingEnviromentJS.set_SessionId("SessionID");
        
                // specify web services, which should be used by Vintasoft Web Document Viewer
                Vintasoft.Shared.WebServiceJS.defaultFileService =
                    new Vintasoft.Shared.WebServiceControllerJS("vintasoft/api/MyVintasoftFileApi");
                Vintasoft.Shared.WebServiceJS.defaultImageCollectionService =
                    new Vintasoft.Shared.WebServiceControllerJS("vintasoft/api/MyVintasoftImageCollectionApi");
                Vintasoft.Shared.WebServiceJS.defaultImageService =
                    new Vintasoft.Shared.WebServiceControllerJS("vintasoft/api/MyVintasoftImageApi");
        
                // create thumbnail viewer
                let thumbnailViewer = new Vintasoft.Imaging.UI.WebThumbnailViewerJS("WebThumbnailViewer1Div");
                // create image viewer
                let imageViewer = new Vintasoft.Imaging.UI.WebImageViewerJS("WebImageViewer1Div");
                // specify that image viewer depends from thumbnail viewer
                imageViewer.set_MasterViewer(thumbnailViewer);
        
                // open file from session folder and add images from file to the image viewer
                imageViewer.get_Images().openFile("VintasoftImagingDemo.pdf");
            }
        
        }
                                    
        

      • Add created React.js component to the React.js application code - "ClientApp\src\App.js" file.
        Add created React.js component to the React.js application

        Here are source codes of "App.js" file after update:
        import React, { Component } from 'react';
        import { Route } from 'react-router';
        import { Layout } from './components/Layout';
        import { ImageViewerDemo } from './components/ImageViewerDemo';
        
        import './custom.css'
        
        export default class App extends Component {
          static displayName = App.name;
        
          render () {
            return (
                <Layout>
                    <Route exact path='/' component={ImageViewerDemo} />
              </Layout>
            );
          }
        }
                                    
        
    8. Run the ASP.NET Core Web application with React.js and see the result.

      Image viewer in ASP.NET Core Web application with React.js