VintaSoft Imaging .NET SDK 12.5: Documentation for Web developer
In This Topic
    Add web spreadsheet document editor to an ASP.NET Core application
    In This Topic
    This tutorial shows how to create a blank ASP.NET Core Web application in Visual Studio .NET 2022 and add the spreadsheet document editor (with ability to open, edit and save spreadsheet document (XLSX)) to ASP.NET Core application.


    Here are steps, which must be done:
    1. Create a blank ASP.NET Core Web application.

      Open Visual Studio .NET 2022 and create a new project, of ASP.NET Core Web application type:

      Configure the project to use .NET 8.0:

    2. Server side: Add references to the Vintasoft assemblies to your ASP.NET Core Web application.

      Copy Vintasoft.Shared.dll, Vintasoft.Imaging.dll, Vintasoft.Imaging.Office.OpenXml.dll, Vintasoft.Shared.Web.dll, Vintasoft.Imaging.Web.Services.dll, Vintasoft.Imaging.Office.Web.Services.dll, Vintasoft.Imaging.AspNetCore.ApiControllers.dll and Vintasoft.Imaging.Office.AspNetCore.ApiControllers.dll assemblies from "<SdkInstallPath>\VintaSoft Imaging .NET v12.5\Bin\DotNet8\AnyCPU\" directory to the "Bin" directory of ASP.NET Core Web application and add references to assemblies in ASP.NET Core Web application.



    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.dll assembly.
      • Add reference to the SkiaSharp nuget-package version 2.88.6.
      • Open "Program.cs" file, add code line "Vintasoft.Imaging.Drawing.SkiaSharp.SkiaSharpDrawingFactory.SetAsDefault();". 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.dll assembly.
      • Open "Program.cs" file, add code line "Vintasoft.Imaging.Drawing.Gdi.GdiGraphicsFactory.SetAsDefault();". Added code specifies that VintaSoft Imaging .NET SDK should use System.Drawing library for drawing of 2D graphics.

    4. 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:
          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)
                  {
                  }
              }
          }
          
          
    5. Server side: Create MVC controller for web view that will display spreadsheet document editor.

      • Press the right mouse button on the "Controllers" folder and select the "Add => Controller..." menu from context menu
      • Select "MVC Controller - Empty" template, set the controller name to the "DefaultController" and press the "Add" button
      • Open "Program.cs" file, add controllers with views to the services of ASP.NET Core application:


        Add created MVC controller to the endpoints of ASP.NET Core application:


        Enable static file serving for the current request path of ASP.NET Core application:


        Here are C# source codes of Program.cs file:
        var builder = WebApplication.CreateBuilder(args);
        
        builder.Services.AddControllersWithViews();
        
        // Add services to the container.
        builder.Services.AddRazorPages();
        
        var app = builder.Build();
        
        // specify that VintaSoft Imaging .NET SDK should use SkiaSharp library for drawing of 2D graphics
        Vintasoft.Imaging.Drawing.SkiaSharp.SkiaSharpDrawingFactory.SetAsDefault();
        
        // Configure the HTTP request pipeline.
        if (!app.Environment.IsDevelopment())
        {
            app.UseExceptionHandler("/Error");
            // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
            app.UseHsts();
        }
        
        app.UseHttpsRedirection();
        app.UseStaticFiles();
        
        app.UseRouting();
        
        app.UseAuthorization();
        
        app.MapRazorPages();
        
        app.MapControllerRoute("default", "{controller=Default}/{action=Index}/{id?}");
        
        app.Run();
        
        
    6. Client side: Add JavaScript libraries to the project.

      • Add the "wwwroot\js\" 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 and Vintasoft.Imaging.Office.css files from "<InstallPath>\VintaSoft Imaging .NET v12.5\Bin\JavaScript\" folder into "wwwroot\js\" folder.
      • 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 v12.5\Bin\JavaScript\" folder into "wwwroot\js\" folder.

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

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

      • Open web view - file "Pages\Index.cshtml".
      • Add references to used JavaScript libraries:

        Here is HTML code that adds references to the Vintasoft JavaScript files:
        <link rel="stylesheet" type="text/css" href="~/js/Vintasoft.Imaging.css">
        <link rel="stylesheet" type="text/css" href="~/js/Vintasoft.Imaging.Office.css">
        
        <script src="~/js/Vintasoft.Shared.js" type="text/javascript"></script>
        <script src="~/js/Vintasoft.Imaging.js" type="text/javascript"></script>
        <script src="~/js/Vintasoft.Imaging.Dialogs.Bootstrap.js" type="text/javascript"></script>
        <script src="~/js/Vintasoft.Imaging.Office.js" type="text/javascript"></script>
        <script src="~/js/Vintasoft.Imaging.Office.Dialogs.Bootstrap.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:
        <h1 style="text-align: center">VintaSoft Spreadsheet Editor Demo (ASP.NET Core)</h1>
        
        <div id="spreadsheetDocumentEditorControlContainer" style="width: 100%; height: calc(100% - 60px);"></div>
        
      • Add JavaScript code that initializes and creates spreadsheet document editor:

        Here is JavaScript code that initializes and displays spreadsheet document editor:
        <script type="text/javascript">
            function main() {
                // 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
                _spreadsheetDocumentEditorControl = new Vintasoft.Imaging.Office.UI.WebSpreadsheetDocumentEditorControlJS(spreadsheetDocumentEditorControlSettings);
        
                var fileId = "SalesReport.xlsx";
                // copy the file from global folder to the session folder
                Vintasoft.Imaging.VintasoftFileAPI.copyFile("UploadedImageFiles/" + fileId, __onCopyFile_success, __onCopyFile_error);
            }
        
            function __onCopyFile_success(data) {
                _spreadsheetDocumentEditorControl.get_SpreadsheetEditorControl().openDocument(data.fileId);
            }
        
            function __onCopyFile_error(data) {
                alert(data.errorMessage);
            }
        
            main();
        </script>
        
        
      • Open web view - file "Pages\_ViewStart.cshtml" and change the layout value to null. This will disable default layout rendering on Index page:
    8. Run the ASP.NET Core Web application and see the result.