Create a blank "ASP.NET Core Web App (Model-View-Controller)" application.

Server side: Add references to the Vintasoft nuget-packages to the ASP.NET Core application.

Server side: Specify drawing engine, which should be used by VintaSoft Imaging .NET SDK for drawing of 2D graphics.

• Add reference to the "Vintasoft.Imaging.Drawing.SkiaSharp" nuget-package. Reference to the "SkiaSharp" nuget-package version 3.119.0 will be added automatically.
  
• Open "Program.cs" file, add code line "Vintasoft.Imaging.Drawing.SkiaSharp.SkiaSharpDrawingFactory.SetAsDefault();" at the beginning of file - added code specifies that VintaSoft Imaging .NET SDK should use SkiaSharp library for drawing of 2D graphics.

• Add reference to the "Vintasoft.Imaging.Gdi" nuget-package.
  
• Open "Program.cs" file, add code line "Vintasoft.Imaging.Drawing.Gdi.GdiGraphicsFactory.SetAsDefault();" at the beginning of file - added code specifies that VintaSoft Imaging .NET SDK should use System.Drawing library for drawing of 2D graphics.

Server side: Add Newtonsoft JSON for deserialization of annotations.

Add reference to the "Microsoft.AspNetCore.Mvc.NewtonsoftJson" nuget-package 10.0.0.

Server side: Create web services, which allow to upload/download file, manage image collection, get information about images, get thumbnails, render image tiles, extract/search text and annotate document.

• 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 "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
    
    Here are source codes of MyVintasoftFileApiController class:
    
    • C#

    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 "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
    
    Here are source codes of MyVintasoftImageCollectionApiController class:
    
    • C#

    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, render image tiles, extract/search text

  • Press the right mouse button on the "Controllers" folder and select the "Add => Controller..." menu from context menu
    
  • 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
    
    Here are source codes of MyVintasoftImageApiController class:
    
    • C#

    namespace WebApplication1.Controllers
    {
        public class MyVintasoftImageApiController : Vintasoft.Imaging.AspNetCore.ApiControllers.VintasoftImageApiController
        {
    
            public MyVintasoftImageApiController(IWebHostEnvironment hostingEnvironment)
                : base(hostingEnvironment)
            {
            }
    
        }
    }
    

• Create web service that allows to annotate images and documents

  • Press the right mouse button on the "Controllers" folder and select the "Add => Controller..." menu from context menu
    
  • Select "Empty API controller" template, set the controller name to the "MyVintasoftAnnotationCollectionApiController" and press the "Add" button
    
  • Specify that MyVintasoftAnnotationCollectionApiController class is derived from Vintasoft.Imaging.Annotation.AspNetCore.ApiControllers.VintasoftAnnotationCollectionApiController class
    
    Here are source codes of MyVintasoftAnnotationCollectionApiController class:
    
    • C#

    namespace WebApplication1.Controllers
    {
        public class MyVintasoftAnnotationCollectionApiController :
            Vintasoft.Imaging.Annotation.AspNetCore.ApiControllers.VintasoftAnnotationCollectionApiController
        {
    
            public MyVintasoftAnnotationCollectionApiController(IWebHostEnvironment hostingEnvironment)
                : base(hostingEnvironment)
            {
            }
        }
    }
    

Client side: Add JavaScript libraries to the project.

• Add the "wwwroot\lib\Vintasoft\" folder to ASP.NET Core application.
  
  
• Copy Vintasoft.Shared.js, Vintasoft.Imaging.js, Vintasoft.Imaging.css, Vintasoft.Imaging.Annotation.js, Vintasoft.Imaging.Annotation.css, Vintasoft.Imaging.DocumentViewer.js files from "<InstallPath>\VintaSoft Imaging .NET 15.0\Bin\JavaScript\" folder into "wwwroot\lib\Vintasoft\" folder.
  
  
• Specify, which "standard" dialogs should be used by web document viewer
  • If web document viewer should use ready-to-use "standard" Bootstrap dialogs:
    • Add Bootstrap and jQuery libraries to the project.
    • Copy Vintasoft.Imaging.Dialogs.Bootstrap.js, Vintasoft.Imaging.Annotation.Dialogs.Bootstrap.js and Vintasoft.Imaging.DocumentViewer.Dialogs.Bootstrap.js files from "<InstallPath>\VintaSoft Imaging .NET 15.0\Bin\JavaScript\" folder into "wwwroot\lib\Vintasoft\" folder.
  • If web document viewer should use ready-to-use "standard" jQuery UI-dialogs:
    • Add jQuery and jQuery UI libraries to the project.
    • Copy Vintasoft.Imaging.Dialogs.jQueryUI.js and Vintasoft.Imaging.Annotation.Dialogs.jQueryUI.js and Vintasoft.Imaging.DocumentViewer.Dialogs.jQueryUI.js files from "<InstallPath>\VintaSoft Imaging .NET 15.0\Bin\JavaScript\" folder into "wwwroot\lib\Vintasoft\" folder.
  • If web document viewer should use custom "standard" dialogs, please read how to create custom "standard" dialogs here.

Client side: Add JavaScript code that allows to display document, search and extract text from document, annotate document.

• Create folder "wwwroot\UploadedImageFiles\SessionID" and copy test PDF document "<SdkInstallPath>\VintaSoft\Imaging .NET 15.0\Images\VintasoftImagingDemo.pdf" to the folder. This document will be displayed in document viewer.
  
  
• Open file "Views\Home\Index.cshtml".
  
  
  
  Add references to used JavaScript libraries:
  • If Bootstrap dialogs are used, add references to the Bootstrap files and Vintasoft JavaScript files.
    Here is HTML code that adds references to the Bootstrap and Vintasoft JavaScript files:
    
    • HTML

    <link rel="stylesheet" type="text/css" href="~/lib/bootstrap/dist/css/bootstrap.css">
    <link rel="stylesheet" type="text/css" href="~/lib/Vintasoft/Vintasoft.Imaging.css">
    <link rel="stylesheet" type="text/css" href="~/lib/Vintasoft/Vintasoft.Imaging.Annotation.css">
    
    <script src="~/lib/bootstrap/dist/js/bootstrap.bundle.js" type="text/javascript"></script>
    
    <script src="~/lib/Vintasoft/Vintasoft.Shared.js" type="text/javascript"></script>
    <script src="~/lib/Vintasoft/Vintasoft.Imaging.js" type="text/javascript"></script>
    <script src="~/lib/Vintasoft/Vintasoft.Imaging.Dialogs.Bootstrap.js" type="text/javascript"></script>
    <script src="~/lib/Vintasoft/Vintasoft.Imaging.Annotation.js" type="text/javascript"></script>
    <script src="~/lib/Vintasoft/Vintasoft.Imaging.Annotation.Dialogs.Bootstrap.js" type="text/javascript"></script>
    <script src="~/lib/Vintasoft/Vintasoft.Imaging.DocumentViewer.js" type="text/javascript"></script>
    <script src="~/lib/Vintasoft/Vintasoft.Imaging.DocumentViewer.Dialogs.Bootstrap.js" type="text/javascript"></script>
    
    

    
    
  • If jQuery UI-dialogs are used, add references to the jQuery files and Vintasoft JavaScript files.
    Here is HTML code that adds references to the jQuery and Vintasoft JavaScript files:
    
    • HTML

    <link rel="stylesheet" type="text/css" href="~/js/jquery-ui-css/jquery-ui.min.css">
    <link rel="stylesheet" type="text/css" href="~/lib/Vintasoft/Vintasoft.Imaging.css">
    <link rel="stylesheet" type="text/css" href="~/lib/Vintasoft/Vintasoft.Imaging.Annotation.css">
    
    <script src="~/js/jquery-3.3.1.min.js" type="text/javascript"></script>
    <script src="~/js/jquery-ui.min.js" type="text/javascript"></script>
    
    <script src="~/lib/Vintasoft/Vintasoft.Shared.js" type="text/javascript"></script>
    <script src="~/lib/Vintasoft/Vintasoft.Imaging.js" type="text/javascript"></script>
    <script src="~/lib/Vintasoft/Vintasoft.Imaging.Dialogs.jQueryUI.js" type="text/javascript"></script>
    <script src="~/lib/Vintasoft/Vintasoft.Imaging.Annotation.js" type="text/javascript"></script>
    <script src="~/lib/Vintasoft/Vintasoft.Imaging.Annotation.Dialogs.jQueryUI.js" type="text/javascript"></script>
    <script src="~/lib/Vintasoft/Vintasoft.Imaging.DocumentViewer.js" type="text/javascript"></script>
    <script src="~/lib/Vintasoft/Vintasoft.Imaging.DocumentViewer.Dialogs.jQueryUI.js" type="text/javascript"></script>
    
    

    
    
  
  Add HTML markup (a div-element that will display document viewer) to the web view:
  
  Here is HTML markup code:
  
  • HTML

  <div class="text-center">
      <h1>VintaSoft Document Viewer Demo (ASP.NET Core)</h1>
  
      <div id="documentViewerContainer" class="documentViewerContainer"></div>
  </div>
  
  

  
  
• Open "wwwroot\css\site.css" file, add CSS-style for "documentViewerContainer" to the "site.css" file:
  • HTML

  html {
    font-size: 14px;
  }
  
  @media (min-width: 768px) {
    html {
      font-size: 16px;
    }
  }
  
  .btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
  }
  
  html {
    position: relative;
    min-height: 100%;
  }
  
  body {
    margin-bottom: 60px;
  }
  
  .form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
  }
  
  .form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
  }
  
  .documentViewerContainer {
      height: 800px;
  }
  
  

  
  
  
• Open file "wwwroot\js\site.js", add JavaScript code that initializes and creates web document viewer:
  
  Here is JavaScript code that initializes and displays web document viewer:
  
  • JavaScript

  // 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");
  Vintasoft.Shared.WebServiceJS.defaultAnnotationService =
      new Vintasoft.Shared.WebServiceControllerJS("/vintasoft/api/MyVintasoftAnnotationCollectionApi");
  
  // create settings for document viewer with annotation support
  var docViewerSettings =
      new Vintasoft.Imaging.DocumentViewer.WebDocumentViewerSettingsJS("documentViewerContainerId", "documentViewerLocalizationId", true);
  // specify that the main menu should contain the annotation menu
  docViewerSettings.set_ShowAnnotationMenuInMainMenu(true);
  // specify that the side panel should contain the annotation list panel
  docViewerSettings.set_ShowAnnotationListSidePanel(true);
  // specify that web document viewer allows to navigate document
  docViewerSettings.set_CanNavigateDocument(true);
  // specify that web document viewer allows to select text
  docViewerSettings.set_CanSelectText(true);
  // specify that web document viewer allows to search text
  docViewerSettings.set_CanSearchText(true);
  
  // create the document viewer
  var docViewer = new Vintasoft.Imaging.DocumentViewer.WebDocumentViewerJS(docViewerSettings);
  
  // create visual tool that allows to work with annotations, navigate document, select text, pan page in viewer
  var visualTool = docViewer.getVisualToolById("AnnotationVisualTool,DocumentNavigationTool,TextSelectionTool,PanTool");
  // specify visual tool as mandatory visual tool of document viewer
  docViewer.set_MandatoryVisualTool(visualTool);
  // specify visual tool as current visual tool of document viewer
  docViewer.set_CurrentVisualTool(visualTool);
  
  // open file from session folder and add images from file to the image viewer
  docViewer.openFile("VintasoftImagingDemo.pdf");
  
  

Run the ASP.NET Core application and see the result.