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

На стороне сервера: Добавьте ссылки на .NET-сборки Vintasoft в ваше 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-графики.

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

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

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

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

    namespace WebApplication1.Handlers
    {
        public class MyVintasoftFileHandler : Vintasoft.Imaging.Web.HttpHandlers.VintasoftFileHandler
        {
            public override bool IsEmptySessionSupported 
            { 
                get
                {
                    return true;
                }
            }
        }
    }
    

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

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

    namespace WebApplication1.Handlers
    {
        public class MyVintasoftOfficeHandler : Vintasoft.Imaging.Office.Web.HttpHandlers.VintasoftOfficeHandler
        {
            public override bool IsEmptySessionSupported
            {
                get
                {
                    return true;
                }
            }
        }
    }
    
    

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

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

Не стороне клиента: Добавьте JavaScript код, который инициализирует и отображает веб редактор табличного документа, в веб-форму "Default".

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

  <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.Office.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.Office.js" type="text/javascript"></script>
  <script src="Scripts/Vintasoft.Imaging.Office.Dialogs.jQueryUI.js" type="text/javascript"></script>
  
  

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

  <h1 style="text-align: center">VintaSoft Spreadsheet Editor Demo (ASP.NET WebForms)</h1>
  
  <div id="spreadsheetDocumentEditorControlContainer" style="height: 800px;"></div>
  

  
  
  
• Добавьте JavaScript код, который отображает веб редактор табличного документа:
  
  Вот JavaScript код (с разметкой страницы), который отображает веб редактор табличного документа:
  
  • JavaScript

  <script type="text/javascript">
      // specify web services, which should be used in this demo
      Vintasoft.Shared.WebServiceJS.defaultFileService = new Vintasoft.Shared.WebServiceHandlerJS("Handlers/MyVintasoftFileHandler.ashx");
      Vintasoft.Shared.WebServiceJS.defaultOfficeService = new Vintasoft.Shared.WebServiceHandlerJS("Handlers/MyVintasoftOfficeHandler.ashx");
  
      // create the spreadsheet document editor control settings
      var spreadsheetDocumentEditorControlSettings = new Vintasoft.Imaging.Office.UI.WebSpreadsheetDocumentEditorControlSettingsJS("spreadsheetDocumentEditorControlContainer");
  
      // create the spreadsheet document editor control
      _spreadsheetDocumentEditorControl = new Vintasoft.Imaging.Office.UI.WebSpreadsheetDocumentEditorControlJS(spreadsheetDocumentEditorControlSettings);
  
      // open XLSX document in the spreadsheet document editor
      _spreadsheetDocumentEditorControl.openDocument("SalesReport.xlsx");
  </script>
  
  

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