Create a blank ASP.NET WebForms application.

Server side: Add references to the Vintasoft assemblies to ASP.NET WebForms 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.Gdi.dll assembly.
  
• Open "Default.aspx.cs" file, add code line "Vintasoft.Imaging.Drawing.Gdi.GdiGraphicsFactory.SetAsDefault();" at the beginning of Page_Load 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 "Handlers" folder to ASP.NET WebForms application.

• Create web service that allows to upload/download file

  • Press the right mouse button on the "Handlers" folder and select the "Add => Generic handler" menu from context menu
    
  • Specify the handler name "MyVintasoftFileHandler" and press the "Ok" button
  • Specify that MyVintasoftFileHandler class is derived from VintasoftImaging.Web.HttpHandlers.VintasoftFileHandler class
    
    Here are C# source codes of MyVintasoftFileHandler class:
    
    • C#

    namespace WebApplication1.Handlers
    {
        public class MyVintasoftFileHandler : Vintasoft.Imaging.Web.HttpHandlers.VintasoftFileHandler
        {
        }
    }
    
    

• Create web service that allows to manage image collection

  • Press the right mouse button on the "Handlers" folder and select the "Add => Generic handler" menu from context menu
    
  • Specify the handler name "MyVintasoftImageCollectionHandler" and press the "Ok" button
  • Specify that MyVintasoftImageCollectionHandler class is derived from VintasoftImaging.Web.HttpHandlers.VintasoftImageCollectionHandler class
    
    Here are C# source codes of MyVintasoftImageCollectionHandler class:
    
    • C#

    namespace WebApplication1.Handlers
    {
        public class MyVintasoftImageCollectionHandler : Vintasoft.Imaging.Web.HttpHandlers.VintasoftImageCollectionHandler
        {
        }
    }
    
    

• 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 "Handlers" folder and select the "Add => Generic handler" menu from context menu
    
  • Specify the handler name "MyVintasoftImageHandler" and press the "Ok" button
  • Specify that MyVintasoftImageHandler class is derived from VintasoftImaging.Web.HttpHandlers.VintasoftImageHandler class
    
    Here are C# source codes of MyVintasoftImageHandler class:
    
    • C#

    namespace WebApplication1.Handlers
    {
        public class MyVintasoftImageHandler : Vintasoft.Imaging.Web.HttpHandlers.VintasoftImageHandler
        {
        }
    }
    
    

Client side: Add Vintasoft JavaScript files to the project.

• Add the "Scripts" folder to ASP.NET WebForms Web application.
  
  
• Copy jQuery (version 3 or higher) file into "Scripts" folder.
  You can use jquery-3.3.1.min.js file from "<InstallPath>\VintaSoft Imaging .NET v12.4\Examples\ASP.NET WebForms\CSharp\AspNetImagingDemo\Scripts\External\" folder or jQuery (version 3 or higher) file from any other source.
  
  
• Copy Vintasoft.Shared.js and Vintasoft.Imaging.js files from "<InstallPath>\VintaSoft Imaging .NET v12.4\Bin\JavaScript\" folder into "Scripts" folder.
  

Client side: Add JavaScript code, which initializes and dispalys image viewer, to the Default web form.

• Create folder "UploadedImageFiles\SessionID" and copy PDF document "<InstallPath>VintaSoft\Imaging .NET v12.4\Images\VintasoftImagingDemo.pdf" to the folder. This document will be displayed in image viewer.
  
  
• Create the Default web form - file "Default.aspx".
  
  • Press the right mouse button on the project and select the "Add => WebForm" menu from context menu:
    
    
    
  • Specify "Default" as web form name => created web form will be opened:
    
  
  
• Add references to Vintasoft JavaScript files:
  
  Here is HTML code that adds references to jQuery and Vintasoft JavaScript files:
  
  • HTML

  <script src="Scripts/jquery-3.4.1.min.js" type="text/javascript"></script>
  <script src="Scripts/raphael.js" type="text/javascript"></script>
  
  <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 WebForms)</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 displays image viewer:
  
  Here is JavaScript code (with page markup) that displays image viewer:
  
  • JavaScript

  <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication1.Default" %>
  
  <!DOCTYPE html>
  
  <html xmlns="http://www.w3.org/1999/xhtml">
  <head runat="server">
      <title>VintaSoft Image Viewer Demo (ASP.NET WebForms)</title>
  
      <script src="Scripts/jquery-3.4.1.min.js" type="text/javascript"></script>
      <script src="Scripts/raphael.js" type="text/javascript"></script>
  
      <script src="Scripts/Vintasoft.Shared.js" type="text/javascript"></script>
      <script src="Scripts/Vintasoft.Imaging.js" type="text/javascript"></script>
  </head>
  <body>
      <form id="form1" runat="server">
          <h1 style="text-align: center">VintaSoft Image Viewer Demo (ASP.NET WebForms)</h1>
  
          <div id="WebThumbnailViewer1Div" style="width: 240px; height: 650px; float: left"></div>
          <div id="WebImageViewer1Div" style="width: 650px; height: 650px; float: left"></div>
      </form>
  
      <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.WebServiceHandlerJS("/Handlers/MyVintasoftFileHandler.ashx");
          Vintasoft.Shared.WebServiceJS.defaultImageCollectionService =
              new Vintasoft.Shared.WebServiceHandlerJS("/Handlers/MyVintasoftImageCollectionHandler.ashx");
          Vintasoft.Shared.WebServiceJS.defaultImageService =
              new Vintasoft.Shared.WebServiceHandlerJS("/Handlers/MyVintasoftImageHandler.ashx");
  
          // 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 WebForms application and see the result.