Create a blank ASP.NET WebForms application.

Server side: Add references to the Vintasoft assemblies to your 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 and manage Office documents.

• 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 Vintasoft.Imaging.Web.HttpHandlers.VintasoftFileHandler class
    
    Here are C# source codes of MyVintasoftFileHandler class:
    
    • C#

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

• Create web service that allows to edit DOCX document

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

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

Client side: Add JavaScript libraries to the project.

• Add the "Scripts\" folder to ASP.NET WebForms application if folder does not exist.
  
  
• Copy Vintasoft.Shared.js, Vintasoft.Imaging.js, Vintasoft.Imaging.css, Vintasoft.Imaging.Office.js and Vintasoft.Imaging.Office.css files from "<InstallPath>\VintaSoft Imaging .NET 15.0\Bin\JavaScript\" folder into "Scripts\" folder.
  
  
• Specify, which "standard" UI dialogs (rename worksheet dialog, find text dialog, etc) should be used by web document editor
  • If web document editor should use ready-to-use "standard" jQuery UI dialogs:
    • Copy jQuery file into "Scripts\" folder.
      You can use "jquery-3.3.1.min.js" file from "<InstallPath>\VintaSoft Imaging .NET 15.0\Examples\ASP.NET WebForms\CSharp\AspNetDocumentEditorDemo\Scripts\External\" folder or jQuery file from any other source.
    • Copy jQuery UI files and folders into "Scripts\" folder.
      You can use "jquery-ui.min.js" file and "jquery-ui-css" folder from "<InstallPath>\VintaSoft Imaging .NET 15.0\Examples\ASP.NET WebForms\CSharp\AspNetDocumentEditorDemo\Scripts\External\" folder or jQuery UI files and folders from any other source.
    • Copy Vintasoft.Imaging.Dialogs.jQueryUI.js and Vintasoft.Imaging.Office.Dialogs.jQueryUI.js files from "<InstallPath>\VintaSoft Imaging .NET 15.0\Bin\JavaScript\" folder into "Scripts\" folder.
      
      
  • If web document editor should use custom "standard" dialogs, please read how to create custom "standard" dialogs here.

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

• Create folder "UploadedImageFiles" and copy test DOCX document to the folder. This document will be displayed in web document editor.
  
  
• 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

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

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

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

  
  
  
• Add JavaScript code that displays web document editor:
  
  Here is JavaScript code (with page markup) that displays web document editor:
  
  • 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 web document editor settings
      var documentEditorSettings = new Vintasoft.Imaging.Office.UI.WebDocumentEditorSettingsJS("documentEditorContainer");
  
      // create web document editor
      _documentEditor = new Vintasoft.Imaging.Office.UI.WebDocumentEditorJS(documentEditorSettings);
  
      // open DOCX document in web document editor
      _documentEditor.openDocument("DocxTestDocument.docx");
  </script>
  
  

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