Create a blank ASP.NET Core Web application.

Server side: Add references to the Vintasoft assemblies to your ASP.NET Core Web 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.dll assembly.
  
• Add reference to the SkiaSharp nuget-package version 2.88.6.
• Open "Startup.cs" file, add code line "Vintasoft.Imaging.Drawing.SkiaSharp.SkiaSharpDrawingFactory.SetAsDefault();" at the beginning of ConfigureServices method - added code specifies that VintaSoft Imaging .NET SDK should use SkiaSharp library for drawing of 2D graphics.

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

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

• Add the "Controllers" folder to the project.

• 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#

    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 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#

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

Server side: Create MVC controller for web view that will display image viewer.

• Press the right mouse button on the "Controllers" folder and select the "Add => Controller..." menu from context menu
  
• Select "MVC Controller - Empty" template, set the controller name to the "DefaultController" and press the "Add" button
  
• Open "Startup.cs" file, add controllers with views to the services of ASP.NET Core application:
  
  
  Add created MVC controller to the endpoints of ASP.NET Core application:
  
  
  Enable static file serving for the current request path of ASP.NET Core application:
  
  
  Here are C# source codes of Startup.cs file:
  
  • C#

  using Microsoft.AspNetCore.Builder;
  using Microsoft.AspNetCore.Hosting;
  using Microsoft.Extensions.DependencyInjection;
  using Microsoft.Extensions.Hosting;
  
  namespace WebApplication1
  {
      public class Startup
      {
          // This method gets called by the runtime. Use this method to add services to the container.
          // For more information on how to configure your application, visit https://go.microsoft.com/fwlink/?LinkID=398940
          public void ConfigureServices(IServiceCollection services)
          {
              // specify that VintaSoft Imaging .NET SDK should use SkiaSharp library for drawing of 2D graphics
              Vintasoft.Imaging.Drawing.SkiaSharp.SkiaSharpDrawingFactory.SetAsDefault();
  
              services.AddControllersWithViews();
          }
  
          // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
          public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
          {
              if (env.IsDevelopment())
              {
                  app.UseDeveloperExceptionPage();
              }
  
              app.UseStaticFiles();
              app.UseRouting();
  
              app.UseEndpoints(endpoints =>
              {
                  endpoints.MapControllerRoute("default", "{controller=Default}/{action=Index}/{id?}");
              });
          }
      }
  }
  
  

Client side: Create web view for displaying image viewer.

• Open "DefaultController.cs" file, press the right mouse button on the "Index" method of DefaultController class and select the "Add View..." menu from context menu
  
• Select "Razor View" template, Set view name to "Index", uncheck "Use a layout page" checkbox and press the "Add" button => "Views\Default\Index.cshtml" file will be created
  

Client side: Add Vintasoft JavaScript files to the project.

• Add the "wwwroot\Scripts\" folder to ASP.NET Core application.
  
  
• Copy Vintasoft.Shared.js, and Vintasoft.Imaging.js files from "<InstallPath>\VintaSoft Imaging .NET v12.4\Bin\JavaScript\" folder into "wwwroot\Scripts\" folder.
  

Client side: Add JavaScript code that allows to display image viewer.

• Create folder "wwwroot\UploadedImageFiles\SessionID" and copy test PDF document "<SdkInstallPath>\VintaSoft\Imaging .NET v12.4\Images\VintasoftImagingDemo.pdf" to the folder. This document will be displayed in image viewer.
  
  
• Open web view - file "Views\Default\Index.cshtml".
  
• Add references to Vintasoft JavaScript files:
  
  Here is HTML code that adds references to Vintasoft JavaScript files:
  
  • HTML

  <script src="~/Scripts/Vintasoft.Shared.js" type="text/javascript"></script>
  <script src="~/Scripts/Vintasoft.Imaging.js" type="text/javascript"></script>
  
  

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

  <h1 style="text-align: center">VintaSoft Image Viewer Demo (ASP.NET Core)</h1>
  
  <div id="WebThumbnailViewer1Div" style="width: 240px; height: 650px; float:left"></div>
  <div id="WebImageViewer1Div" style="width: 650px; height: 650px; float:left"></div>
  
  

• Add JavaScript code that initializes and creates image viewer:
  
  Here is JavaScript code that initializes and displays image viewer:
  
  • JavaScript

  @{
      Layout = null;
  }
  
  <!DOCTYPE html>
  
  <html>
  <head>
      <meta name="viewport" content="width=device-width" />
      <title>VintaSoft Image Viewer Demo (ASP.NET Core)</title>
  
      <script src="~/Scripts/Vintasoft.Shared.js" type="text/javascript"></script>
      <script src="~/Scripts/Vintasoft.Imaging.js" type="text/javascript"></script>
  </head>
  <body>
      <h1 style="text-align: center">VintaSoft Image Viewer Demo (ASP.NET Core)</h1>
  
      <div id="WebThumbnailViewer1Div" style="width: 240px; height: 650px; float:left"></div>
      <div id="WebImageViewer1Div" style="width: 650px; height: 650px; float:left"></div>
  
      <script type="text/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");
  
          // create thumbnail viewer
          var thumbnailViewer = new Vintasoft.Imaging.UI.WebThumbnailViewerJS("WebThumbnailViewer1Div");
          // create image viewer
          var 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");
      </script>
  </body>
  </html>
  
  

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