Создайте пустое ASP.NET MVC 5 приложение.

На стороне сервера: Добавьте ссылки на .NET-сборки Vintasoft в ASP.NET MVC 5 приложение.

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

• Добавьте ссылку на .NET-сборку Vintasoft.Imaging.Gdi.dll.
  
• Откройте файл "Global.asax.cs" и добавьте строку кода "Vintasoft.Imaging.Drawing.Gdi.GdiGraphicsFactory.SetAsDefault();" в начало метода Application_Start - добавленный код указывает VintaSoft Imaging .NET SDK использовать библиотеку System.Drawing для отрисовки 2D-графики.

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

• Создайте веб сервис, позволяющий загружать/скачивать файл

  • Нажмите правую кнопку мыши на папке "Controllers" и выберите меню "Add => Controller..." из контекстного меню
    
  • Выберите шаблон "Empty API controller", установите имя контроллера "MyVintasoftFileApiController" и нажмите кнопку "Add".
    
  • Укажите, что класс MyVintasoftFileApiController наследуется от класса Vintasoft.Imaging.Web.Api2Controllers.VintasoftFileApi2Controller.
    
    Вот исходные коды класса MyVintasoftFileApiController:
    
    • C#

    namespace WebApplication1.Controllers
    {
        public class MyVintasoftFileApiController : Vintasoft.Imaging.Web.Api2Controllers.VintasoftFileApi2Controller
        {
    
            public MyVintasoftFileApiController()
                : base()
            {
            }
    
        }
    }
    
    

    
    

• Создайте веб сервис, позволяющий управлять коллекцией изображений

  • Нажмите правую кнопку мыши на папке "Controllers" и выберите меню "Add => Controller..." из контекстного меню
    
  • Выберите шаблон "Empty API controller", установите имя контроллера "MyVintasoftImageCollectionApiController" и нажмите кнопку "Add".
    
  • Укажите, что класс MyVintasoftImageCollectionApiController наследуется от класса Vintasoft.Imaging.Web.Api2Controllers.VintasoftImageCollectionApi2Controller.
    
    Вот исходные коды класса MyVintasoftImageCollectionApiController:
    
    • C#

    namespace WebApplication1.Controllers
    {
        public class MyVintasoftImageCollectionApiController :
            Vintasoft.Imaging.Web.Api2Controllers.VintasoftImageCollectionApi2Controller
        {
    
            public MyVintasoftImageCollectionApiController()
                : base()
            {
            }
    
        }
    }
    
    

    
    

• Создайте веб сервис, который позволяет получать информацию об изображениях, получать миниатюры и рендерить тайлы изображений.

  • Нажмите правую кнопку мыши на папке "Controllers" и выберите меню "Add => Controller..." из контекстного меню
    
  • Выберите шаблон "Empty API controller", установите имя контроллера "MyVintasoftImageApiController" и нажмите кнопку "Add".
    
  • Укажите, что класс MyVintasoftImageApiController наследуется от класса Vintasoft.Imaging.Web.Api2Controllers.VintasoftImageApi2Controller.
    
    Вот исходные коды класса MyVintasoftImageApiController:
    
    • C#

    namespace WebApplication1.Controllers
    {
        public class MyVintasoftImageApiController : Vintasoft.Imaging.Web.Api2Controllers.VintasoftImageApi2Controller
        {
    
            public MyVintasoftImageApiController()
                : base()
            {
            }
    
        }
    }
    
    

    
    
• Откройте файл "App_Start\WebApiConfig.cs" и проверьте, правильно ли ASP.NET MVC приложение регистрирует маршрут для Web API контроллера.
  
  Вот C# код файла WebApiConfig.cs:
  
  • C#

  using System.Web.Http;
  
  namespace WebApplication1
  {
      public static class WebApiConfig
      {
          public static void Register(HttpConfiguration config)
          {
              config.Routes.MapHttpRoute(
                  name: "DemoAPI",
                  routeTemplate: "vintasoft/api/{controller}/{action}"
              );
          }
      }
  }
  
  

На стороне сервера: Создайте ASP.NET MVC 5 контроллер для веб-представления, которое будет отображать веб просмотрщик изображений.

• Установите nuget-пакет Microsoft.AspNet.Mvc 5.2.7:
  
  
  
• Нажмите правую кнопку мыши на папке "Controllers" и выберите меню "Add => Controller..." из контекстного меню
  
  
  
• Выберите шаблон "MVC 5 Controller - Empty", укажите имя контроллера "DefaultController" и нажмите кнопку "Add".
  
  
  
• Откройте файл "App_Start/RouteConfig.cs" и проверьте, правильно ли ASP.NET MVC приложение регистрирует маршрут для контроллера MVC.
  
  Вот C# код файла RouteConfig.cs:
  
  • C#

  using System.Web.Mvc;
  using System.Web.Routing;
  
  namespace WebApplication1
  {
      public class RouteConfig
      {
          public static void RegisterRoutes(RouteCollection routes)
          {
              routes.IgnoreRoute("{resource}.axd/{*pathInfo}");
  
              routes.MapRoute(
                  name: "Default",
                  url: "{controller}/{action}",
                  defaults: new { controller = "Default", action = "Index" }
              );
          }
      }
  }
  
  
  

На стороне сервера: Проверьте глобальную конфигурацию ASP.NET MVC 5 приложения.

using System.Web.Http;
using System.Web.Mvc;
using System.Web.Routing;

namespace WebApplication1
{
    public class WebApiApplication : System.Web.HttpApplication
    {
        protected void Application_Start()
        {
            AreaRegistration.RegisterAllAreas();
            GlobalConfiguration.Configure(WebApiConfig.Register);
            RouteConfig.RegisterRoutes(RouteTable.Routes);
        }
    }
}

На стороне клиента: Создайте веб-представление для отображения веб просмотрщика изображений и миниатюр.

• Откройте файл "DefaultController.cs", щёлкните правой кнопкой мыши по методу "Index" класса DefaultController и выберите в контекстном меню пункт "Add View...".
  
• Выберите шаблон "MVC 5 View", нажмите кнопку "Add", укажите "Index" в качестве имени представления, снимите флажок "Use a layout page" и нажмите кнопку "Add" => будет создан файл "Views\Default\Index.cshtml".
  

На стороне клиента: Добавьте в проект Vintasoft JavaScript-файлы.

• Создайте папку "Scripts", если папка "Scripts" отсутствует.
  
  
• Скопируйте файл jQuery (версии 3 или выше) в папку "Scripts", если папка "Scripts" не содержит файл jQuery (jquery-3.X.1.min.js).
  Вы можете использовать файл jquery-3.4.1.min.js из папки "<SdkInstallPath>\VintaSoft Imaging .NET 14.0\Examples\ASP.NET MVC\CSharp\AspNetMvcImagingDemo\Scripts\External\" или файл jQuery (версии 3 или выше) из любого другого источника.
  
  
• Скопируйте файлы Vintasoft.Shared.js и Vintasoft.Imaging.js из папки "<SdkInstallPath>\VintaSoft Imaging .NET 14.0\Bin\JavaScript\" в папку "Scripts".
  

На стороне клиента: Добавьте JavaScript-код, который отображает веб просмотрщик изображений.

• Создайте папку "wwwroot\UploadedImageFiles\SessionID" и скопируйте тестовый PDF документ "<SdkInstallPath>\VintaSoft\Imaging .NET 14.0\Images\VintasoftImagingDemo.pdf" в созданную папку. Этот документ будет отображаться в веб просмотрщике изображений.
  
  
• Откройте веб-представление - файл "Views\Default\Index.cshtml".
  
  
  
• Добавьте ссылки на JavaScript-файлы Vintasoft:
  
  Вот HTML-код, который добавляет ссылки на файлы jQuery и JavaScript-файлы Vintasoft:
  
  • HTML

  <script src="~/Scripts/jquery-3.4.1.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>
  

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

  <h1 style="text-align: center">VintaSoft Image Viewer Demo (ASP.NET MVC5)</h1>
  
  <div id="WebThumbnailViewer1Div" style="width: 240px; height: 650px; float:left"></div>
  <div id="WebImageViewer1Div" style="width: 650px; height: 650px; float:left"></div>
  

  
  
  
• Добавьте JavaScript-код, который инициализирует и создаёт веб просмотрщик изображений:
  
  Вот JavaScript-код, который инициализирует и создаёт веб просмотрщик изображений:
  
  • JavaScript

  @{
      Layout = null;
  }
  
  <!DOCTYPE html>
  
  <html>
  <head>
      <meta name="viewport" content="width=device-width" />
      <title>VintaSoft Image Viewer Demo (ASP.NET MVC5)</title>
  
      <script src="~/Scripts/jquery-3.4.1.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>
  </head>
  <body>
      <h1 style="text-align: center">VintaSoft Image Viewer Demo (ASP.NET MVC5)</h1>
  
      <div id="WebThumbnailViewer1Div" style="width: 240px; height: 650px; float:left"></div>
      <div id="WebImageViewer1Div" style="width: 650px; height: 650px; float:left"></div>
  
      <script type="text/javascript">
          // set the session identifier
          Vintasoft.Shared.WebImagingEnviromentJS.set_SessionId("SessionID");
  
          // specify web services, which should be used by Vintasoft Web Document Viewer
          Vintasoft.Shared.WebServiceJS.defaultFileService =
              new Vintasoft.Shared.WebServiceControllerJS("vintasoft/api/MyVintasoftFileApi");
          Vintasoft.Shared.WebServiceJS.defaultImageCollectionService =
              new Vintasoft.Shared.WebServiceControllerJS("vintasoft/api/MyVintasoftImageCollectionApi");
          Vintasoft.Shared.WebServiceJS.defaultImageService =
              new Vintasoft.Shared.WebServiceControllerJS("vintasoft/api/MyVintasoftImageApi");
  
          // create thumbnail viewer
          var thumbnailViewer = new Vintasoft.Imaging.UI.WebThumbnailViewerJS("WebThumbnailViewer1Div");
          // create image viewer
          var imageViewer = new Vintasoft.Imaging.UI.WebImageViewerJS("WebImageViewer1Div");
          // specify that image viewer depends from thumbnail viewer
          imageViewer.set_MasterViewer(thumbnailViewer);
  
          // open file from session folder and add images from file to the image viewer
          imageViewer.get_Images().openFile("VintasoftImagingDemo.pdf");
      </script>
  </body>
  </html>
  
  

Запустите ASP.NET MVC5 приложение и посмотрите результат.