VintaSoft Imaging .NET SDK v8.7
In This Topic
    How to add web image and thumbnail viewers to ASP.NET MVC 4 application?
    In This Topic

    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:
      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:
      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.

      Add references to the Vintasoft assemblies
    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:
      Add the default MVC controller to ASP.NET MVC application
      Set the controller name to the "HomeController" and use the Empty MVC controller template, press the "Add" button:
      Set the controller name to the HomeController and use the Empty MVC controller template
    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:
      Add the default view to ASP.NET MVC application
      Specify the view name and view parameters, press the "Add" button:
      Specify the view name and view parameters
    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.
      Add the API controller to ASP.NET MVC application
      Set the controller name to the "MyVintasoftImageApiController" and use the Empty API controller template, press the "Add" button.
      Set name of API controller

      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:
      Created 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;
      }
              
      
      IsEmptySessionSupported property
    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:
      Map route to the VintaSoft Web API controllers
    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>
      

      Modified web.config
    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:
          <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>
              
      

      Add the references to Vintasoft JavaScript files to the default view
    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:
      <div id="WebThumbnailViewer1Div" style="width: 240px; height: 650px; float:left"/>
      <div id="WebImageViewer1Div" style="width: 650px; height: 650px; float:left"/>
              
      
      Create containers for viewers (DIV elements) on an ASP.NET MVC view page
    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:
      <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.
      Set the web session identifier on a client-side
    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:
      <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>
              
      
      Specify default web services
    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:

        <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:
        <script type="text/javascript">
            webImageViewer1.set_MasterViewer(webThumbnailViewer1);
        </script>
                
        
        Create web viewers
    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:
      <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>
              
      
      How to load shared PNG file into viewer
    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:
      <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>
              
      
      How copy file from shared directory into user's working directory and open it
    16. Run the ASP.NET MVC 4 Web application and see the result.

      Result