VintaSoft Imaging .NET SDK 10.1 for Web
In This Topic
    How to view images from database in ASP.NET application?
    In This Topic

    This tutorial shows how to create ASP.NET MVC 5 Web application in Visual Studio .NET 2017 and view images from database in web image viewer and web thumbnail viewer on a web page.
    Also article can be used for developing ASP.NET Core Web application or ASP.NET WebForms application.

    Here are steps, which must be done:

    1. Create an ASP.NET MVC 5 application with web image viewer and web thumbnail viewer.

      Please read how to create ASP.NET MVC 5 application with web image viewer and web thumbnail viewer here:
    2. Server side: Create data storage, which allows to load images from database and save images to database.

      Create the DatabaseDataStorage class, which is derived from Vintasoft.Data.IDataStorage, for accessing images in database.
      For doing this press the right mouse button on the "Controllers" folder and select the "Add => Class..." menu from context menu.
      Add the Database Storage class to ASP.NET MVC application

      Specify that you want to create "Class", set the class name to the "DatabaseDataStorage" and press the "Add" button.
      Write class name

      Derive created class from the Vintasoft.Data.IDataStorage interface.

      Implement the IDataStorage.CanStore method and specify that data storage can store images in file streams.
      Implement the IDataStorage.CanStore method

      Implement the IDataStorage.Contains and IDataStorage.GetItemCopy methods if your application allows you to view a set of existing images from database and do not allow to add, change or remove images.
      Implement the IDataStorage.Contains and IDataStorage.GetItemCopy methods

      Important: ASP.NET application image identifier can differ from database image identifier, for example, ASP.NET application image identifier can be created as concatenation of ASP.NET session identifier and database image identifier. In this case data storage must convert ASP.NET application image identifier, which is passed as "key" parameter to the data storage methods, to the database image identifier.

      Implement the IDataStorage.AddItem, IDataStorage.SetItem and IDataStorage.DeleteItem methods if your application allows you to view images from database and allows to add, change or remove images.
      Implement the IDataStorage.AddItem, IDataStorage.SetItem and IDataStorage.DeleteItem methods

      Implement the IDataStorage.LockItem and IDataStorage.UnlockItem methods if your application allows you to view images from database, allows to add, change or remove images and image must be locked during changing.
      Implement the IDataStorage.LockItem and IDataStorage.UnlockItem methods

      Here is code of DatabaseDataStorage class:
      ''' <summary>
      ''' Storage that allows to store data in database.
      ''' </summary>
      ''' <remarks>
      ''' Current data storage works in read-only mode.
      ''' </remarks>
      Public Class DataBaseImageStorage
              Implements IDataStorage
      
              Shared _lockObject As New Object()
      
      
      
              ''' <summary>
              ''' Determines whether the data storage can store data of specified type.
              ''' </summary>
              ''' <param name="type">The type of data.</param>
              ''' <returns>
              ''' <b>True</b> if data storage can store data of specified type;
              ''' otherwise, <b>false</b>.
              ''' </returns>
              ''' <exception cref="System.ArgumentNullException">If <paramref name="type" /> is <b>null</b>.</exception>
              Public Function CanStore(type As Type) As Boolean
                      ' specify that data storage can work only with images, which are stored in Stream objects
      
                      If GetType(Stream).IsAssignableFrom(type) Then
                              Return True
                      Else
                              Return False
                      End If
              End Function
      
              ''' <summary>
              ''' Determines whether the data storage contains an item with the specified identifier.
              ''' </summary>
              ''' <param name="key">The item key.</param>
              ''' <returns>
              ''' <b>True</b> - the data storage contains an item with the specified identifier;
              ''' <b>false</b> - the data storage does NOT contain an item with the specified identifier.
              ''' </returns>
              ''' <exception cref="System.ArgumentNullException">If <paramref name="key" /> is <b>null</b>.</exception>
              Public Function Contains(key As String) As Boolean
                      SyncLock _lockObject
                              ' check if image with identifier "key" is stored in database
      
                              Throw New NotImplementedException()
                      End SyncLock
              End Function
      
              ''' <summary>
              ''' Returns the keys of all items from data storage.
              ''' </summary>
              ''' <returns>The keys of all items from data storage.</returns>
              ''' <remarks>Method can be not implemented if functionality is not necessary.</remarks>
              Public Function GetKeys() As String()
                      SyncLock _lockObject
                              ' get identifiers ("keys") of all images stored in database
      
                              Throw New NotImplementedException()
                      End SyncLock
              End Function
      
              ''' <summary>
              ''' Returns an item copy from the data storage.
              ''' </summary>
              ''' <param name="key">The item key.</param>
              ''' <returns>The copy (clone) of item data.</returns>
              ''' <exception cref="System.ArgumentNullException">If <paramref name="key" /> is <b>null</b>.</exception>
              ''' <exception cref="System.ArgumentException">Thrown if <paramref name="key"/> is not found.</exception>
              ''' <exception cref="System.InvalidOperationException">If item with specified <paramref name="key" /> is locked.</exception>
              Public Function GetItemCopy(key As String) As Object
                      SyncLock _lockObject
                              If Contains(key) Then
                                      ' get image data from database and return Stream object that contains image data
      
                                      Throw New NotImplementedException()
                              Else
                                      Throw New Exception(String.Format("Data storage does not have image with identifier ""{0}"".", key))
                              End If
                      End SyncLock
              End Function
      
      
              ''' <summary>
              ''' Adds new item to the data storage.
              ''' </summary>
              ''' <param name="key">The item key.</param>
              ''' <param name="item">The item data.</param>
              ''' <exception cref="System.ArgumentNullException">If <paramref name="key" /> is <b>null</b>.</exception>
              ''' <exception cref="System.ArgumentException">An element with the same key already exists in the data storage.</exception>
              Public Sub AddItem(key As String, item As Object)
                      SyncLock _lockObject
                              ' add image with identifier "key" in database
      
                              Throw New NotImplementedException()
                      End SyncLock
              End Sub
      
              ''' <summary>
              ''' Sets the existing item in the data storage.
              ''' </summary>
              ''' <param name="key">The item key.</param>
              ''' <param name="item">The item data.</param>
              ''' <exception cref="System.ArgumentNullException">If <paramref name="key" /> is <b>null</b>.</exception>
              ''' <exception cref="System.InvalidOperationException">If item with specified <paramref name="key" /> is locked.</exception>
              Public Sub SetItem(key As String, item As Object)
                      SyncLock _lockObject
                              ' set image with identifier "key" in database
      
                              Throw New NotImplementedException()
                      End SyncLock
              End Sub
      
              ''' <summary>
              ''' Deletes the item from the data storage.
              ''' </summary>
              ''' <param name="key">The item key.</param>
              ''' <exception cref="System.ArgumentNullException">If <paramref name="key" /> is <b>null</b>.</exception>
              ''' <exception cref="System.InvalidOperationException">If item with specified <paramref name="key" /> is locked.</exception>
              Public Sub DeleteItem(key As String)
                      SyncLock _lockObject
                              ' delete image with identifier "key" in database
      
                              Throw New NotImplementedException()
                      End SyncLock
              End Sub
      
      
              ''' <summary>
              ''' Locks an item in data storage and returns the item.
              ''' </summary>
              ''' <param name="key">The item key.</param>
              ''' <returns>The locked item from data storage.</returns>
              ''' <exception cref="System.ArgumentNullException">Thrown if <paramref name="key" /> is <b>null</b>.</exception>
              ''' <exception cref="System.InvalidOperationException">Thrown if item with specified <paramref name="key" /> is already locked.</exception>
              ''' <seealso cref="UnlockItem(string, object)"/>
              ''' <remarks>Method must be implemented if image must be locked during changing.</remarks>
              Public Function LockItem(key As String) As Object
                      SyncLock _lockObject
                              ' lock image with identifier "key" in database
      
                              Throw New NotImplementedException()
                      End SyncLock
              End Function
      
              ''' <summary>
              ''' Unlock the locked item in data storage.
              ''' </summary>
              ''' <param name="key">The item key.</param>
              ''' <param name="item">Locked item.<br />
              ''' The item will be overrwritten if item differs from the item returned by the <see cref="LockItem"/> method.</param>
              ''' <exception cref="System.ArgumentNullException">Thrown if <paramref name="key" /> is <b>null</b>.</exception>
              ''' <exception cref="System.InvalidOperationException">Thrown if item with specified <paramref name="key" /> is not locked.</exception>
              ''' <seealso cref="LockItem(string)"/>
              ''' <remarks>Method must be implemented if image must be locked during changing.</remarks>
              Public Sub UnlockItem(key As String, item As Object)
                      SyncLock _lockObject
                              ' unlock image with identifier "key" in database
      
                              Throw New NotImplementedException()
                      End SyncLock
              End Sub
      
              ''' <summary>
              ''' Releases all resources used by the <see cref="DataBaseImageStorage"/>.
              ''' </summary>
              Public Sub Dispose()
                      Throw New NotImplementedException()
              End Sub
      
      End Class
                    
      
      /// <summary>
      /// Storage that allows to store data in database.
      /// </summary>
      /// <remarks>
      /// Current data storage works in read-only mode.
      /// </remarks>
      public class DataBaseImageStorage : IDataStorage
      {
      
          static object _lockObject = new object();
      
      
      
          /// <summary>
          /// Determines whether the data storage can store data of specified type.
          /// </summary>
          /// <param name="type">The type of data.</param>
          /// <returns>
          /// <b>True</b> if data storage can store data of specified type;
          /// otherwise, <b>false</b>.
          /// </returns>
          /// <exception cref="System.ArgumentNullException">If <paramref name="type" /> is <b>null</b>.</exception>
         public bool CanStore(Type type)
          {
              // specify that data storage can work only with images, which are stored in Stream objects
      
              if (typeof(Stream).IsAssignableFrom(type))
                  return true;
              else
                  return false;
          }
      
          /// <summary>
          /// Determines whether the data storage contains an item with the specified identifier.
          /// </summary>
          /// <param name="key">The item key.</param>
          /// <returns>
          /// <b>True</b> - the data storage contains an item with the specified identifier;
          /// <b>false</b> - the data storage does NOT contain an item with the specified identifier.
          /// </returns>
          /// <exception cref="System.ArgumentNullException">If <paramref name="key" /> is <b>null</b>.</exception>
          public bool Contains(string key)
          {
              lock (_lockObject)
              {
                  // check if image with identifier "key" is stored in database
      
                  throw new NotImplementedException();
              }
          }
      
          /// <summary>
          /// Returns the keys of all items from data storage.
          /// </summary>
          /// <returns>The keys of all items from data storage.</returns>
          /// <remarks>Method can be not implemented if functionality is not necessary.</remarks>
          public string[] GetKeys()
          {
              lock (_lockObject)
              {
                  // get identifiers ("keys") of all images stored in database
      
                  throw new NotImplementedException();
              }
          }
      
          /// <summary>
          /// Returns an item copy from the data storage.
          /// </summary>
          /// <param name="key">The item key.</param>
          /// <returns>The copy (clone) of item data.</returns>
          /// <exception cref="System.ArgumentNullException">If <paramref name="key" /> is <b>null</b>.</exception>
          /// <exception cref="System.ArgumentException">Thrown if <paramref name="key"/> is not found.</exception>
          /// <exception cref="System.InvalidOperationException">If item with specified <paramref name="key" /> is locked.</exception>
          public object GetItemCopy(string key)
          {
              lock (_lockObject)
              {
                  if (Contains(key))
                  {
                      // get image data from database and return Stream object that contains image data
      
                      throw new NotImplementedException();
                  }
                  else
                      throw new Exception(string.Format("Data storage does not have image with identifier \"{0}\".", key));
              }
          }
      
      
          /// <summary>
          /// Adds new item to the data storage.
          /// </summary>
          /// <param name="key">The item key.</param>
          /// <param name="item">The item data.</param>
          /// <exception cref="System.ArgumentNullException">If <paramref name="key" /> is <b>null</b>.</exception>
          /// <exception cref="System.ArgumentException">An element with the same key already exists in the data storage.</exception>
          public void AddItem(string key, object item)
          {
              lock (_lockObject)
              {
                  // add image with identifier "key" in database
      
                  throw new NotImplementedException();
              }
          }
      
          /// <summary>
          /// Sets the existing item in the data storage.
          /// </summary>
          /// <param name="key">The item key.</param>
          /// <param name="item">The item data.</param>
          /// <exception cref="System.ArgumentNullException">If <paramref name="key" /> is <b>null</b>.</exception>
          /// <exception cref="System.InvalidOperationException">If item with specified <paramref name="key" /> is locked.</exception>
          public void SetItem(string key, object item)
          {
              lock (_lockObject)
              {
                  // set image with identifier "key" in database
      
                  throw new NotImplementedException();
              }
          }
      
          /// <summary>
          /// Deletes the item from the data storage.
          /// </summary>
          /// <param name="key">The item key.</param>
          /// <exception cref="System.ArgumentNullException">If <paramref name="key" /> is <b>null</b>.</exception>
          /// <exception cref="System.InvalidOperationException">If item with specified <paramref name="key" /> is locked.</exception>
          public void DeleteItem(string key)
          {
              lock (_lockObject)
              {
                  // delete image with identifier "key" in database
      
                  throw new NotImplementedException();
              }
          }
      
      
          /// <summary>
          /// Locks an item in data storage and returns the item.
          /// </summary>
          /// <param name="key">The item key.</param>
          /// <returns>The locked item from data storage.</returns>
          /// <exception cref="System.ArgumentNullException">Thrown if <paramref name="key" /> is <b>null</b>.</exception>
          /// <exception cref="System.InvalidOperationException">Thrown if item with specified <paramref name="key" /> is already locked.</exception>
          /// <seealso cref="UnlockItem(string, object)"/>
          /// <remarks>Method must be implemented if image must be locked during changing.</remarks>
          public object LockItem(string key)
          {
              lock (_lockObject)
              {
                  // lock image with identifier "key" in database
      
                  throw new NotImplementedException();
              }
          }
      
          /// <summary>
          /// Unlock the locked item in data storage.
          /// </summary>
          /// <param name="key">The item key.</param>
          /// <param name="item">Locked item.<br />
          /// The item will be overrwritten if item differs from the item returned by the <see cref="LockItem"/> method.</param>
          /// <exception cref="System.ArgumentNullException">Thrown if <paramref name="key" /> is <b>null</b>.</exception>
          /// <exception cref="System.InvalidOperationException">Thrown if item with specified <paramref name="key" /> is not locked.</exception>
          /// <seealso cref="LockItem(string)"/>
          /// <remarks>Method must be implemented if image must be locked during changing.</remarks>
          public void UnlockItem(string key, object item)
          {
              lock (_lockObject)
              {
                  // unlock image with identifier "key" in database
      
                  throw new NotImplementedException();
              }
          }
      
          /// <summary>
          /// Releases all resources used by the <see cref="DataBaseImageStorage"/>.
          /// </summary>
          public void Dispose()
          {
              throw new NotImplementedException();
          }
      
      }
                      
      


      Created DatabaseDataStorage class can be used in the following web API controllers: Vintasoft.Imaging.Web.Api2Controllers.VintasoftImageApi2Controller, Vintasoft.Imaging.Web.Api2Controllers.VintasoftImageCollectionApi2Controller, Vintasoft.Imaging.Web.Api2Controllers.VintasoftImageConverterApi2Controller, Vintasoft.Imaging.Web.Api2Controllers.VintasoftFileApi2Controller, Vintasoft.Imaging.ImageProcessing.Web.Api2Controllers.VintasoftImageProcessingApi2Controller, Vintasoft.Imaging.ImageProcessing.DocCleanup.Web.Api2Controllers.VintasoftImageProcessingDocCleanupApi2Controller, Vintasoft.Imaging.Pdf.Web.Api2Controllers.VintasoftPdfApi2Controller, Vintasoft.Imaging.Annotation.Web.Api2Controllers.VintasoftAnnotationCollectionApi2Controller, Vintasoft.Twain.Web.Api2Controllers.VintasoftTwainApi2Controller and Vintasoft.Barcode.Web.Api2Controllers.VintasoftBarcodeApi2Controller.

      If your application is WebForms application - you can use DatabaseDataStorage class in Vintasoft.Imaging.Web.HttpHandlers.VintasoftImageHandler handler and etc.

      If your application is ASP.NET Core Web application - you can use DatabaseDataStorage class in Vintasoft.Imaging.AspNetCore.ApiControllers.VintasoftImageApiController controller and etc.
    3. Server side: Use "DatabaseDataStorage" in your Web API 2 controllers.

      For doing this you need to override the CreateSessionDataStorage method in all VintaSoft Web API 2 controllers used in your application:
      ''' <summary>
      ''' Creates a data storage for current session.
      ''' </summary>
      ''' <param name="sessionId">The session identifier.</param>
      ''' <returns>The data storage.</returns>
      ''' <remarks>
      ''' <b>Important:</b> The overridden method must return data storage that
      ''' can store <see cref="Stream"/> objects.
      ''' </remarks>
      Protected Overrides Function CreateSessionDataStorage(sessionId As string) As IDataStorage
          return New DatabaseDataStorage(sessionId)
      End Function
                    
      
      /// <summary>
      /// Creates a data storage for current session.
      /// </summary>
      /// <param name="sessionId">The session identifier.</param>
      /// <returns>The data storage.</returns>
      /// <remarks>
      /// <b>Important:</b> The overridden method must return data storage that
      /// can store <see cref="Stream"/> objects.
      /// </remarks>
      protected override IDataStorage CreateSessionDataStorage(string sessionId)
      {
          return new DatabaseDataStorage(sessionId);
      }
                      
      

      Override 'CreateSessionDataStorage' method
    4. Client side: Open image from database and view image in the web viewers.

      For doing this you need to call the "openFile" file function of image collection of web image viewer and pass the image identifier to the "openFile" function:
      webImageViewer1.get_Images().openFile("database-key");
                                  
      

      Open image from database