Создайте пустое приложение ASP.NET WebForms.

На стороне сервера: Добавьте ссылки на .NET-сборки Vintasoft в ASP.NET WebForms приложение.

\VintaSoft Imaging .NET 14.0\Bin\DotNet4\AnyCPU\" в приложении ASP.NET WebForms.

Серверная сторона: Укажите движок рисования, который должен использоваться VintaSoft Imaging .NET SDK для рисования 2D-графики.

• Добавьте ссылку на .NET-сборку Vintasoft.Imaging.Gdi.dll.
  
• Откройте файл "Default.aspx.cs" и добавьте строку кода "Vintasoft.Imaging.Drawing.Gdi.GdiGraphicsFactory.SetAsDefault();" в начало метода Page_Load - добавленный код указывает VintaSoft Imaging .NET SDK использовать библиотеку System.Drawing для отрисовки 2D-графики.

Сторона сервера: Создайте веб-сервисы, которые позволяют загружать/скачивать файлы, управлять коллекцией изображений, получать информацию об изображениях, получать миниатюры, отображать плитки изображений, работать с PDF документами.

• Добавьте папку "Handlers" в приложение ASP.NET WebForms.

• Создайте веб сервис, позволяющий загружать/скачивать файл

  • Щёлкните правой кнопкой мыши по папке "Handlers" и выберите пункт в контекстном меню "Add => Generic handler".
    
  • Укажите имя обработчика "MyVintasoftFileHandler" и нажмите кнопку "Ok".
  • Укажите, что класс MyVintasoftFileHandler наследуется от класса VintasoftImaging.Web.HttpHandlers.VintasoftFileHandler.
    
    Вот C# код класса MyVintasoftFileHandler:
    
    • C#

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

• Создайте веб сервис, позволяющий управлять коллекцией изображений

  • Щёлкните правой кнопкой мыши по папке "Handlers" и выберите пункт в контекстном меню "Add => Generic handler".
    
  • Укажите имя обработчика "MyVintasoftImageCollectionHandler" и нажмите кнопку "Ok".
  • Укажите, что класс MyVintasoftImageCollectionHandler наследуется от класса VintasoftImaging.Web.HttpHandlers.VintasoftImageCollectionHandler.
    
    Вот C# код класса MyVintasoftImageCollectionHandler:
    
    • C#

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

• Создайте веб сервис, который позволяет получать информацию об изображениях, получать миниатюры, рендерить тайлы изображений, извлекать/искать текст

  • Щёлкните правой кнопкой мыши по папке "Handlers" и выберите пункт в контекстном меню "Add => Generic handler".
    
  • Укажите имя обработчика "MyVintasoftImageHandler" и нажмите кнопку "Ok".
  • Укажите, что класс MyVintasoftImageHandler наследуется от класса VintasoftImaging.Web.HttpHandlers.VintasoftImageHandler.
    
    Вот C# код класса MyVintasoftImageHandler:
    
    • C#

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

• Создайте веб-сервис, позволяющий работать с PDF документом

  • Щёлкните правой кнопкой мыши по папке "Handlers" и выберите пункт в контекстном меню "Add => Generic handler".
    
  • Укажите имя обработчика "MyVintasoftPdfHandler" и нажмите кнопку "Ok"
  • Укажите, что класс MyVintasoftPdfHandler является производным от класса VintasoftImaging.Pdf.Web.HttpHandlers.VintasoftPdfHandler
    
    Вот C# код класса MyVintasoftFileHandler:
    
    • C#

    namespace WebApplication1.Handlers
    {
        public class MyVintasoftPdfHandler : Vintasoft.Imaging.Pdf.Web.HttpHandlers.VintasoftPdfHandler
        {
        }
    }
    

На стороне клиента: Добавьте JavaScript-библиотеки в проект.

• Добавьте папку "Scripts\" в приложение ASP.NET WebForms (если папка отсутствует).
  
  
• Скопируйте файлы Vintasoft.Shared.js, Vintasoft.Imaging.js, Vintasoft.Imaging.Pdf.js, Vintasoft.Imaging.css и Vintasoft.Imaging.Pdf.css из папки "\VintaSoft Imaging .NET 14.0\Bin\JavaScript\" в папку "Scripts\".
  
  
• Укажите, какие "стандартные" UI-диалоги (диалог ввода пароля, диалог печати и т. д.) должны использоваться веб редактором PDF документа
  • Если веб редактор PDF документа должен использовать готовые к использованию "стандартные" UI-диалоги jQuery UI:
    • Скопируйте файл jQuery в папку "Scripts\".
      Вы можете использовать файл "jquery-3.3.1.min.js" из папки "\VintaSoft Imaging .NET 14.0\Examples\ASP.NET MVC\CSharp\AspNetMvcImagingDemo\Scripts\External\" или файл jQuery из любого другого источника.
    • Скопируйте файлы и папки jQuery UI в папку "Scripts\".
      Вы можете использовать файл "jquery-ui.min.js" и папку "jquery-ui-css" из папки "\VintaSoft Imaging .NET 14.0\Examples\ASP.NET MVC\CSharp\AspNetMvcImagingDemo\Scripts\External\" или файлы и папки jQuery UI из любого другого источника.
    • Скопируйте файлы Vintasoft.Imaging.Dialogs.jQueryUI.js и Vintasoft.Imaging.Pdf.Dialogs.jQueryUI.js из папки "\VintaSoft Imaging .NET 14.0\Bin\JavaScript\" в папку "Scripts\".
      
      
  • Если веб редактор PDF документа должен использовать пользовательские "стандартные" UI-диалоги, прочтите, как создать пользовательские "стандартные" UI-диалоги здесь .

Клиентская сторона: Добавьте код JavaScript, который инициализирует и отображает редактор PDF документа, в веб-форму по умолчанию.

• Создайте папку "UploadedImageFiles\SessionID" и скопируйте в нее PDF документ "VintaSoft\Imaging .NET 14.0\Images\VintasoftImagingDemo.pdf". Этот документ будет отображен в редакторе PDF документа.
  
  
• Создайте веб-форму "Default" - файл "Default.aspx".
  • Щёлкните правой кнопкой мыши по проекту и выберите в контекстном меню пункт "Add => WebForm":
    
    
    
  • Укажите "Default" в качестве имени веб-формы => откроется созданная веб-форма:
    
  
  
• Добавьте ссылки на JavaScript-файлы:
  
  Вот HTML-код, который добавляет ссылки на файлы jQuery и JavaScript-файлы Vintasoft:
  
  • HTML

  <style>
      * {
          -webkit-box-sizing: border-box;
          box-sizing: border-box;
          border-collapse: collapse;
      }
  </style>
  
  <link rel="stylesheet" type="text/css" href="Scripts/jquery-ui-css/jquery-ui.min.css">
  <link rel="stylesheet" type="text/css" href="Scripts/Vintasoft.Imaging.css">
  <link rel="stylesheet" type="text/css" href="Scripts/Vintasoft.Imaging.Pdf.css">
  
  <script src="Scripts/jquery-3.3.1.min.js" type="text/javascript"></script>
  <script src="Scripts/jquery-ui.min.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>
  <script src="Scripts/Vintasoft.Imaging.Dialogs.jQueryUI.js" type="text/javascript"></script>
  <script src="Scripts/Vintasoft.Imaging.Pdf.js" type="text/javascript"></script>
  <script src="Scripts/Vintasoft.Imaging.Pdf.Dialogs.jQueryUI.js" type="text/javascript"></script>
  

  
  
  
• Добавьте HTML-разметку (div-элемент, который будет отображать редактор PDF документа) в веб-представление:
  
  Вот код HTML-разметки:
  
  • HTML

  <form id="form1" runat="server">
      <h1 style="text-align: center">VintaSoft PDF Document Editor Demo (ASP.NET WebForms)</h1>
      <div id="pdfDocumentEditorContainer" style="height: 800px"></div>
  </form>
  

  
  
  
• Добавьте код JavaScript, который отображает редактор PDF документа:
  
  Вот код JavaScript (с разметкой страницы), который отображает редактор PDF документа:
  
  • 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 PDF Document Editor Demo (ASP.NET WebForms)</title>
  
      <style>
          * {
              -webkit-box-sizing: border-box;
              box-sizing: border-box;
              border-collapse: collapse;
          }
      </style>
  
      <link rel="stylesheet" type="text/css" href="Scripts/jquery-ui-css/jquery-ui.min.css">
      <link rel="stylesheet" type="text/css" href="Scripts/Vintasoft.Imaging.css">
      <link rel="stylesheet" type="text/css" href="Scripts/Vintasoft.Imaging.Pdf.css">
  
      <script src="Scripts/jquery-3.3.1.min.js" type="text/javascript"></script>
      <script src="Scripts/jquery-ui.min.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>
      <script src="Scripts/Vintasoft.Imaging.Dialogs.jQueryUI.js" type="text/javascript"></script>
      <script src="Scripts/Vintasoft.Imaging.Pdf.js" type="text/javascript"></script>
      <script src="Scripts/Vintasoft.Imaging.Pdf.Dialogs.jQueryUI.js" type="text/javascript"></script>
  </head>
  <body>
      <form id="form1" runat="server">
          <h1 style="text-align: center">VintaSoft PDF Document Editor Demo (ASP.NET WebForms)</h1>
          <div id="pdfDocumentEditorContainer" style="height: 800px"></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 PDF Document Editor
          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");
          Vintasoft.Shared.WebServiceJS.defaultPdfService =
              new Vintasoft.Shared.WebServiceHandlerJS("/Handlers/MyVintasoftPdfHandler.ashx");
  
          // create settings for PDF document editor
          let pdfDocumentEditorSettings =
              new Vintasoft.Imaging.Pdf.UI.WebPdfDocumentEditorControlSettingsJS("pdfDocumentEditorContainer");
  
          // create the PDF document editor
          var pdfDocumentEditor = new Vintasoft.Imaging.Pdf.UI.WebPdfDocumentEditorControlJS(pdfDocumentEditorSettings);
  
          // get image viewer of PDF document editor
          var imageViewer = pdfDocumentEditor.get_ImageViewer();
          // open file from session folder and add images from file to the image viewer
          imageViewer.get_Images().openFile("VintasoftImagingDemo.pdf");
      </script>
  </body>
  </html>
  

Запустите ASP.NET WebForms приложение и посмотрите результат.