Create a blank React and ASP.NET Core application.

• Open Visual Studio .NET 2022 and create a new application of "React and ASP.NET Core" type:
  
  
• Configure the application to use .NET 8.0:
  

Server side: Add references to the Vintasoft assemblies to "ReactApp1.Server" project.

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.dll assembly.
  
• Add reference to the SkiaSharp nuget-package version 2.88.6.
• Open "Program.cs" file in "ReactApp1.Server" project, 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.dll assembly.
  
• Open "Program.cs" file in "ReactApp1.Server" project, 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: Create web services, which allow to upload/download file and work with DICOM images.

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

• Create web service that allows to work with DICOM images

  • 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 "MyVintasoftDicomApiController" and press the "Add" button
    
  • Specify that MyVintasoftDicomApiController class is derived from Vintasoft.Imaging.AspNetCore.ApiControllers.VintasoftImageCollectionApiController class
    
    Here are source codes of MyVintasoftDicomApiController class:
    
    • C#

    using Microsoft.AspNetCore.Hosting;
    using Vintasoft.Imaging.Dicom.AspNetCore.ApiControllers;
    
    namespace ReactApp1.Server.Controllers
    {
        public class MyVintasoftDicomApiController : VintasoftDicomApiController
        {
    
            public MyVintasoftDicomApiController(IWebHostEnvironment hostingEnvironment)
                : base(hostingEnvironment)
            {
            }
    
        }
    }
    

Server side: Create CORS-policy that allows to access web services from client side.

• Open the "Program.cs" file in "ReactApp1.Server" project and add code that:
  • Creates CORS-policy that allows to access web services from "localhost"
  • Enables CORS usage in "ReactApp1.Server" project
  
  Here are source codes of "Program.cs" file after update:
  
  • C#

  Vintasoft.Imaging.Drawing.SkiaSharp.SkiaSharpDrawingFactory.SetAsDefault();
  
  var builder = WebApplication.CreateBuilder(args);
  
  // Add services to the container.
  
  builder.Services.AddControllers();
  
  builder.Services.AddCors(options =>
  {
      options.AddPolicy(name: "CorsPolicy1", policy =>
      {
          policy.SetIsOriginAllowed(origin => new Uri(origin).Host == "localhost").AllowAnyHeader().AllowAnyMethod();
      });
  });
  
  var app = builder.Build();
  
  app.UseDefaultFiles();
  app.UseStaticFiles();
  
  // Configure the HTTP request pipeline.
  
  app.UseHttpsRedirection();
  
  app.UseAuthorization();
  
  app.UseCors("CorsPolicy1");
  
  app.MapControllers();
  
  app.MapFallbackToFile("/index.html");
  
  app.Run();
  
  

Server side: Update launch URL in 'launchSettings.json' file.

• Open file "Properties\launchSettings.json" in "ReactApp1.Server" and clear launch URL:
  

Server side: Copy the default test PDF document to a server side.

• Create folder "UploadedImageFiles\SessionID" in "ReactApp1.Server" project and copy test DICOM file "<SdkInstallPath>\VintaSoft\Imaging .NET v12.5\Examples\ASP.NET Core\CSharp\AspNetCoreImagingDemo\wwwroot\UploadedImageFiles\LossyJpeg_Monochrome2_000.0000.dcm" to the folder. This file will be displayed in DICOM viewer.

Compile the project for restoring dependencies using 'npm'.

Delete files, which are not necessary in this tutorial.

• Delete files "WeatherForecast.cs" and "Controllers\WeatherForecastController.cs" in "ReactApp1.Server" project - the ASP.NET Core Web API controller WeatherForecast is not necessary in this tutorial.
  
  
• Delete files "src\App.css" and "src\App.jsx" - this React-component is not necessary in this tutorial.

Client side: Add JavaScript files to the "reactapp1.client" project.

• Copy Vintasoft.Shared.js, Vintasoft.Imaging.js and Vintasoft.Imaging.Dicom.js files from "<InstallPath>\VintaSoft Imaging .NET v12.5\Bin\JavaScript\" folder into "public\" folder.
  
  
• Specify, which "standard" dialogs (password dialog, print dialog, etc) should be used by web DICOM viewer
  • If web DICOM viewer should use ready-to-use "standard" Bootstrap dialogs:
    • Add "bootstrap" Node-module to the "package.json" file. Rebuild the project for refreshing Node-modules.
      Here are source codes of "package.json" file after update:
      
      • JSON

      {
        "name": "reactapp1.client",
        "private": true,
        "version": "0.0.0",
        "type": "module",
        "scripts": {
          "dev": "vite",
          "build": "vite build",
          "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
          "preview": "vite preview"
        },
        "dependencies": {
          "react": "^18.2.0",
          "react-dom": "^18.2.0",
          "bootstrap": "5.3.3"
        },
        "devDependencies": {
          "@types/react": "^18.2.66",
          "@types/react-dom": "^18.2.22",
          "@vitejs/plugin-react": "^4.2.1",
          "eslint": "^8.57.0",
          "eslint-plugin-react": "^7.34.1",
          "eslint-plugin-react-hooks": "^4.6.0",
          "eslint-plugin-react-refresh": "^0.4.6",
          "vite": "^5.2.0"
        }
      }
      
      

    • Copy Vintasoft.Imaging.Dialogs.Bootstrap.js and Vintasoft.Imaging.Dicom.Dialogs.Bootstrap.js files from "<InstallPath>\VintaSoft Imaging .NET v12.5\Bin\JavaScript\" folder into "public\" folder.
    
    
  • If web DICOM viewer should use ready-to-use "standard" jQuery UI dialogs:
    • Add "jquery-ui-dist" Node-module to the "package.json" file. Rebuild the project for refreshing Node-modules.
    • Copy Vintasoft.Imaging.Dialogs.jQueryUI.js and Vintasoft.Imaging.Dicom.Dialogs.jQueryUI.js files from "<InstallPath>\VintaSoft Imaging .NET v12.5\Bin\JavaScript\" folder into "src\app\assets\" folder.
    
    
  • If web DICOM viewer should use custom "standard" dialogs,please read how to create custom "standard" dialogs here.
    
    
• Copy files Vintasoft.Imaging.css and Vintasoft.Imaging.Dicom.css with CSS-styles of Vintasoft web DICOM viewer from "<SdkInstallPath>\VintaSoft\Imaging .NET v12.5\Bin\JavaScript\" folder to the "public\" folder.
  
  
• Add links to Bootstrap .css-file and Vintasoft .css-files to the "index.html" file, add references to Vintasoft JavaScript files to the header of "index.html" file:
  
  
  Here are source codes of "index.html" file:
  
  • HTML

  <!doctype html>
  <html lang="en">
  <head>
      <meta charset="UTF-8" />
      <link rel="icon" type="image/svg+xml" href="/vite.svg" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      <title>Vite + React</title>
  
      <link rel="stylesheet" type="text/css" href="node_modules\bootstrap\dist\css\bootstrap.css" />
      <link rel="stylesheet" type="text/css" href="Vintasoft.Imaging.css">
      <link rel="stylesheet" type="text/css" href="Vintasoft.Imaging.Dicom.css">
      <link rel="stylesheet" type="text/css" href="src/DicomViewerDemo.css">
  
      <script src="Vintasoft.Shared.js" type="text/javascript"></script>
      <script src="Vintasoft.Imaging.js" type="text/javascript"></script>
      <script src="Vintasoft.Imaging.Dicom.js" type="text/javascript"></script>
      <script src="Vintasoft.Imaging.Dialogs.Bootstrap.js" type="text/javascript"></script>
      <script src="Vintasoft.Imaging.Dicom.Dialogs.Bootstrap.js" type="text/javascript"></script>
  </head>
    <body>
      <div id="root"></div>
      <script type="module" src="/src/main.jsx"></script>
    </body>
  </html>
  
  

  
  
• Add CSS-style "dicomViewerContainer", which defines size of DICOM viewer container, to the "src\DicomViewerDemo.css" file:
  
  
  Here are source codes of "DicomViewerDemo.css" file:
  
  • HTML

  h1 {
      width: 1200px;
      text-align: center;
  }
  
  .dicomControlContainer {
      width: 1200px;
      height: 800px;
  }
  
  

Client side: Create React-component that allows to view DICOM images.

• Create "DicomViewerDemo.jsx" file that will contain source codes of React component (DicomViewerDemo class):
  • Select "Add => New Item..." context menu for folder "src\" => "Add new item" dialog will appear
  • Select "JSX File" type for new item
  • Set "DicomViewerDemo.jsx" as element name
  • Click the "Add" button => dialog will be closed and file "DicomViewerDemo.jsx" will be added into folder "src\"
  
  Add DicomViewerDemo class declaration with 'render' function (renders page header and div-element that displays DICOM viewer) to the "DicomViewerDemo.jsx" file:
  
  
  Add 'componentDidMount' function (contains JavaScript code that initializes and creates DICOM viewer) to the DicomViewerDemo class:
  
  
  Important: Visual Studio uses randomized network port for ASP.NET Core API and you need to update JavaScript code and change web services URL from "https://localhost:7240/" to URL in your application.
  
  Here is JavaScript code of "DicomViewerDemo.jsx" file:
  
  • JavaScript

  import { Component } from 'react';
  
  export class DicomViewerDemo extends Component {
      static displayName = DicomViewerDemo.name;
      static _isInitialized = false;
  
      render() {
          return (
              <div>
                  <h1>VintaSoft DICOM Viewer Demo (ASP.NET Core + React.js)</h1>
  
                  <div id="dicomControlContainer" className="dicomControlContainer"></div>
              </div>
          );
      }
  
      componentDidMount() {
          if (this._isInitialized)
              return;
          this._isInitialized = true;
  
          // declare reference to the Vintasoft namespace
          let Vintasoft = window.Vintasoft;
  
          // set the session identifier
          Vintasoft.Shared.WebImagingEnviromentJS.set_SessionId("SessionID");
  
          // specify web services, which should be used by Vintasoft Web DICOM Viewer
          Vintasoft.Shared.WebServiceJS.defaultFileService =
              new Vintasoft.Shared.WebServiceControllerJS("https://localhost:7240/vintasoft/api/MyVintasoftFileApi");
          Vintasoft.Shared.WebServiceJS.defaultDicomService =
              new Vintasoft.Shared.WebServiceControllerJS("https://localhost:7240/vintasoft/api/MyVintasoftDicomApi");
  
          // create DICOM control settings
          var dicomControlSettings = new Vintasoft.Imaging.Dicom.WebDicomControlSettingsJS("dicomControlContainer", "dicomControl");
          // create DICOM control
          var dicomControl = new Vintasoft.Imaging.Dicom.WebDicomControlJS(dicomControlSettings);
  
          // subscribe to the "warningOccured" event of DICOM control
          Vintasoft.Shared.subscribeToEvent(dicomControl, "warningOccured", function (event, eventArgs) { alert(eventArgs.message); });
  
          // add DICOM file "LossyJpeg_Monochrome2_000.0000.dcm" to the DICOM control
          dicomControl.addFiles(["LossyJpeg_Monochrome2_000.0000.dcm"]);
      }
  
  }
  

  
  
• Add created React-component to the React-application code - "src\main.jsx" file:
  
  
  Here are source codes of "main.jsx" file after update:
  
  • JavaScript

  import React from 'react'
  import ReactDOM from 'react-dom/client'
  import { DicomViewerDemo } from './DicomViewerDemo.jsx'
  
  ReactDOM.createRoot(document.getElementById('root')).render(
      <React.StrictMode>
          <DicomViewerDemo />
      </React.StrictMode>,
  )
  
  

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