VintaSoft Imaging .NET SDK 15.0: Documentation for Web developer
In This Topic
    Add web document editor to an "ASP.NET Core Web App (Model-View-Controller)" application
    In This Topic
    This tutorial shows how to create a blank "ASP.NET Core Web App (Model-View-Controller)" application in Visual Studio .NET 2026 and add the web document editor (with ability to open, edit and save DOCX document) to ASP.NET Core application.

    Here are steps, which must be done:

    1. Create a blank "ASP.NET Core Web App (Model-View-Controller)" application.

      Open Visual Studio .NET 2026 and create a new project, of "ASP.NET Core Web App (Model-View-Controller)" application type:

      Configure the project to use .NET 10.0:

    2. Server side: Add references to the Vintasoft nuget-packages to the ASP.NET Core application.

      Add reference to the nuget-package "Vintasoft.Imaging.Office.AspNetCore.ApiControllers" to the ASP.NET Core application. Other necessary nuget-packages will be added automatically.



    3. Server side: Specify drawing engine, which should be used by VintaSoft Imaging .NET SDK for drawing of 2D graphics.

      If ASP.NET application must be used in Windows or Linux, SkiaSharp drawing engine should be used.
      If ASP.NET application must be used in Windows only, System.Drawing or SkiaSharp drawing engine should be used.

      Here are steps, which should be made for using SkiaSharp engine:
      • Add reference to the "Vintasoft.Imaging.Drawing.SkiaSharp" nuget-package. Reference to the "SkiaSharp" nuget-package version 3.119.0 will be added automatically.
      • Open "Program.cs" file, add code line "Vintasoft.Imaging.Drawing.SkiaSharp.SkiaSharpDrawingFactory.SetAsDefault();" at the beginning of file - added code specifies that VintaSoft Imaging .NET SDK should use SkiaSharp library for drawing of 2D graphics.

      Here are steps, which should be made for using System.Drawing engine:
      • Add reference to the "Vintasoft.Imaging.Gdi" nuget-package.
      • Open "Program.cs" file, add code line "Vintasoft.Imaging.Drawing.Gdi.GdiGraphicsFactory.SetAsDefault();" at the beginning of file - added code specifies that VintaSoft Imaging .NET SDK should use System.Drawing library for drawing of 2D graphics.

    4. Server side: Add reference to nuget-packages.

      • Add reference to the "System.IO.Packaging" nuget-package version 10.0.0.

    5. Server side: Create web services, which allow to upload/download file and manage Office documents.

      • 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: 
          namespace WebApplication3.Controllers
{
    public class MyVintasoftFileApiController : Vintasoft.Imaging.AspNetCore.ApiControllers.VintasoftFileApiController
    {
        public MyVintasoftFileApiController(IWebHostEnvironment hostEnvironment)
            : base(hostEnvironment)
        {
        }
    }
}

      • Create web service that allows to manage Office documents

        • 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 "MyVintasoftOfficeApiController" and press the "Add" button
        • Specify that MyVintasoftOfficeApiController class is derived from Vintasoft.Imaging.Office.AspNetCore.ApiControllers.VintasoftOfficeApiController class

          Here are source codes of MyVintasoftOfficeApiController class: 
          namespace WebApplication3.Controllers
{
    public class MyVintasoftOfficeApiController : Vintasoft.Imaging.Office.AspNetCore.ApiControllers.VintasoftOfficeApiController
    {
        public MyVintasoftOfficeApiController(IWebHostEnvironment hostingEnvironment)
            : base(hostingEnvironment)
        {
        }
    }
}

    6. Client side: Add JavaScript libraries to the project.

      • Add the "wwwroot\lib\Vintasoft\" folder to ASP.NET Core application if folder does not exist.

      • Copy Vintasoft.Shared.js, Vintasoft.Imaging.js, Vintasoft.Imaging.css, Vintasoft.Imaging.Office.js, Vintasoft.Imaging.Office.css files from "<InstallPath>\VintaSoft Imaging .NET 15.0\Bin\JavaScript\" folder into "wwwroot\lib\Vintasoft\" folder.

      • Add Bootstrap and jQuery libraries to the project.

      • Specify, which "standard" dialogs should be used by web document editor
        • If web document editor should use ready-to-use "standard" Bootstrap dialogs:
          • Add Bootstrap and jQuery libraries to the project.
          • Copy Vintasoft.Imaging.Dialogs.Bootstrap.js and Vintasoft.Imaging.Office.Dialogs.Bootstrap.js files from "<InstallPath>\VintaSoft Imaging .NET 15.0\Bin\JavaScript\" folder into "wwwroot\lib\Vintasoft\" folder.
        • If web document editor should use ready-to-use "standard" jQuery UI dialogs:
          • Add jQuery and jQuery UI libraries to the project.
          • 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 "wwwroot\lib\Vintasoft\" folder.
        • If web document editor should use custom "standard" dialogs, please read how to create custom "standard" dialogs here.

    7. Client side: Add JavaScript code that allows to display document.

      • Create folder "wwwroot\UploadedImageFiles\SessionID" and copy any DOCX document to the folder. This document will be displayed in web document editor.

      • Open file "Views\Home\Index.cshtml".



        Add references to used JavaScript libraries:
        • If Bootstrap dialogs are used, add references to the Bootstrap files and Vintasoft JavaScript files.
          Here is HTML code that adds references to the Bootstrap and Vintasoft JavaScript files: 
          <link rel="stylesheet" type="text/css" href="~/lib/bootstrap/dist/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="~/lib/Vintasoft/Vintasoft.Imaging.css">
<link rel="stylesheet" type="text/css" href="~/lib/Vintasoft/Vintasoft.Imaging.Office.css">

<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.js" type="text/javascript"></script>

<script src="~/lib/Vintasoft/Vintasoft.Shared.js" type="text/javascript"></script>
<script src="~/lib/Vintasoft/Vintasoft.Imaging.js" type="text/javascript"></script>
<script src="~/lib/Vintasoft/Vintasoft.Imaging.Dialogs.Bootstrap.js" type="text/javascript"></script>
<script src="~/lib/Vintasoft/Vintasoft.Imaging.Office.js" type="text/javascript"></script>
<script src="~/lib/Vintasoft/Vintasoft.Imaging.Office.Dialogs.Bootstrap.js" type="text/javascript"></script>

        • If jQuery UI dialogs are used, add references to the jQuery files and Vintasoft JavaScript files.
          Here is HTML code that adds references to the jQuery and Vintasoft JavaScript files: 
          <link rel="stylesheet" type="text/css" href="~/js/jquery-ui-css/jquery-ui.min.css">
<link rel="stylesheet" type="text/css" href="~/lib/Vintasoft/Vintasoft.Imaging.css">
<link rel="stylesheet" type="text/css" href="~/lib/Vintasoft/Vintasoft.Imaging.Office.css">

<script src="~/js/jquery-3.3.1.min.js" type="text/javascript"></script>
<script src="~/js/jquery-ui.min.js" type="text/javascript"></script>

<script src="~/lib/Vintasoft/Vintasoft.Shared.js" type="text/javascript"></script>
<script src="~/lib/Vintasoft/Vintasoft.Imaging.js" type="text/javascript"></script>
<script src="~/lib/Vintasoft/Vintasoft.Imaging.Dialogs.jQueryUI.js" type="text/javascript"></script>
<script src="~/lib/Vintasoft/Vintasoft.Imaging.Office.js" type="text/javascript"></script>
<script src="~/lib/Vintasoft/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: 
        <div class="text-center">
    <h1>VintaSoft Document Editor Demo (ASP.NET Core)</h1>

    <div id="documentEditorContainer" class="documentEditorContainer"></div>
</div>

      • Open "wwwroot\css\site.css" file, add CSS-style for "documentEditorContainer" to the "site.css" file: 
        html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}

.documentEditorContainer {
    height: 800px;
}


      • Open file "wwwroot\js\site.js", add JavaScript code that initializes and creates web document editor:

        Here is JavaScript code that initializes and displays web document editor: 
        // set the session identifier
Vintasoft.Shared.WebImagingEnviromentJS.set_SessionId("SessionID");

// specify web services, which should be used in this demo
_fileService = new Vintasoft.Shared.WebServiceControllerJS("vintasoft/api/MyVintasoftFileApi");
Vintasoft.Shared.WebServiceJS.defaultFileService = _fileService;
Vintasoft.Shared.WebServiceJS.defaultOfficeService = new Vintasoft.Shared.WebServiceControllerJS("vintasoft/api/MyVintasoftOfficeApi");

// create web document editor settings
var documentEditorSettings = new Vintasoft.Imaging.Office.UI.WebDocumentEditorSettingsJS("documentEditorContainer");

// create web document editor
var documentEditor = new Vintasoft.Imaging.Office.UI.WebDocumentEditorJS(documentEditorSettings);

// open DOCX document
documentEditor.openDocument("DocxTestDocument.docx");

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



     

     

    Copyright 2007-2026 VintaSoft LLC. All Rights Reserved.

    Send Feedback