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

Server side: Add references to the Vintasoft nuget-packages to the ASP.NET Core 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.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.

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

Server side: Add reference to nuget-packages.

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

Server side: Define XLSX file that contains templates for new charts.

• Create "wwwroot\Resources\" folder.
• Download "ChartSource.xlsx" file from Github and place downloaded file into "wwwroot\Resources\" folder.
  The "ChartSource.xlsx" file contains worksheets with charts, which are used as templates for adding charts. You can modify this file or use your own file with charts.

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

• Add the "Controllers" folder to the project.

• 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:
    
    • C#

    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:
    
    • C#

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

Client side: Add JavaScript libraries to the project.

• Add the "wwwroot\lib\Vintasoft\" folder to ASP.NET Core application.
  
  
• 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.
  
  
• Specify, which "standard" dialogs should be used by web spreadsheet editor
  • If web spreadsheet 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 spreadsheet 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 spreadsheet editor should use custom "standard" dialogs, please read how to create custom "standard" dialogs here.

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

• Create folder "wwwroot\UploadedImageFiles\SessionID" and copy any XLSX document to the folder. This document will be displayed in spreadsheet 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:
    
    • HTML

    <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:
    
    • HTML

    <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 spreadsheet document editor) to the web view:
  
  Here is HTML markup code:
  
  • HTML

  <h1> Spreadsheet Editor Demo (ASP.NET Core)</h1>
  
  <div id="spreadsheetDocumentEditorControlContainer" class="spreadsheetDocumentEditorControlContainer"></div>
  
  

  
  
• Open "wwwroot\css\site.css" file, add CSS-style for "spreadsheetDocumentEditorControlContainer" to the "site.css" file:
  • HTML

  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;
  }
  
  .spreadsheetDocumentEditorControlContainer {
      height: 800px;
  }
  
  

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

  // 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 the spreadsheet document editor control settings
  var spreadsheetDocumentEditorControlSettings =
      new Vintasoft.Imaging.Office.UI.WebSpreadsheetDocumentEditorControlSettingsJS("spreadsheetDocumentEditorControlContainer");
  
  // create the spreadsheet document editor control
  var spreadsheetDocumentEditorControl =
      new Vintasoft.Imaging.Office.UI.WebSpreadsheetDocumentEditorControlJS(spreadsheetDocumentEditorControlSettings);
  
  // open XSX document
  spreadsheetDocumentEditorControl.openDocument("SalesReport.xlsx");
  
  

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