Page 1 of 1

ASP.NET MVC + Web API: View images from database in web image viewer.

Posted: Thu Apr 20, 2017 10:09 am
by Alex
In this topic we will show how to view images, which are stored in database, in ASP.NET MVC 5 application. Images will not be cached on the server and will be sent directly to the client.

For doing our task we need:
  • Open Visual Studio .NET 2017.
  • Create an ASP.NET MVC 5 application project.
  • Add the references to the Vintasoft assemblies (version 9.0.x.x) and Vintasoft JavaScript files to the project:
    • Vintasoft.Shared.dll
    • Vintasoft.Shared.Web.dll
    • Vintasoft.Imaging.dll
    • Vintasoft.Imaging.Web.Services.dll
    • Vintasoft.Imaging.Web.Api2Controllers.dll
    • Scripts\Vintasoft\Vintasoft.Shared.js
    • Scripts\Vintasoft\Vintasoft.Imaging.Html5.js
    You can add the assemblies and JavaScript files manually or automatically. Add the "Vintasoft.Imaging.Web.Api2Controllers" Nuget package to the project and the assemblies and JavaScript files will be added automatically.
  • Create a web service, which will get image from database and render image tile or thumbnail for web image viewer.
    • Create a Web API 2 controller with name VintasoftDBImageApiController. Controller will be used for rendering of images and thumbnails.
    • Create the DataBaseImageStorage class, which will be used as a storage for images in database.
    • Create the DatabaseEmulator class, which will be used for emulating connection with database.
    • Specify that VintasoftDBImageApiController class must use DataBaseImageStorage class as a data storage for images.
  • Create a default web view.
    • Add HTML5 web image viewer to the web view.
    • Create 3 web images, which are linked with images stored in database.
    • Create 3 buttons. Each button allows to load image in web image viewer.

Source codes of ASP.NET MVC 5 application for VintaSoft Imaging .NET SDK v9.0 can be downloaded from here.