This tutorial shows how to create a blank ASP.NET MVC 4 application in Visual Studio .NET 2013 and add the web image viewer and web thumbnail viewer to a page of ASP.NET MVC application.

Here are steps, which must be done:

1. Create a blank ASP.NET MVC 4 application.

   Open Visual Studio .NET 2013 and create a new project, of ASP.NET MVC 4 Web Application type, and configure the project to use .NET Framework 4:
   
   Select the "Empty" template for ASP.NET MVC 4 Web Application:
   
   

2. Server side: Add references to the Vintasoft assemblies to your ASP.NET MVC 4 Web application.

   Add references to the Vintasoft.Imaging.dll, Vintasoft.Shared.dll, Vintasoft.Shared.Web.dll, Vintasoft.Imaging.Web.Services.dll and Vintasoft.Imaging.Web.ApiControllers.dll assemblies.
   For doing this you can copy assemblies to the Bin directory of ASP.NET MVC application.
   
   

3. Server side: Add the default MVC 4 controller to ASP.NET MVC 4 Web application.

   For doing this press the right mouse button on the "Controllers" folder and select the "Add => Controller..." menu from context menu:
   
   Set the controller name to the "HomeController" and use the Empty MVC controller template, press the "Add" button:
   
   

4. Server side: Add the default view to ASP.NET MVC application.

   For doing this open the "Controllers\HomeController.cs" file, press the right mouse button on the "Index()" text, select the "Add view..." menu from the context menu:
   
   Specify the view name and view parameters, press the "Add" button:
   
   

5. Server side: Create web services in your ASP.NET MVC 4 Web application.

   Add API controller, which is derived from Vintasoft.Imaging.Web.ApiControllers.VintasoftImageApiController, for getting information about images, getting thumbnails and rendering image tiles.
   For doing this press the right mouse button on the "Controllers" folder and select the "Add => Controller..." menu from context menu.
   
   Set the controller name to the "MyVintasoftImageApiController" and use the Empty API controller template, press the "Add" button.
   
   
   Add API controller, which is derived from Vintasoft.Imaging.Web.ApiControllers.VintasoftImageCollectionApiController, for managing of image collection.
   For doing this press the right mouse button on the "Controllers" folder and select the "Add => Controller..." menu from context menu.
   Set the controller name to the "MyVintasoftImageCollectionApiController" and use the Empty API controller template, press the "Add" button.
   
   Optionally: Add API controller, which is derived from Vintasoft.Imaging.Web.ApiControllers.VintasoftFileApiController, for managing of files.
   For doing this press the right mouse button on the "Controllers" folder and select the "Add => Controller..." menu from context menu.
   Set the controller name to the "MyVintasoftFileApiController" and use the Empty API controller template, press the "Add" button.
   
   Finally, your application will have 3 API controllers:
   
   

6. Server side: Optionally specify that web services must work with shared files.

   This step is optional and must be made only if all users, of your web application, must use shared directories and files.
   API controller will use the same folder for all users if you will set the VintasoftImageApiController.IsEmptySessionSupported property to True.
   For doing this please open the source codes of API controller and set the VintasoftImageApiController.IsEmptySessionSupported property to True in the controller's constructor.
   Here is an example:
   

   public MyVintasoftImageApiController() :
       base()
   {
       IsEmptySessionSupported = true;
   }
           
   

   

7. Server side: Map route to the web services.

   Map route to the VintaSoft Web API controllers, for example, using the following route template "api/{controller}/{action}".
   For doing this open the "App_Start\WebApiConfig.cs" file, change the route template to string "api/{controller}/{action}" and remove the default route values:
   
   

8. Server side: Specify settings of your ASP.NET MVC application.

   Add settings, defining the viewers and cache parameters, to the "appSettings" section of Web.config file:
   
   • VintasoftWebImaging_UploadDirectoryName - Name of directory where uploaded files must be stored.
   • VintasoftWebImaging_ResourceDirectoryName - Name of directory where global resources must be stored.
   • VintasoftWebImaging_CacheDirectoryName - Name of directory where cached data must be stored.
   • VintasoftWebImaging_CachedThumbnailsDirectoryName - Name of directory where cached thumbnails must be stored.
   • VintasoftWebImaging_CachedImageTilesDirectoryName - Name of directory where cached image tiles must be stored.
   • VintasoftWebImaging_CacheLifeTime - Value that determines how long, in minutes, cached object will be stored on server.
   
   Here is an example:
   

   <appSettings>
       <add key="VintasoftWebImaging_UploadDirectoryName" value="UploadedImageFiles"/>
       <add key="VintasoftWebImaging_ResourceDirectoryName" value="Resources"/>
       <add key="VintasoftWebImaging_CacheDirectoryName" value="VintasoftCache"/>
       <add key="VintasoftWebImaging_CachedThumbnailsDirectoryName" value="Thumbnails"/>
       <add key="VintasoftWebImaging_CachedImageTilesDirectoryName" value="Tiles"/>
       <add key="VintasoftWebImaging_CacheLifeTime" value="10080"/>
   </appSettings>
   

   
   

9. Client side: Add JavaScript scripts to the ASP.NET MVC view page.

   Place JQuery (version 1.11 or higher), Vintasoft.Shared.js and Vintasoft.Imaging.Html5.js files into "Scripts" directory and add the references to Vintasoft JavaScripts to your page code.
   For doing this open the "Views\Home\Index.cshtml" file and add HTML code to the file:
   • Javascript

       <script type="text/javascript" src="jquery-1.11.0.js"></script>
       <script type="text/javascript" src="Vintasoft.Shared.js"></script>
       <script type="text/javascript" src="Vintasoft.Imaging.Html5.js"></script>
           
   

   
   
   

10. Client side: Create containers for web viewers on ASP.NET MVC view page.

    Create containers for viewers (DIV elements) on an ASP.NET MVC view page and do not forget to set size of containers - this is important!
    For doing this open the "Views\Home\Index.cshtml" file and add HTML code to the file:
    • Javascript

    <div id="WebThumbnailViewer1Div" style="width: 240px; height: 650px; float:left"/>
    <div id="WebImageViewer1Div" style="width: 650px; height: 650px; float:left"/>
            
    

    
    

11. Client side: Optionally set the web session identifier.

    This step is optional and must be made only if users, of your web application, must NOT share directories and files.
    In this step you need specify the session identifier for current user.
    For doing this open the "Views\Home\Index.cshtml" file and add JavaScript code to the file:
    • Javascript

    <script type="text/javascript">
       Vintasoft.Shared.WebImagingEnviromentJS.set_SessionId("SessionId");
    </script>
            
    

    Important: Session identifier can be set only once and it can contain only digits and letters.
    
    

12. Client side: Specify the web services, which should be used by web viewers.

    For doing this open the "Views\Home\Index.cshtml" file and add JavaScript code to the file:
    • Javascript

    <script type="text/javascript">
        Vintasoft.Shared.WebServiceJS.defaultImageService = new Vintasoft.Shared.WebServiceControllerJS("api/MyVintasoftImageApi");
        Vintasoft.Shared.WebServiceJS.defaultImageCollectionService = new Vintasoft.Shared.WebServiceControllerJS("api/MyVintasoftImageCollectionApi");
    </script>
            
    

    

13. Client side: Create web viewers on ASP.NET MVC view page.

    1. Create HTML5 web viewers in a client-side code.
       For doing this open the "Views\Home\Index.cshtml" file and add HTML code to the file:
       
       
       • Javascript

       <script type="text/javascript">
           var webThumbnailViewer1 = new Vintasoft.Imaging.Html5.WebThumbnailViewerJS("WebThumbnailViewer1Div");
           var webImageViewer1 = new Vintasoft.Imaging.Html5.WebImageViewerJS("WebImageViewer1Div");
       </script>
               
       

       
       
    2. Create a link between web viewers (if necessary).
       For doing this open the source codes of "Views\Home\Index.cshtml" page and add JavaScript code to the page:
       
       • Javascript

       <script type="text/javascript">
           webImageViewer1.set_MasterViewer(webThumbnailViewer1);
       </script>
               
       

       
       

14. Client side: Optionally specify the image that must be shown in the web viewers IF ALL USERS USE SHARED FILES.

    Here is an example that shows how to load shared PNG file into viewer:
    
    • Javascript

    <script type="text/javascript">
        // load file "UploadedImageFiles/AllSupportedBarcodes.png" into viewer
        // ("UploadedImageFiles" directory can be changed using the VintasoftWebImaging_UploadDirectoryName key in Web.config file)
        webImageViewer1.get_Images().openFile("AllSupportedBarcodes.png");
    </script>
            
    

    

15. Client side: Optionally specify the image that must be shown in the web viewers IF USERS DO NOT SHARE FILES.

    Here is an example that shows how to copy file from shared directory into user's working directory and open PNG file from user's working directory:
    
    • Javascript

    <script type="text/javascript">    
        // specify the default web service, which should be used for managing of files
        Vintasoft.Shared.WebServiceJS.defaultFileService = new Vintasoft.Shared.WebServiceControllerJS("api/MyVintasoftFileApi");
      
        // Request for copying file is executed successfully.
        function copyFile_success(answer) {
            // open file copy.
            webImageViewer1.get_Images().openFile(answer.fileId);   
        }
        // Request for copying file is failed.
        function copyFile_error(answer) {
            // catch error
        }
        Vintasoft.Imaging.VintasoftFileAPI.copyFile("UploadedImageFiles/AllSupportedBarcodes.png", copyFile_success, copyFile_error);
    </script>
            
    

    
    

16. Run the ASP.NET MVC 4 Web application and see the result.