Create a blank ASP.NET Core Web application.

Server side: Add references to the Vintasoft assemblies to your ASP.NET Core Web 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.dll assembly.
  
• Add reference to the SkiaSharp nuget-package version 2.88.6.
• Open "Startup.cs" file, add code line "Vintasoft.Imaging.Drawing.SkiaSharp.SkiaSharpDrawingFactory.SetAsDefault();" at the beginning of ConfigureServices method - 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 "Startup.cs" file, add code line "Vintasoft.Imaging.Drawing.Gdi.GdiGraphicsFactory.SetAsDefault();" at the beginning of ConfigureServices 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 view DICOM images.

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

    using Microsoft.AspNetCore.Hosting;
    
    namespace WebApplication1.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.Dicom.AspNetCore.ApiControllers.VintasoftDicomApiController class
    
    Here are source codes of MyVintasoftDicomApiController class:
    
    • C#

    using Microsoft.AspNetCore.Hosting;
    using Vintasoft.Imaging.Dicom.AspNetCore.ApiControllers;
    
    namespace WebApplication1.Controllers
    {
        /// <summary>
        /// A Web API controller that handles HTTP requests from clients and
        /// allows to work with DICOM images.
        /// </summary>
        public class MyVintasoftDicomApiController : VintasoftDicomApiController
        {
    
            /// <summary>
            /// Initializes a new instance of the <see cref="MyVintasoftDicomApiController"/> class.
            /// </summary>
            public MyVintasoftDicomApiController(IWebHostEnvironment hostingEnvironment)
                : base(hostingEnvironment)
            {
            }
    
        }
    }
    

Server side: Create MVC controller for web view that will display DICOM viewer.

• 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 "Startup.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 Startup.cs file:
  
  • C#

  using Microsoft.AspNetCore.Builder;
  using Microsoft.AspNetCore.Hosting;
  using Microsoft.Extensions.Configuration;
  using Microsoft.Extensions.DependencyInjection;
  using Microsoft.Extensions.Hosting;
  
  namespace WebApplication1
  {
      public class Startup
      {
          public Startup(IConfiguration configuration)
          {
              Configuration = configuration;
          }
  
          public IConfiguration Configuration { get; }
  
          // This method gets called by the runtime. Use this method to add services to the container.
          public void ConfigureServices(IServiceCollection services)
          {
              services.AddControllersWithViews();
  
              services.AddRazorPages();
          }
  
          // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
          public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
          {
              if (env.IsDevelopment())
              {
                  app.UseDeveloperExceptionPage();
              }
              else
              {
                  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.UseEndpoints(endpoints =>
              {
                  endpoints.MapControllerRoute("default", "{controller=Default}/{action=Index}/{id?}");
              });
          }
      }
  }
  
  

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.Dicom.js and Vintasoft.Imaging.Dicom.css files from "<InstallPath>\VintaSoft Imaging .NET v12.5\Bin\JavaScript\" folder into "wwwroot\js\" folder.
• Specify, which "standard" dialogs (show DICOM metadata, etc) should be used by web DICOM viewer
  • If web DICOM viewer 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.Dicom.Dialogs.Bootstrap.js files from "<InstallPath>\VintaSoft Imaging .NET v12.5\Bin\JavaScript\" folder into "wwwroot\js\" folder.
  • If web DICOM viewer 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.Dicom.Dialogs.jQueryUI.js files from "<InstallPath>\VintaSoft Imaging .NET v12.5\Bin\JavaScript\" folder into "wwwroot\js\" folder.
  • If web DICOM viewer should use custom "standard" dialogs,please read how to create custom "standard" dialogs here.

Client side: Add JavaScript code that allows to display DICOM images.

• Create folder "wwwroot\UploadedImageFiles\SessionID" 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.
  
  
• Open web view - file "Views\Default\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="~/js/Vintasoft.Imaging.css">
    <link rel="stylesheet" type="text/css" href="~/js/Vintasoft.Imaging.Dicom.css">
    
    <script src="~/lib/bootstrap/dist/js/bootstrap.js" type="text/javascript"></script>
    
    <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.Dicom.js" type="text/javascript"></script>
    <script src="~/js/Vintasoft.Imaging.Dialogs.Bootstrap.js" type="text/javascript"></script>
    <script src="~/js/Vintasoft.Imaging.Dicom.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="~/js/Vintasoft.Imaging.css">
    <link rel="stylesheet" type="text/css" href="~/js/Vintasoft.Imaging.Dicom.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="~/js/Vintasoft.Shared.js" type="text/javascript"></script>
    <script src="~/js/Vintasoft.Imaging.js" type="text/javascript"></script>
    <script src="~/js/Vintasoft.Imaging.Dicom.js" type="text/javascript"></script>
    <script src="~/js/Vintasoft.Imaging.Dialogs.Bootstrap.js" type="text/javascript"></script>
    <script src="~/js/Vintasoft.Imaging.Dicom.Dialogs.Bootstrap.js" type="text/javascript"></script>
    

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

  <h1 style="text-align: center">VintaSoft DICOM Viewer Demo (ASP.NET Core)</h1>
  
  <div id="dicomControlContainer" style="height: 800px"></div>
  
  

• Add JavaScript code that initializes and creates DICOM viewer:
  
  Here is JavaScript code that initializes and displays DICOM viewer:
  
  • JavaScript

  <script type="text/javascript">
      // 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("vintasoft/api/MyVintasoftFileApi");
      Vintasoft.Shared.WebServiceJS.defaultDicomService =
          new Vintasoft.Shared.WebServiceControllerJS("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"]);
  </script>
  
  

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