VintaSoft Imaging .NET SDK 15.2: Документация для Веб разработчика
В этом разделе
Добавление веб DICOM-просмотрщика в ASP.NET WebForms приложение
В этом разделе
В этом руководстве показано, как создать пустое ASP.NET Web приложение в Visual Studio .NET 2019 и добавить DICOM-просмотрщик в ASP.NET WebForms приложение.

Вот шаги, которые необходимо выполнить:
  1. Создайте пустое приложение ASP.NET WebForms.

    Откройте Visual Studio .NET 2019, создайте новый проект типа "ASP.NET Web Application" и настройте его для использования .NET Framework 4.7.2:

    Выберите шаблон "Empty" для ASP.NET веб-приложения и настройте проект для использования WebForms:

  2. Серверная сторона: Добавьте ссылки на .NET-сборки Vintasoft в ASP.NET WebForms приложение.

    Добавьте ссылки на сборки Vintasoft.Shared.dll, Vintasoft.Imaging.dll, Vintasoft.Imaging.Dicom.dll, Vintasoft.Shared.Web.dll, Vintasoft.Imaging.Web.Services.dll, Vintasoft.Imaging.Dicom.Web.Services.dll, Vintasoft.Imaging.Web.Handlers.dll и Vintasoft.Imaging.Dicom.Web.Handlers.dll из папки "<SdkInstallPath>\VintaSoft Imaging .NET 15.2\Bin\DotNet4\AnyCPU\" в ASP.NET WebForms приложение.



  3. Серверная сторона: Укажите движок рисования, который должен использоваться VintaSoft Imaging .NET SDK для рисования 2D-графики.

    Приложение ASP.NET WebForms должно использовать библиотеку System.Drawing в качестве графического движка, поскольку приложение ASP.NET WebForms может использоваться только в Windows.

    Вот шаги, которые необходимо выполнить для использования движка System.Drawing:
    • Добавьте ссылку на .NET-сборку Vintasoft.Imaging.Gdi.dll.
    • Откройте файл "Default.aspx.cs" и добавьте строку кода "Vintasoft.Imaging.Drawing.Gdi.GdiGraphicsFactory.SetAsDefault();" в начало метода Page_Load - добавленный код указывает VintaSoft Imaging .NET SDK использовать библиотеку System.Drawing для отрисовки 2D-графики.

  4. Серверная сторона: Создайте веб сервисы, которые позволяют загружать/скачивать файлы и просматривать DICOM-изображения.

    • Добавьте папку "Handlers" в приложение ASP.NET WebForms.
    • Создайте веб сервис, позволяющий загружать/скачивать файл

      • Щёлкните правой кнопкой мыши по папке "Handlers" и выберите пункт в контекстном меню "Add => Generic handler".
      • Укажите имя обработчика "MyVintasoftFileHandler" и нажмите кнопку "Ok".
      • Укажите, что класс MyVintasoftFileHandler наследуется от класса VintasoftImaging.Web.HttpHandlers.VintasoftFileHandler.

        Вот C# код класса MyVintasoftFileHandler:
        namespace WebApplication1.Handlers
        {
            public class MyVintasoftFileHandler : Vintasoft.Imaging.Web.HttpHandlers.VintasoftFileHandler
            {
            }
        }
        
        
    • Создайте веб сервис, позволяющий работать с DICOM-изображениями

      • Щёлкните правой кнопкой мыши по папке "Handlers" и выберите пункт в контекстном меню "Add => Generic handler".
      • Укажите имя обработчика "MyVintasoftDicomHandler" и нажмите кнопку "Ok"
      • Укажите, что класс MyVintasoftDicomHandler является производным от VintasoftImaging.Dicom.Web.HttpHandlers.Класс VintasoftDicomHandler

        Вот исходные коды C# класса MyVintasoftDicomHandler:
        using Vintasoft.Imaging.Dicom.Web.HttpHandlers;
        
        namespace WebApplication1.Handlers
        {
            /// <summary>
            /// ASP.NET HTTP handler that handles HTTP requests from clients and allows to work with DICOM images on a server.
            /// </summary>
            public class MyVintasoftDicomHandler : VintasoftDicomHandler
            {
        
                /// <summary>
                /// Initializes a new instance of the <see cref="MyVintasoftDicomHandler"/> class.
                /// </summary>
                public MyVintasoftDicomHandler()
                    : base()
                {
                }
        
            }
        }
        
  5. Клиентская сторона: Добавьте JavaScript-библиотеки в проект.

    • Добавьте папку "Scripts\" в приложение ASP.NET WebForms (если папка отсутствует).

    • Скопируйте файлы Vintasoft.Shared.js, Vintasoft.Imaging.js, Vintasoft.Imaging.Dicom.js и Vintasoft.Imaging.Dicom.css из папки "<InstallPath>\VintaSoft Imaging .NET 15.2\Bin\JavaScript\" в папку "Scripts\".

    • Укажите, какие "стандартные" диалоги (диалог ввода пароля, диалог печати и т. д.) должны использоваться веб DICOM-просмотрщиком
      • Если веб DICOM-просмотрщик должен использовать готовые к использованию "стандартные" UI-диалоги jQuery UI:
        • Скопируйте файл jQuery в папку "Scripts\".
          Вы можете использовать файл "jquery-3.3.1.min.js" из папки "<InstallPath>\VintaSoft Imaging .NET 15.2\Examples\ASP.NET MVC\CSharp\AspNetMvcImagingDemo\Scripts\External\" или файл jQuery из любого другого источника.
        • Скопируйте файлы и папки jQuery UI в папку "Scripts\".
          Вы можете использовать файл "jquery-ui.min.js" и папку "jquery-ui-css" из папки "<InstallPath>\VintaSoft Imaging .NET 15.2\Examples\ASP.NET MVC\CSharp\AspNetMvcImagingDemo\Scripts\External\" или файлы и папки jQuery UI из любого другого источника.
        • Скопируйте файлы Vintasoft.Imaging.Dialogs.jQueryUI.js и Vintasoft.Imaging.Dicom.Dialogs.jQueryUI.js из папки "<InstallPath>\VintaSoft Imaging .NET 15.2\Bin\JavaScript\" в папку "Scripts\".

      • Если веб DICOM-просмотрщик должен использовать пользовательские "стандартные" диалоги, прочтите, как создать пользовательские "стандартные" диалоги здесь .
  6. Клиентская сторона: Добавьте JavaScript-код, который инициализирует и отображает DICOM-просмотрщик, в "Default" форму.

    • Создайте папку "UploadedImageFiles\SessionID" и скопируйте в нее DICOM-файл "<SdkInstallPath>\VintaSoft\Imaging .NET 15.2\Examples\ASP.NET Core\CSharp\AspNetCoreImagingDemo\wwwroot\UploadedImageFiles\LossyJpeg_Monochrome2_000.0000.dcm". Этот файл будет отображаться в DICOM-просмотрщике.

    • Создайте веб-форму "Default" - файл "Default.aspx".
      • Щёлкните правой кнопкой мыши по проекту и выберите в контекстном меню пункт "Add => WebForm":


      • Укажите "Default" в качестве имени веб-формы => откроется созданная веб-форма:

    • Добавьте ссылки на JavaScript-файлы:

      Вот HTML-код, который добавляет ссылки на файлы jQuery и JavaScript-файлы Vintasoft:
      <link rel="stylesheet" type="text/css" href="Scripts/jquery-ui-css/jquery-ui.min.css">
      <link rel="stylesheet" type="text/css" href="Scripts/Vintasoft.Imaging.css">
      <link rel="stylesheet" type="text/css" href="Scripts/Vintasoft.Imaging.Dicom.css">
      
      <script src="Scripts/jquery-3.3.1.min.js" type="text/javascript"></script>
      <script src="Scripts/jquery-ui.min.js" type="text/javascript"></script>
      
      <script src="Scripts/Vintasoft.Shared.js" type="text/javascript"></script>
      <script src="Scripts/Vintasoft.Imaging.js" type="text/javascript"></script>
      <script src="Scripts/Vintasoft.Imaging.Dicom.js" type="text/javascript"></script>
      <script src="Scripts/Vintasoft.Imaging.Dialogs.jQueryUI.js" type="text/javascript"></script>
      <script src="Scripts/Vintasoft.Imaging.Dicom.Dialogs.jQueryUI.js" type="text/javascript"></script>
      


    • Добавьте HTML-разметку (div-элемент, который будет отображать DICOM-просмотрщик) в веб-представление:

      Вот код HTML-разметки:
      <form id="form1" runat="server">
          <h1 style="text-align: center">VintaSoft DICOM Viewer Demo (ASP.NET WebForms)</h1>
          <div id="dicomControlContainer" style="height: 800px"></div>
      </form>
      


    • Добавьте JavaScript-код, который отображает DICOM-просмотрщик:

      Вот JavaScript-код (с разметкой страницы), который отображает DICOM-просмотрщик:
      <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication1.Default" %>
      
      <!DOCTYPE html>
      
      <html xmlns="http://www.w3.org/1999/xhtml">
      <head runat="server">
          <title>VintaSoft DICOM Viewer Demo (ASP.NET WebForms)</title>
      
          <style>
              * {
                  -webkit-box-sizing: border-box;
                  box-sizing: border-box;
                  border-collapse: collapse;
              }
          </style>
      
          <link rel="stylesheet" type="text/css" href="Scripts/jquery-ui-css/jquery-ui.min.css">
          <link rel="stylesheet" type="text/css" href="Scripts/Vintasoft.Imaging.css">
          <link rel="stylesheet" type="text/css" href="Scripts/Vintasoft.Imaging.Dicom.css">
      
          <script src="Scripts/jquery-3.3.1.min.js" type="text/javascript"></script>
          <script src="Scripts/jquery-ui.min.js" type="text/javascript"></script>
      
          <script src="Scripts/Vintasoft.Shared.js" type="text/javascript"></script>
          <script src="Scripts/Vintasoft.Imaging.js" type="text/javascript"></script>
          <script src="Scripts/Vintasoft.Imaging.Dicom.js" type="text/javascript"></script>
          <script src="Scripts/Vintasoft.Imaging.Dialogs.jQueryUI.js" type="text/javascript"></script>
          <script src="Scripts/Vintasoft.Imaging.Dicom.Dialogs.jQueryUI.js" type="text/javascript"></script>
      </head>
      <body>
          <form id="form1" runat="server">
              <h1 style="text-align: center">VintaSoft DICOM Viewer Demo (ASP.NET WebForms)</h1>
              <div id="dicomControlContainer" style="height: 800px"></div>
          </form>
      
          <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.WebServiceHandlerJS("/Handlers/MyVintasoftFileHandler.ashx");
              Vintasoft.Shared.WebServiceJS.defaultDicomService =
                  new Vintasoft.Shared.WebServiceHandlerJS("/Handlers/MyVintasoftDicomHandler.ashx");
      
              // 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>
      </body>
      </html>
      
      
  7. Запустите ASP.NET WebForms приложение и посмотрите результат.