VintaSoft Imaging .NET SDK 10.1 for Web
In This Topic
    Add web image viewer to an ASP.NET MVC5 application
    In This Topic

    This tutorial shows how to create a blank ASP.NET Core Web application in Visual Studio .NET 2019 and add image and thumbnail viewer to ASP.NET MVC5 application.

    Here are steps, which must be done:

    1. Create a blank ASP.NET MVC5 application.

      Open Visual Studio .NET 2019 and create a new project, of ASP.NET Web application type, and configure the project to use .NET Framework 4.7.2:
      Open Visual Studio .NET 2019 and create a new project, of ASP.NET Web Application type, and configure the project to use .NET Framework 4.7.2
      Select the "Empty" template for ASP.NET Web application and configure the project to use Web API:
      Select the Empty template for ASP.NET Web Application and configure to use Web API
    2. Server side: Add references to the Vintasoft assemblies to ASP.NET MVC5 application.

      Add references to the Vintasoft.Shared.dll, Vintasoft.Imaging.dll, Vintasoft.Imaging.Pdf.dll, Vintasoft.Imaging.Office.OpenXml.dll, Vintasoft.Shared.Web.dll, Vintasoft.Imaging.Web.Services.dll and Vintasoft.Imaging.Web.Api2Controllers.dll assemblies from "<SdkInstallPath>\VintaSoft Imaging .NET v10.1\Bin\DotNet4\AnyCPU\" folder in ASP.NET MVC5 application.

      Add references to the Vintasoft assemblies
    3. Server side: Create web services, which allow to upload/download file, manage image collection, get information about images, get thumbnails and render image tiles.

      • 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 'Add => Controller' context menu for 'Controllers' folder
        • Select Empty API controller template, set the controller name to the "MyVintasoftFileApiController" and press the "Add" button
          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
          Source codes of Vintasoft File API controller
          Here are source codes of MyVintasoftFileApiController class:
          // The project, which uses this code, must have references to the following assemblies:
          // - Vintasoft.Imaging
          // - Vintasoft.Imaging.Web.Api2Controllers
          
          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 'Add => Controller' context menu for 'Controllers' folder
        • Select Empty API controller template, set the controller name to the "MyVintasoftImageCollectionApiController" and press the "Add" button
          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
          Source codes of Vintasoft Image Collection API controller
          Here are source codes of MyVintasoftImageCollectionApiController class:
          // The project, which uses this code, must have references to the following assemblies:
          // - Vintasoft.Imaging
          // - Vintasoft.Imaging.Web.Api2Controllers
          
          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 and render image tiles

        • Press the right mouse button on the "Controllers" folder and select the "Add => Controller..." menu from context menu
          Select 'Add => Controller' context menu for 'Controllers' folder
        • Select Empty API controller template, set the controller name to the "MyVintasoftImageApiController" and press the "Add" button
          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
          Source codes of Vintasoft Image API controller
          Here are source codes of MyVintasoftImageApiController class:
          // The project, which uses this code, must have references to the following assemblies:
          // - Vintasoft.Imaging
          // - Vintasoft.Imaging.Web.Api2Controllers
          
          namespace WebApplication1.Controllers
          {
              public class MyVintasoftImageApiController : Vintasoft.Imaging.Web.Api2Controllers.VintasoftImageApi2Controller
              {
          
                  public MyVintasoftImageApiController()
                      : base()
                  {
                  }
          
              }
          }
                          
          
      • Open "App_Start\WebApiConfig.cs" file and check that ASP.NET MVC application correctly registers route for Web API controller.
        C# source codes of WebApiConfig.cs file
        Here are C# source codes of WebApiConfig.cs file:
        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}"
                    );
                }
            }
        }
                        
        
    4. Server side: Create ASP.NET MVC 5 controller for web view that will display image viewer.

      • Install nuget-package Microsoft.AspNet.Mvc 5.2.7:
        Add reference to the Microsoft.AspNet.Mvc nuget-package

      • Press the right mouse button on the "Controllers" folder and select the "Add => Controller..." menu from context menu
        'Add => Controller...' context menu

      • Select "MVC 5 Controller - Empty" template, set the controller name to the "DefaultController" and press the "Add" button
        ASP.NET MVC5 controller settings

      • Open "App_Start\RouteConfig.cs" file and check that ASP.NET MVC application correctly registers route for MVC controller.
        C# source codes of RouteConfig.cs file
        Here are C# source codes of RouteConfig.cs file:
        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" }
                    );
                }
            }
        }
        
                        
        
    5. Server side: Check global configuration of ASP.NET MVC5 application.

      Open "Global.asax.cs" file and check that "Application_Start" method registers all areas in ASP.NET MVC application, configures global HTTP configuration for ASP.NET application, registers routes for ASP.NET MVC application.
      C# source codes of Global.asax.cs file
      Here are C# source codes of Global.asax.cs file:
      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);
              }
          }
      }
                      
      
    6. Client side: Create web view for displaying image and thumbnail 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
        'Add view...' 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
        Web view settings
    7. Client side: Add Vintasoft JavaScript files to the project.

      • Create "Scripts" folder if "Scripts" folder does not exist.

      • Copy jQuery (version 3 or higher) file into "Scripts" folder if "Scripts" folder does not contain jQuery file (jquery-3.X.1.min.js).
        You can use jquery-3.4.1.min.js file from "<SdkInstallPath>\VintaSoft Imaging .NET v10.1\Examples\ASP.NET MVC\CSharp\AspNetMvcImagingDemo\Scripts\External\" folder or jQuery (version 3 or higher) file from any other source.

      • Copy Vintasoft.Shared.js and Vintasoft.Imaging.Html5.js files from "<SdkInstallPath>\VintaSoft Imaging .NET v10.1\Bin\JavaScript\" folder into "Scripts" folder.
        Add references to Vintasoft JavaScript files
    8. Client side: Add JavaScript code that displays image viewer.

      • Create folder "wwwroot\UploadedImageFiles\SessionID" and copy test PDF document "<SdkInstallPath>\VintaSoft\Imaging .NET v10.1\Images\VintasoftImagingDemo.pdf" to the folder. This document will be displayed in image viewer.

      • Open web view - file "Views\Default\Index.cshtml".
        Default web view

      • Add references to Vintasoft JavaScript files:
        References to Vintasoft JavaScript files
        Here is HTML code that adds references to jQuery and Vintasoft JavaScript files:
        <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.Html5.js" type="text/javascript"></script>
                                    
        

      • Add HTML markup (a div element that will display image viewer) to the web view:
        HTML markup (a div element that will display image viewer)
        Here is HTML markup code:
        <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>
                                    
        

      • Add JavaScript code that initializes and creates image viewer:
        JavaScript code that initializes and creates image viewer
        Here is JavaScript code that initializes and creates image viewer:
        @{
            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.Html5.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>
                                    
        
    9. Run the ASP.NET MVC5 application and see the result.

      Image viewer in ASP.NET MVC5 application