Asp web api and returning multiple images to angularjs

Question

How do I use asp web api to return multiple images and then set angularjs to show them? I have been searching for a bit but I did not get anything working. I am really stuck here so any help will be greatly appreciated!

My current code: List images; using (var uow = new UnitOfWork()) { images = uow.ImageMetadatas.Query(m => m.AlbumId == albumId).Select(m => m.Filename).ToList(); }

        var content = new MultipartContent();
        foreach (var img in images)
        {
            var image = new Bitmap(img);
            var thumbnail = image.GetThumbnailImage(200, 200, ThumbnailCallback, IntPtr.Zero);
            var stream = new MemoryStream();
            thumbnail.Save(stream, ImageFormat.Jpeg);

            var imgContent = new StreamContent(stream);
            imgContent.Headers.ContentType = MediaTypeHeaderValue.Parse("image/jpeg");
            content.Add(imgContent);
        }
        return new HttpResponseMessage(HttpStatusCode.Accepted) { Content = content };

Nitij · Accepted Answer · 2013-09-28 06:35:43Z

Take a look here and see if it helps: Book Store application using AngularJS and Asp.Net Web Api

Thanks

EDIT:

Explanation: The following code is to handle image files that are already saved on the server.

First you have to make the call to the web api from angularJS. The easiest way to do this is to use $http from angular controller, but I would recommend creating a data service for this scenario and inject that service into all the controllers that need to access that data.

Use this code directly into your controller:

$scope.myData = [];
$http({
        method: 'GET',
        url: 'api/controller/'
    }).
    success(function (data, status, headers, config) {
        $scope.myData = data;
    }).
    error(function (data, status) {
        console.log("Request Failed");
    });

or create a service and inject it into the controller:

var myApp = angular.module('myApp', []);
myApp.factory("DataService", function ($http, $q) {
  var myData = []; 
  var read = function () {
    var deferred = $q.defer();
    deferred.resolve($http({
      method: 'GET',
      url: 'api/controller/'
    }));
    return deferred.promise;
  };
  return {
    MyData: myData,
    ReadData: read
  };
});
myApp.controller('MainCtrl', function ($scope, DataService) {    
  $scope.myData= [];        
  DataService.ReadData().
   then(function (config, data, headers, status) { $scope.myData = arguments[0].data; });
});

Then on the server side, create a 'GET' method to return an enumerable object with the images data:

public List<myData> GetData()
{            
  List<myData> returnData = GetImagesData();    
  return returnData;
}

here 'myData' class is the data model.

Hope it helps.

Even if the link contains a complete answer, please , add an explanation. Your answer should stand for itself without reference.

Collectives™ on Stack Overflow

Asp web api and returning multiple images to angularjs

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related