0

asp web api を使用して複数の画像を返し、それらを表示するように angularjs を設定するにはどうすればよいですか? 私は少し探していましたが、何も機能しませんでした。私は本当にここで立ち往生しているので、どんな助けも大歓迎です!

私の現在のコード: 画像を一覧表示します。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 };
4

1 に答える 1

1

ここを見て、それが役立つかどうかを確認してください: AngularJS と Asp.Net Web Api を使用したブック ストア アプリケーション

ありがとう

編集：

説明: 次のコードは、サーバーに既に保存されている画像ファイルを処理するためのものです。

まず、angularJS から Web API を呼び出す必要があります。これを行う最も簡単な方法は、angular コントローラーから $http を使用することですが、このシナリオ用のデータ サービスを作成し、そのデータにアクセスする必要があるすべてのコントローラーにそのサービスを挿入することをお勧めします。

このコードをコントローラーに直接使用します。

$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");
    });

または、サービスを作成してコントローラーに挿入します。

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; });
});

次に、サーバー側で、'GET' メソッドを作成して、列挙可能なオブジェクトと画像データを返します。

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

ここで「myData」クラスはデータ モデルです。

それが役に立てば幸い。

于 2013-09-27T18:40:18.077 に答える