Create a blank ASP.NET MVC5 application.

Server side: Add references to the Vintasoft assemblies to ASP.NET MVC5 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.Gdi.dll assembly.
  
• Open "Global.asax.cs" file, add code line "Vintasoft.Imaging.Drawing.Gdi.GdiGraphicsFactory.SetAsDefault();" at the beginning of Application_Start 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, manage image collection, get information about images, get thumbnails, render image tiles, extract/search text and annotate document.

• 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.Web.Api2Controllers.VintasoftFileApi2Controller class
    
    Here are source codes of MyVintasoftFileApiController class:
    
    • C#

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

    
    

• Create web service that allows to manage image collection

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

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

    
    

• Create web service that allows to get information about images, get thumbnails, render image tiles, extract/search text

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

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

    
    

• Create web service that allows to annotate images and 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 "MyVintasoftAnnotationCollectionApiController" and press the "Add" button
    
  • Specify that MyVintasoftAnnotationCollectionApiController class is derived from Vintasoft.Imaging.Annotation.Web.Api2Controllers.VintasoftAnnotationCollectionApi2Controller class
    
    Here are source codes of MyVintasoftAnnotationCollectionApiController class:
    
    • C#

    namespace WebApplication1.Controllers
    {
        public class MyVintasoftAnnotationCollectionApiController :
            Vintasoft.Imaging.Annotation.Web.Api2Controllers.VintasoftAnnotationCollectionApi2Controller
        {
    
            public MyVintasoftAnnotationCollectionApiController()
                : base()
            {
            }
    
        }
    }
    
    

    
    
• Open "App_Start\WebApiConfig.cs" file and check that ASP.NET MVC application correctly registers route for Web API controller.
  
  Here are C# source codes of WebApiConfig.cs file:
  
  • 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}"
              );
          }
      }
  }
  
  

Server side: Create ASP.NET MVC 5 controller for web view that will display document viewer.

• Press the right mouse button on the "Controllers" folder and select the "Add => Controller..." menu from context menu
  
  
  
• Select "MVC 5 Controller - Empty" template, set the controller name to the "DefaultController" and press the "Add" button
  
  
  
• Open "App_Start\RouteConfig.cs" file and check that ASP.NET MVC application correctly registers route for MVC controller.
  
  Here are C# source codes of RouteConfig.cs file:
  
  • 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" }
              );
          }
      }
  }
  
  
  

Server side: Check global configuration of ASP.NET MVC5 application.

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);
        }
    }
}

Client side: Create web view for displaying document viewer.

• Open "DefaultController.cs" file, press the right mouse button on the "Index" method of DefaultController class and select the "Add View..." menu from context menu
  
• Select "MVC 5 View" template, click "Add" button, set view name to "Index", uncheck "Use a layout page" checkbox and press the "Add" button => "Views\Default\Index.cshtml" file will be created
  

Client side: Add JavaScript libraries to the project.

• Add the "Scripts\" folder to ASP.NET MVC application if folder does not exist.
  
  
• Copy Vintasoft.Shared.js, Vintasoft.Imaging.js, Vintasoft.Imaging.Annotation.js, Vintasoft.Imaging.DocumentViewer.js and Vintasoft.Imaging.DocumentViewer.css files from "<InstallPath>\VintaSoft Imaging .NET v12.4\Bin\JavaScript\" folder into "Scripts\" folder.
  
  
• Specify, which "standard" dialogs (password dialog, print dialog, etc) should be used by web document viewer
  • If web document viewer should use ready-to-use "standard" jQuery UI dialogs (modern dialogs with ability to move dialog):
    • Copy jQuery file into "Scripts\" folder.
      You can use "jquery-3.3.1.min.js" file from "<InstallPath>\VintaSoft Imaging .NET v12.4\Examples\ASP.NET MVC\CSharp\AspNetMvcImagingDemo\Scripts\External\" folder or jQuery file from any other source.
    • Copy jQuery UI files and folders into "Scripts\" folder.
      You can use "jquery-ui.min.js" file and "jquery-ui-css" folder from "<InstallPath>\VintaSoft Imaging .NET v12.4\Examples\ASP.NET MVC\CSharp\AspNetMvcImagingDemo\Scripts\External\" folder or jQuery UI files and folders from any other source.
    • Copy Vintasoft.Imaging.Dialogs.jQueryUI.js and Vintasoft.Imaging.DocumentViewer.Dialogs.jQueryUI.js files from "<InstallPath>\VintaSoft Imaging .NET v12.4\Bin\JavaScript\" folder into "Scripts\" folder.
      
      
  • If web document viewer should use custom "standard" dialogs, please read how to create custom "standard" dialogs here.

Client side: Add JavaScript code that allows to display document, search and extract text from document, annotate document.

• Create folder "UploadedImageFiles\SessionID" and copy test PDF document "<SdkInstallPath>\VintaSoft\Imaging .NET v12.4\Images\VintasoftImagingDemo.pdf" to the folder. This document will be displayed in document viewer.
  
  
• Open web view - file "Views\Default\Index.cshtml".
  
  
  
• Add references to Vintasoft JavaScript files:
  
  Here is HTML code that adds references to jQuery and Vintasoft JavaScript files:
  
  • HTML

  <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.DocumentViewer.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.Annotation.js" type="text/javascript"></script>
  <script src="~/Scripts/Vintasoft.Imaging.DocumentViewer.js" type="text/javascript"></script>
  <script src="~/Scripts/Vintasoft.Imaging.DocumentViewer.Dialogs.jQueryUI.js" type="text/javascript"></script>
  

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

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

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

  @{
      Layout = null;
  }
  
  <!DOCTYPE html>
  
  <html>
  <head>
      <meta name="viewport" content="width=device-width" />
      <title>VintaSoft Document Viewer Demo (ASP.NET MVC5)</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.DocumentViewer.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.Annotation.js" type="text/javascript"></script>
      <script src="~/Scripts/Vintasoft.Imaging.DocumentViewer.js" type="text/javascript"></script>
      <script src="~/Scripts/Vintasoft.Imaging.DocumentViewer.Dialogs.jQueryUI.js" type="text/javascript"></script>
  </head>
  <body>
      <h1 style="text-align: center">VintaSoft Document Viewer Demo (ASP.NET Core MVC5)</h1>
  
      <div id="documentViewerContainer" style="height: 800px"></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");
          Vintasoft.Shared.WebServiceJS.defaultAnnotationService =
              new Vintasoft.Shared.WebServiceControllerJS("vintasoft/api/MyVintasoftAnnotationCollectionApi");
  
          // create settings for document viewer with annotation support
          let docViewerSettings =
              new Vintasoft.Imaging.DocumentViewer.WebDocumentViewerSettingsJS("documentViewerContainer", { annotations: true });
  
          // get items of document viewer
          var items = docViewerSettings.get_Items();
  
          // get the main menu of document viewer
          var mainMenu = items.getItemByRegisteredId("mainMenu");
          // if main menu is found
          if (mainMenu != null) {
              // get items of main menu
              let mainMenuItems = mainMenu.get_Items();
  
              // add "Annotation" menu panel to the main menu
              mainMenuItems.addItem("annotationsMenuPanel");
          }
  
          // get side panel of document viewer
          var sidePanel = items.getItemByRegisteredId("sidePanel");
          // if side panel is found
          if (sidePanel != null) {
              // get items of side panel
              var sidePanelItems = sidePanel.get_PanelsCollection();
  
              // add "Annotations" panel to the side panel
              sidePanelItems.addItem("annotationsPanel");
  
              // add "Text selection" panel to the side panel
              sidePanelItems.addItem("textSelectionPanel");
  
              // add "Text searh" panel to the side panel
              sidePanelItems.addItem("textSearchPanel");
          }
  
          // create the document viewer
          var docViewer = new Vintasoft.Imaging.DocumentViewer.WebDocumentViewerJS(docViewerSettings);
  
          // create visual tool that allows to work with annotations, navigate document and select text
          var annotationNavigationTextSelectionTool =
              docViewer.getVisualToolById("AnnotationVisualTool,DocumentNavigationTool,TextSelectionTool");
          // specify visual tool as mandatory visual tool of document viewer
          docViewer.set_MandatoryVisualTool(annotationNavigationTextSelectionTool);
          // specify visual tool as current visual tool of document viewer
          docViewer.set_CurrentVisualTool(annotationNavigationTextSelectionTool);
  
          // get image viewer of document viewer
          var imageViewer = docViewer.get_ImageViewer();
          // open file from session folder and add images from file to the image viewer
          imageViewer.get_Images().openFile("VintasoftImagingDemo.pdf");
      </script>
  </body>
  </html>
  
  

Run the ASP.NET MVC5 application and see the result.